请问这段 js 代码为什么会输出 undefined？

[searene]

平时 js 写的不多，以下代码有个地方不太明白。

let func = () => ({
    a: 1,
    b: () => {
        return this.a;
    }
});
let instance = func();
console.log(instance.b()); // undefined

我记得如果this在一个函数里面的话，this会被设定为这个函数的调用者。在上面这段代码里调用b的是instance，所以this应该就是instance。显然instance.a === 1是成立的，那为什么this.a会返回undefined？

[FlowMEMO]

箭头函数的 this 绑定和普通函数的不一样。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

[ZZZZZZZZTC]

()=>{} 貌似使用 this 会出错

[bdbai]

箭头函数没有 this ，用到的是外层的 this 。这里最外层的 this 就是 undefined 。
你可以把箭头函数改成普通函数表达式再试试。

[aleen42]

Arrow functions 会有一个 lexical this 的特性，因此函数中的 this 并非指向函数自身，而是外面一层，如 Window

[aleen42]

所以你的代码在 ES5 等同：

var self = this;
function func() {
return {
a: 1,
b: function () {
return self.a;
}
};
}

[SourceMan]

this 是外层的，不是 func 的，箭头函数导致的
你可以看看 babel 转换后的

[loy6491]

所以一般写成
b () {
return this.a
}

[TTPlayer]

var func = function func() {
return {
a: 1,
b: function b() {
return undefined.a;
}
};
};
var instance = func();
console.log(instance.b()); // undefined

以上的 babel 转换成 es5 后的代码，可以参考一下

[inickel]

这里的 this 指向的是调用时的全局变量

[e8c47a0d]

箭头函数里不能用 this

[e8c47a0d]

可以改成这样

let func = () => ({
a: 1,
b() {
return this.a
}
})
console.log(func().b())