ES6类中，箭头函数是否无法绑定`this`？

Question

我很惊讶这个不起作用。（我正在运行带有 --harmony_arrow_functions 标志的 iojs 2.3.0 版本。）

class Foo {
  constructor() { this.foo = "foo"; }
  sayHi() { return (() => this.foo)(); }
}
f = new Foo();
f.sayHi // Cannot read property 'foo' of undefined.

我本以为箭头函数会正确获取this的值。我有什么遗漏吗？

- Alan O'Donnell

Answer 1

我不知道问题出在哪里，但我的版本对我来说运行良好：

class Foo {
    constructor() {
        this.foo = "foo";
    }

    sayHi() {
        return (() => console.log(this.foo))();
    }
}

const f = new Foo();
f.sayHi();

顺便说一下：我正在使用babel

- marcel

---

很酷，我猜这只是一个 iojs/V8 的 bug。 - Alan O'Donnell

很高兴我找到了这个问题，因为几周前我也遇到了同样的问题。花了我一段时间才发现这是一个V8的问题。确实，使用babel可以解决这个问题。现在我又可以安心睡觉了。 - kernel

Answer 2

你的IIFE创建了一个新的作用域。this 然后引用 IIFE 的作用域，其中 this.foo 是未定义的。

解决这个问题的方法是绑定你的IIFE。

class Foo {
    constructor() {
        this.foo = 'foo';
    }
    sayHi() {
        return (() => {
            return this.foo;
        }.bind(this))();
    }
}

let f = new Foo();
console.log(f.sayHi()); //foo

- Ben Fortune

---

但这是预期的行为吗？我的理解是箭头函数应该从周围的词法上下文中继承它们的this值。 - Alan O'Donnell

显然不是这样。我们在JS聊天室中进行了讨论，显然V8中的箭头函数存在问题。 - Ben Fortune

我在OP的代码中没有看到IIFE（如果你的意思是箭头函数立即执行，那就不相关了）。 - Felix Kling

@FelixKling 你知道IIFE代表什么吗？ - Florian Margaine

@FlorianMargaine：是的。 - Felix Kling