为什么在胖箭头函数定义中未定义“this”？ [复制]

Question

首先我尝试了这个 -

const profile = {
    name: 'Alex',
    getName: function(){
      return this.name;
    }
};

效果很好。现在我用胖箭头尝试了同样的事情。在那种情况下，“this”是未定义的。

const profile = {
    name: 'Alex',
    getName: () => {
      return this.name;
    }
};

这给了我一个错误

TypeError: 无法读取未定义的属性“名称”

我学到的是，粗箭头语法可以更好地处理隐含的“this”。请解释为什么会这样。

Answer 1

与常规函数不同，箭头函数没有自己的this，只有常规函数和全局范围有自己的this。

这意味着每当this在箭头函数中被引用时，它将开始查找范围以找到this的值，或者在这种情况下，在查找过程中发现object是没有自己的this，因此，它上升到全局范围并将this 的值与全局范围绑定，在那里它找不到任何东西。这两个例子将解决您的疑问。

var obj = {
    a : 'object???',
    foo : () => { console.log(this.a) }
};

var a = 'global!!!';

obj.foo();              // global!!!

在函数中包裹箭头

var obj = {
    a : 'object???',
    foo : function() {
        return (() => {
            console.log(this.a)
        })();
    }
};

var a = 'global!!!';

obj.foo();

在这里，我试图深入解释this 的行为。

https://github.com/anirudh-modi/JS-essentials/blob/master/ES2015/Functions/Arrow%20functions.md#how-this-is-different-for-arrow-functions