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关键字替换函数语法。箭头函数最常见的用例是简短的"lambdas“，它不重新定义this，通常在将函数作为回调传递给某个函数时使用。

箭头函数不能用于编写对象方法，因为正如您已经发现的那样，由于箭头函数在词汇上封闭上下文的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;
    }
};

(它们之间的差别很小，但只有在使用super在getOwner中使用而不是，或者将getOwner复制到另一个对象时，它们才是重要的。)

es6邮件列表中有一些关于箭头函数扭曲的争论，这些函数具有类似的语法，但有自己的this。但是，这个建议没有得到很好的接受，因为这仅仅是语法上的糖分，允许人们节省输入几个字符，并且没有提供超过现有函数语法的新功能。请参阅主题无界箭头函数。

Answer 2

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

​

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

console.log(chopper.getOwner());

​

您必须将this声明为一个函数：

​

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

console.log(chopper.getOwner());

​

或者：

​

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
};

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