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

javascript ecmascript-6 ecmascript-harmony

2022-08-30 04:28:40

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

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

答案 1

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

Arrow 函数不能用于编写对象方法，因为正如您所发现的，由于箭头函数紧贴在词法封闭上下文的上方，因此箭头内是定义对象的当前箭头。也就是说：thisthis

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

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

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

// or

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

（它们之间有很小的差异，但只有在中使用时，它们才重要，而您不是，或者如果您复制到另一个对象。supergetOwnergetOwner

在es6邮件列表上有一些关于箭头函数扭曲的争论，箭头函数具有相似的语法，但有自己的。然而，这个建议反响不佳，因为那只是语法糖，允许人们节省输入几个字符，并且没有提供比现有函数语法新的功能。请参阅主题未绑定箭头函数。this

答案 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());