es6中箭头函数学习的一个记录
2017-07-06 18:07
411 查看
公司要开小程序的项目了,领导让提前熟悉下es6的语法,学习中遇到箭头函数相关的一段代码,起初对输出结果不是很理解,重新看了箭头函数的相关概念后才有一点儿明白。
如下代码:
上面代码中,Timer函数内部设置了两个定时器,分别使用了箭头函数和普通函数,然后用setTimeout函数延迟3100毫秒后执行。
最后输出结果是:
可以看到,3100毫秒之后,timer.s1被更新了3次,而timer.s2一次都没更新。为什么会这样?
因为:前者的this绑定定义时所在的作用域(即Timer函数),后者的this指向运行时所在的作用域(即全局对象)
箭头函数中的this.绑定的是Timer函数中的s1变量,所以每隔一秒钟s1的值会被更新,但是在普通函数中,this指代的是全局对象,放到浏览器,全局对象是window,在node就是global.s2。在上边儿这段代码中,并没有在全局定义s2变量,所以this.s2++其实没有什么作用,如果在这里将s2打印一下:
会发现,输出的是NaN.
如果增加一个全局变量,如下:
在浏览器中再次执行,就会发现this.s2可以打印出值了。
如下代码:
function Timer() { this.s1 = 0; this.s2 = 0; // 箭头函数 setInterval(() => this.s1++, 1000); // 普通函数 setInterval(function () { this.s2++; }, 1000); } var timer = new Timer(); setTimeout(() => console.log('s1: ', timer.s1), 3100); setTimeout(() => console.log('s2: ', timer.s2), 3100);
上面代码中,Timer函数内部设置了两个定时器,分别使用了箭头函数和普通函数,然后用setTimeout函数延迟3100毫秒后执行。
最后输出结果是:
s1: 3 s2: 0
可以看到,3100毫秒之后,timer.s1被更新了3次,而timer.s2一次都没更新。为什么会这样?
因为:前者的this绑定定义时所在的作用域(即Timer函数),后者的this指向运行时所在的作用域(即全局对象)
箭头函数中的this.绑定的是Timer函数中的s1变量,所以每隔一秒钟s1的值会被更新,但是在普通函数中,this指代的是全局对象,放到浏览器,全局对象是window,在node就是global.s2。在上边儿这段代码中,并没有在全局定义s2变量,所以this.s2++其实没有什么作用,如果在这里将s2打印一下:
// 普通函数 setInterval(function () { this.s2++; console.log(th 4000 is.s2); }, 1000);
会发现,输出的是NaN.
如果增加一个全局变量,如下:
window.s2 = 0;
在浏览器中再次执行,就会发现this.s2可以打印出值了。
相关文章推荐
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- es6中箭头函数学习的一个记录
- ES6学习记录之class, extends, super和箭头函数与this
- ES6学习6章:函数的扩展(箭头函数)
- ES6学习------箭头函数
- es6学习第1天,箭头函数 块级作用域
- ES6学习总结之函数变化(函数默认参数,扩展运算符,箭头函数)