小编典典

JavaScript ES6对象中的方法:使用arrow功能

javascript

在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对象内部使用胖管道方法?


阅读 531

收藏
2020-04-22

共1个答案

小编典典

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

arrow函数不能用于编写对象方法,因为,正如您所发现的,由于arrow函数this在词法包围的上下文上方闭合,this因此箭头内的in是您定义对象的当前位置。这就是说:

// 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。但是,该建议很少得到接受,因为这仅仅是语法甜头,使人们可以省去键入几个字符,并且不提供比现有函数语法更多的新功能。请参阅主题未绑定arrow功能。

2020-04-22