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

Question

我在我的项目中使用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;
  }
});

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

谢谢。

Answer 1

看起来 jquery 小部件工厂没有以任何其他方式传入元素，因此您可以只使用常规的匿名函数语法。请注意，常规语法本身并不糟糕，因为您需要 this 上下文，所以您唯一的选择是正常方式 ().

Answer 2

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

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

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

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

ES6 Arrow Functions and jQuery Widget Factory

javascript

jquery

widget

this

ecmascript-6