ES6 对象中的方法：使用箭头函数

Question

在 ES6 中，这两个都是合法的：

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

并且，作为简写：

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
}

是否也可以使用新的箭头功能？在尝试类似

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

或

var chopper = {
    owner: 'John',
    getOwner: () => (this.owner)
};

我收到一条错误消息，提示该方法无权访问this。这只是语法问题，还是不能在 ES6 对象中使用粗箭头方法？

Answer 1

箭头函数并非设计用于在所有情况下仅作为老式函数的较短版本。它们不打算使用 function 关键字替换函数语法。箭头函数最常见的用例是不重新定义 this 的简短“lambdas”，通常在将函数作为回调传递给某个函数时使用。

箭头函数不能用于编写对象方法，因为正如您所发现的，由于箭头函数关闭了词法封闭上下文的this，因此箭头中的this 是您定义的当前位置物体。也就是说：

// Whatever `this` is here...
var chopper = {
    owner: 'Zed',
    getOwner: () => {
        return this.owner;    // ...is what `this` is here.
    }
};

在你的情况下，想要在对象上编写方法，你应该简单地使用传统的function 语法，或者 ES6 中引入的方法语法：

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

// or

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};

（它们之间存在细微差别，但仅当您在getOwner 中使用super 时它们才重要，而您不是，或者如果您将getOwner 复制到另一个对象。）

在 es6 邮件列表上有一些争论，关于箭头函数的扭曲，它们具有相似的语法但有自己的 this。然而，这个提议并没有得到很好的接受，因为它只是语法糖，允许人们省去输入几个字符，并且没有提供比现有函数语法更多的功能。请参阅主题unbound arrow functions。

Answer 2

在这一行getOwner: () => this.owner 应该是：

var chopper = {
    owner: 'John',
    getOwner: () => this.owner
}; //here `this` refers to `window` object.

您必须将this 声明为函数：

var chopper = {
    owner: 'John',
    getOwner() { return this.owner }
};

或者：

var chopperFn = function(){

    this.setOwner = (name) => this.owner = name;
    Object.assign(this,{
        owner: 'Jhon',
        getOwner: () => this.owner,
    })

}

var chopper = new chopperFn();
console.log(chopper.getOwner());
chopper.setOwner('Spiderman');
console.log(chopper.getOwner());

Answer 3

如果非要使用箭头功能，可以将this改为chopper，

var chopper = {
  owner: "John",
  getOwner: () => chopper.owner
};

虽然这不是最佳实践，但当您更改对象名称时，您必须更改此箭头功能。

Answer 4

我使用箭头函数的快速提示。

• 对将使用object.method() 语法的方法使用非箭头函数。 （这些函数将从调用者那里接收有意义的this 值。）
• 几乎所有其他事情都使用箭头功能。

Answer 5

另一个提示，在严格模式下，this 仍然指的是 Window 而不是 undefined。

  (() => {
    "use strict";
    console.log(this); // window
  })();

  (function () {
    "use strict";
    console.log(this); // undefined
  })();

Answer 6

这个内部箭头函数不反映对象的上下文。相反，它给出了调用对象方法的上下文。

选中此项，这可以让您了解何时使用箭头，何时不使用。 https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/