foo2()采用了箭头函数。
按照对call的理解,foo.call({id:23})应该输出23,而不是0。所以,谁能解释一下吗?
代码如下:
<script type="text/javascript">
function foo() {
setTimeout(function (){
console.log('id1:', this.id);
}, 100);
}
function foo2() {
setTimeout(() => {
console.log('id2:', this.id);
}, 100);
}
var id = 0;
foo.call({id:23});
foo2.call({id: 2});
</script>
执行结果:
0
2
foo
函数里面的this
还是{id:23}
但是到了setTimeout
接受的回掉里面,this
就变为了window
所以就输出了全局的 0,第二个因为箭头函数,this
与foo2
的this
绑定,所以是 2foo2的setTimeout的参数是一个箭头函数,里面的this,绑定定义时所在的作用域(foo2执行的时候,this是call中对象),而不是指向运行时所在的作用域。普通的setTimeout中的函数绑定的是运行时作用域(window)。
1、foo函数的this是window,foo2函数的this是{id: 2}这个对象。
很明显,第一个this指向的是window,而第二个箭头函数this指向当前对象,也就是说谁调用,就指向谁;
第一个可以改下解决下:
1、setTimeout中的回调函数在foo执行100ms后执行,运行时的作用域是window。
2、箭头函数可以让setTimeout里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域。
箭头函数作用域的问题