不得不说,js中的
this
真是一大坑啊,之前写了篇文章,发现还有坑没填完,今天继续填一下。还是先举个栗子:
var Person = {
'age': 18,
'sayHello': function () {
setTimeout(function () {
console.log(this.age);
});
}
};
var age = 20;
Person.sayHello(); // 20
输出的是
20
,这个例子之前的文章用过了,现在再捡起来用一次。之前的说法是setTimeout
会让里面运行的代码,运行在全局对象上面(window对象),这个说法虽然正确,但是并没有说清楚为什么会这样,下面将探讨一下原因:还是先看个例子:
var obj={
a:'1'
}
function getA() {
console.log(this.obj.a);
}
var pseudoWindow = {
obj:{
a:'2'
},
getA: getA,
getA2: function (callback) {
callback();
getA();
pseudoWindow.getA()
this.getA()
this.func = callback;
this.func();
}
}
pseudoWindow.getA2(getA)
// 1
// 1
// 2
// 2
// 2
调用了
pseudoWindow.getA2
,然后传入了一个函数getA
组我诶参数。
callback()
:函数直接调用,因为callback
执行的是全局的getA
,所以callback
中的this
是指全局对象,所以obj
拿得到的是1
getA()
:同上,getA
是调用的全局的getA
。
pseudoWindow.getA()
:最容易理解的一个,调用的是pseudoWindow
中的getA
,所以this
得指向的是pseudoWindow
。
this.getA()
:因为这个this
是在方法getA2
中,所以指向的是其外层对象,即pseudoWindow
,调用的实际上是pseudoWindow.getA()
this.func()
:同上
规律
所有通过对象调用的方法中的
this
指向都是根据运行环境而定,所有不通过对象的,this
都是指向全局。前者是方法调用,后者是函数调用。
END
JavaScript中的
this
不得不说,真是一个大坑啊。所以写了两篇小短文,简单总结了一下,如果有误,欢迎指正。