小记js中普通function和arrow function内this的使用区别

前两月参加内部培训的时候，遇到过一个关于arrow function中的this问题，

function Dog(name,variety) {
         Pet.call(this, name);
         this.variety =variety;
}

Dog.prototype = Object.create(Pet.prototype);


Dog.prototype.walk = function(){
         Pet.prototype.walk.call(this);
};

Dog.prototype.wang = function() {
         console.log(this.variety+" WangWang");
         Pet.prototype.shout.call(this);
};

在这段代码中，如果我把Dog.prototype.method = function(){}换成箭头函数，其他的不变，this.name就变成了undefined。当时使用nodejs和jsbin调试均是如此，

查了下此时arrow function中的this是global context，虽然知道这规则就是es6这样规定的，但是好奇心仍然得不到满足，今日偶然在知乎看见一个回答提到了更多信息。

原题是探讨关于this的缺陷的 ，其中 贺师俊 的回答提到：

 

1. JavaScript的this在直接调用时会是global，这是不是个错误？

答：是设计错误。所以ES5的strict模式改为了返回undefined。实际上曾有提案建议变为外层的this（也就是题主认为符合直觉的方式），但是这样的改变也存在问题。比如对于采用call/apply调用的函数，其this的行为总是应该和以前一样吧？所以，这样半吊子的lexical scoping其实反而增加了程序员的理解负担。

但是在ES6中，arrow function中的this确实变成了lexical scoping的，且arrow function不允许call/apply重新绑定this。参见http://tc39wiki.calculist.org/es6/arrow-functions/ 。

作者：贺师俊
链接：https://www.zhihu.com/question/20909497/answer/16589520
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。