ES6箭头函数和jQuery Widget Factory

问题描述

我在项目中使用jQuery Widget Factory，并且尝试使用ES6语法，包括箭头功能。

那么，如何在小部件的方法内部引用this？

作为一个假设的例子，我想转换这段代码

$.widget( "custom.colorize",{
  
  // default options
  options: {
    red: 255,green: 0,blue: 0
  },// The constructor
  _create: function() {

    this.options.green = 128;
  }
});

这段代码（请注意，我将_create函数更改为箭头函数，这将引发错误）

$.widget( "custom.colorize",// The constructor
  _create: () => {

    this.options.green = 128;
  }
});

那么，我现在该如何指向局部变量呢？

谢谢。

解决方法

看起来jquery小部件工厂没有以任何其他方式传递元素，因此您可以只使用常规的匿名函数语法。请注意，常规语法并不是天生就差，并且因为您需要一个[<-上下文，所以唯一的选择就是常规方式（since arrow functions can't have a this value binded）。

,

对于要使this成为对象的方法或调用者将this明确设置为您需要的方法，请勿使用箭头功能。

箭头功能不只是语法快捷方式。它们在执行时会将this的值更改为this的词法值，因此，仅当您想要this的新行为或不使用时，才应使用箭头函数完全this。

在这种情况下，应使用常规函数定义而不是箭头定义，以便调用者可以适当地将this的值传递给您。