小记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。参见



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

 

posted on 2017-06-07 17:56 Evalon 阅读(...) 评论(...) 编辑 收藏

导航

公告

统计