为什么"这个"在胖箭头函数定义中未定义?

时间:2016-07-26 11:55:09

标签: javascript ecmascript-6

首先我尝试了这个 -

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

哪个工作正常。现在我用胖箭尝试了同样的事情。在那种情况下"这个"未定义。

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

这给了我一个错误

  

TypeError:无法读取属性' name'未定义的

我学到的是,胖箭头语法更好地处理隐含的"这个"。请解释为什么会这样。

1 个答案:

答案 0 :(得分:7)

与常规函数一样,箭头函数没有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