深入理解Javascript箭头函数中的this


Posted in Javascript onFebruary 13, 2017

首先我们先看一段代码,这是一个实现倒数功能的类「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指向时的情况可就又多了一种了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
javascript 获取表单file全路径
Dec 31 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
ES6学习之变量的解构赋值
Feb 12 #Javascript
AngularJS实现路由实例
Feb 12 #Javascript
jQuery文字轮播特效
Feb 12 #Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 #Javascript
jQuery、zepto、js常用小技巧
Feb 12 #Javascript
JS中如何实现Laravel的route函数详解
Feb 12 #Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 #Javascript
You might like
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
浅析为什么a="abc" 不等于 a=new String("abc")
2017/10/25 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Sanic框架配置操作分析
2018/07/17 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
python生成特定分布数的实例
2019/12/05 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
英文留学推荐信范文
2014/01/25 职场文书
技术总监管理职责范本
2014/03/06 职场文书
机械专业求职信范文
2014/07/15 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
放假通知
2015/04/14 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android