众所周知,JavaScript中this关键字在不同的场合,有不同的含义,本文主要介绍一下,各自场合,this的作用。
案例1(function)
function person() {
this.age =25;
console.log("this:"+this);//"this:[object Window]"
console.log(window.age);//25
console.log(this.age);//25
};
此时,this指向的是window对象,所以window.age和this.age是同样的结果。
案例2(new 对象)
function person() {
this.age =25;
console.log("this:"+this);//"this:[object Object]"
console.log(window.age);//undefined
console.log(this.age);//25
};
var p1 = new person();
此时,this指向的是p1对象,new关键字后的构造函数中的this指向用该构造函数构造出来的新对象。
案例3({}对象)
var name = "Bob";
var nameObj ={
name : "Tom",
showName : function(){
console.log("this:"+this);//"this:[object Object]"
console.log(this.name); //Tom
}
};
nameObj.showName();
此时,this指向的是nameObj对象。
案例4(setTimeout,setInterval)
var name = "Bob";
var nameObj ={
name : "Tom",
showName : function(){
console.log("this:"+this);//"this:[object Window]"
console.log(this.name); //Bob
},
waitShowName : function(){
setTimeout(this.showName, 1000);
}
};
nameObj.waitShowName();
此时,this指向的是window对象。setTimeout、setInterval和匿名函数执行时的当前对象是全局对象window。
案例5(eval)
var name = "window";
var Bob = {
name: "Bob",
showName: function(){
console.log("this:"+this);//"this:[object Object]"
eval("alert(this.name)");//Bob
}
};
Bob.showName();
此时,this指向的是Bob对象.对于eval函数,其执行时候似乎没有指定当前对象,但实际上其this并非指向window,因为该函数执行时的作用域是当前作用域。
案例6(apply,call)
var name = "window";
var someone = {
name: "Bob",
showName: function(){
alert(this.name);
}
};
var other = {
name: "Tom"
};
someone.showName.apply(); //window
someone.showName.apply(other); //Tom
apply用于改变函数执行时的当前对象, 当无参数时,当前对象为window,有参数时当前对象为该参数。于是这个例子Bob成功偷走了Tom的名字。 apply和call能够强制改变函数执行时的当前对象,让this指向其他对象。