ES6 箭头函数和 jQuery 小部件工厂答案

【问题标题】：ES6 Arrow Functions and jQuery Widget FactoryES6 箭头函数和 jQuery 小部件工厂
【发布时间】：2020-08-19 00:53:05
【问题描述】：

我在我的项目中使用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", {
  
  // default options
  options: {
    red: 255,
    green: 0,
    blue: 0
  },

  // The constructor
  _create: () => {

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

那么，我如何引用局部变量，因为 this 现在没有指向它们？

谢谢。

【问题讨论】：

标签： javascript jquery ecmascript-6 widget this

【解决方案1】：

看起来 jquery 小部件工厂没有以任何其他方式传入元素，因此您可以使用常规匿名函数语法。请注意，常规语法本质上并不差，因为您需要 this 上下文，您唯一的选择是常规方式 (since arrow functions can't have a this value binded)。

【讨论】：

【解决方案2】：

不要将箭头函数用于您希望 this 成为您的对象的方法或调用者明确将 this 设置为您需要的方法。

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

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

【讨论】：