小記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 來源：知乎 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。