首先我们先看一段代码,这是一个实现倒数功能的类「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指向时的情况可就又多了一种了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“深入理解Javascript箭头函数中的this”评论...
更新动态
2024年11月13日
2024年11月13日
- 刘欢《雨中的树(新歌加精选)2CD》德国HD24K金碟[WAV+CUE]
- 郑源 《世间情歌》6N纯银SQCD[WAV+CUE][1G]
- 群星《粤潮2HQII》头版限量编号[低速原抓WAV+CUE][991M]
- 群星《2023好听新歌21》十倍音质 U盘音乐[WAV分轨][1G]
- 《热血传奇》双11感恩回馈 超值狂欢30天
- 原神5.2版本活动汇总 5.2版本活动有哪些
- 张敬轩.2010-NO.ELEVEN【环球】【WAV+CUE】
- 黄丽玲.2006-失恋无罪【艾回】【WAV+CUE】
- 阿达娃.2024-Laluna【W8VES】【FLAC分轨】
- 宝可梦大集结段位等级划分表大全 大集结段位一览
- 龙腾世纪影障守护者工坊与装备如何升级 工坊与装备升级说明
- 龙腾世纪影障守护者全成就攻略分享 龙腾世纪4全成就列表一览
- 《剑星》更新四套全新战衣!
- 卡普空老将伊津野英昭宣布入职腾讯光子 开发3A动作
- 38岁梅根·福克斯官宣怀孕:将迎来第四个孩子