ES6对象中的方法:使用箭头功能


96

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


11
新函数语法的最大优点之一是它的this区别对待。它是由创建函数的词法环境定义的,这意味着this创建chopper变量的this值将是函数的值。换句话说,它不会引用该chopper对象。

1
同时使用粗箭头语法?仅当您this通过先创建chopper对象然后在具有this指向该对象的函数中进行赋值来更改值时。可以使用构造函数很干净地完成此操作。

1
该演示将在Firefox中运行。Chrome还没有。jsfiddle.net/bfyarxfe

2
@fox,您必须在该jsfiddle上使用“ use strict”。
Walter Chapilliquen-wZVGG 2015年

1
@fox:在受支持的环境中可以正常工作。Firefox尚未完全支持。在Continuumconsole.log()方法调用的结果中进行尝试。有用。

Answers:


154

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

箭头函数不能用于编写对象方法,因为,正如您所发现的那样,由于箭头函数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。但是,该建议很少得到接受,因为这仅仅是语法糖,使人们可以节省键入几个字符的时间,并且不提供比现有函数语法更多的新功能。请参阅主题未绑定箭头功能


如果我正确地阅读了此内容,则似乎表明该邮件列表降低了语法糖的优先级,即使这会导致更大的代码统一性/可读性。就目前而言,在ES6下在OOP上下文中使用fat-arrow函数要比在coffeescript下更具挑战性。
狐狸

据我了解,句法糖认为是考虑语言扩展的正当理由,但正如您所说的那样,优先级较低-换句话说,此类提议的门槛更高。

12

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


1
我在这里遇到错误:"TypeError: Cannot read property 'owner' of undefined\n at Object.chopper.getOwner
狐狸

我知道,这是正确的用法,但是esta方法始终返回window Object。您将必须this在函数中声明。
沃尔特·查皮利肯

2
this不一定指window。它指的this是封闭环境中的当前值,可能是也可能不是window。也许那就是你的意思。只是要确保他了解这不是默认值。

@torazaburo对我来说很好,我尝试了一下,this现在是指上课
Walter Chapilliquen-wZVanG 2015年

2
您所写的内容等同于,但比简单地编写更冗长var chopperFn = function() { this.owner = 'Jhon'; this.getOwner = () => this.owner; }

1

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

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

0

如果必须使用箭头功能,可以更改thischopper

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

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


0

在严格模式下,另一个技巧this仍然是指Window而不是undefined。

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.