箭头函数中的this
指向与一般function
定义的函数的this
不同,普通function
定义的函数的this
指向的是 调用者且可以改变,而箭头函数的this
的指向与调用者无关,在定义时确定且不可改变,
1. 我们来看下面这个例子:
function
定义的函数:
var x = 11;
var obj = {
x: 22,
say: function() {
console.log(this.x)
}
}
obj.say();
//console.log输出的是22
一般的定义函数跟我们的理解是一样的,运行的时候决定this
的指向,我们可以知道当运行obj.say()
时候,obj
是函数的调用者,所以this
指向的是obj
对象。
箭头函数:
var x = 11;
var obj = {
x: 22,
say: () => {
console.log(this.x);
}
}
obj.say();
//输出的值为11
这样就非常奇怪了如果按照之前function
定义应该输出的是22
,而此时输出了11
,那么如何解释ES6中箭头函数中的this
是定义时的绑定呢?
2. 如何确定箭头函数this
的指向谁?
一句话:扒掉外层的箭头函数,此时的this
指向谁,那么箭头函数 this
就永远指向谁。
我们还是以这段代码为例,此时函数的调用者为obj
,我们拔掉这层皮,此时this
实际指向Window
,也就是this.x
实际为Window.x
,也就是我们所定义的var x = 11;
中的x
,所以输出结果为11
而不是22
。
var x = 11;
var obj = {
x: 22,
say: () => {
console.log(this.x);
}
}
obj.say();
//输出的值为11
网友评论