深入理解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中的Location地址对象
Jan 16 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
解决Nuxt使用axios跨域问题
Jul 06 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
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中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
实例解析Array和String方法
2016/12/14 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
python获取代码运行时间的实例代码
2018/06/11 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
python 高阶函数简单介绍
2021/02/19 Python
HSRP的含义以及如何工作
2014/09/10 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
运动会入场词50字
2014/02/20 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
党课心得体会范文
2014/09/09 职场文书
学生自我评语
2015/01/04 职场文书
学生保证书
2015/01/16 职场文书
机关保密工作承诺书
2015/05/04 职场文书
酒桌上的开场白
2015/06/01 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
SpringBoot 集成Redis 过程
2021/06/02 Redis