深入理解Javascript箭头函数中的this
更新时间：2017年02月13日 08:36:04 作者：Heero.Luo
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。那么下面这篇文章主要给大家介绍了箭头函数中this的相关资料，有需要的朋友可以参考借鉴，下面来一起看看吧。
首先我们先看一段代码，这是一个实现倒数功能的类「Countdown」及其实例化的过程：
function Countdown(seconds) {
this._seconds = seconds;
}
Countdown.prototype._step = function() {
console.log(this._seconds);
if (this._seconds > 0) {
this._seconds -= 1;
} else {
clearInterval(this._timer);
}
};
Countdown.prototype.start = function() {
this._step();
this._timer = setInterval(function() {
this._step();
}, 1000);
};
new Countdown(10).start();
运行这段代码时，将会出现异常「this._step is not a function」。
这是Javascript中颇受诟病的「this错乱」问题：setInterval重复执行的函数中的this已经跟外部的this不一致了。
要解决这个问题，有三个方法。
闭包
新增一个变量指向期望的this，然后将该变量放到闭包中：
Countdown.prototype.start = function() {
var self = this;
this._step();
this._timer = setInterval(function() {
self._step();
}, 1000);
};
bind函数
ES5给函数类型新增的「bind」方法可以改变函数（实际上是返回了一个新的函数）的「this」：
Countdown.prototype.start = function() {
this._step();
this._timer = setInterval(function() {
this._step();
}.bind(this), 1000);
};
箭头函数
这正是本文要重点介绍的解决方案。箭头函数是ES6中新增的语言特性，表面上看，它只是使匿名函数的编码更加简短，但实际上它还隐藏了一个非常重要的细节——箭头函数会捕获其所在上下文的this作为自己的this。也就是说，箭头函数内部与其外部的this是保持一致的。
所以，解决方案如下：
Countdown.prototype.start = function() {
this._step();
this._timer = setInterval(() => {
this._step();
}, 1000);
};
这无疑使this的处理更加方便了。然而，对各位Javascript Coder而言，判断this指向时的情况可就又多了一种了。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
今天在工作中需要将某个链接给取消实现只触发事件的目的，后来发现批量取消链接等，脚本之家简单的给整理了下，希望对需要的朋友有所帮助。2011-10-10
JavaScript字符串处理之trim()和replace()详解
这篇文章主要给大家介绍了关于JavaScript字符串处理之trim()和replace()的相关资料,文中介绍的所有这些方法都不会修改原始字符串,而是返回一个新的字符串,需要的朋友可以参考下2024-10-10
使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现，本文有利于巩固你js与css方面的知识，感兴趣的你可以了解下哦，希望本文对你有所帮助2013-01-01
可是这会引起再因网络原因或其他原因使图片不能正常加载的话 这样就是再次调用onerror，基于微软的一套核心的浏览器就会认为这是死循环2009-08-08
这篇文章主要介绍了php 修改密码实现代码的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了微信小程序实现抖音播放效果的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要介绍了微信小程序 调用微信授权窗口相关问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要为大家介绍了Cropper.js进阶之裁剪后保存至本地实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
看了很多的js dom学习资料，发现这个比较详细，特转载给大家学习一下2008-06-06
兄弟节点之间可以通过 previousSibling 和 nextSibling 属性访问同一级别上的不同子节点。这个兄弟节点是元素还是文本节点在现代浏览器上运行是怎么样的呢？2009-10-10
最新评论