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对象中使用fat-pipe方法？

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。但是，这个提议很难被接受，因为这仅仅是语法糖，允许人们保存键入几个字符，并且不提供现有函数语法的新功能。请参阅主题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 }
};

或者：

＆＃13;

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

＆＃13;

Answer 3

我遵循的使用箭头功能的快速提示。

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

Answer 4

如果必须使用箭头功能，可以将this更改为chopper，

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

尽管这不是最佳做法，但是在更改对象名称时，必须更改此箭头功能。

Answer 5

另一个提示，在严格模式下，this仍然引用Window而不是未定义。

  (() => {
    "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/

Answer 7

是的，可以在对象文字中使用箭头功能（对此具有访问权限）。您应该使用Object.assign（）方法。

let chopper = {
    owner: 'John',
    getOwner: () => { console.log(this.owner); }
};

Object.assign(this, chopper);
chopper.getOwner();

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

7 个答案: