在 JS 中,this 特指調用函數的那個對象。
如:
<button>點擊</button>
$('button').on('click',function(){
console.log(this);//<button>點擊</button>
});
再比如:
$(window).on('scroll',function(){
console.log(this);//window 對象
})
在上述事件中,比較容易區分 this 特指哪個對象。
但在有些情況下,不容易知道,如:
function foo(){
console.log(this);
}
下面是具體情況的講解。
1.作為函數調用時,this 指向全局對象
function foo(){
console.log(this);
}
foo();//window 對象
再比如
function foo(){
function fn(){
console.log(this);
}
fn();
}
foo();//window 對象
還比如
function foo(){
function fn(){
setTimeout(function(){
console.log(this)
},5000);
}
fn();
}
foo();//window 對象
這些都是指向 window 對象的。
2.作為對象的方法調用
var obj1 = {
name: 'Hunter',
fn: function(){
console.log(this);
console.log(this.name);
}
};
obj1.fn();//obj1, 可以理解為 obj1 在調用函數 fn... 所以 fn 可以通過 this.name 訪問 obj1.name
但是,有些需要注意的點
var obj1 = {
name: 'Hunter',
fn: function(){
console.log(this);
}
};
var fn2 = obj1.fn;
fn2();//window 對象。 因為 fn2 = obj1.fn; 相當于 fn2 = function(){console.log(this);} 這樣的理解方式與典型的閉包很類似,這只是一個簡單的賦值
3.作為構造函數調用
function f(name){
this.name = name
console.log(this)
}
var f1 = new f('a');//此時的 this 指向實例 f1 這個對象
var f2 = new f('b');//此時的 this 指向實例 f2 這個對象
this 的指向大概情況就是如此,只要注意是什么情況調用,并不復雜。
另外,可以通過 call 或者 apply 來改變 this。下面進行簡單的介紹。
//Function.apply()
function fn(){
console.log(this)
}
var obj={
name: 'hunter',
age: '20'
};
fn.call(obj);//此時的 this 指向 obj
apply 和 call 很類似,只是當函數接受參數時,apply是以數組的方式傳遞。
function fn(arg1,arg2,arg3,...){
console.log(this);
console.log(arg1)
console.log(arg2)
}
var obj ={
name: 'hunter'
}
fn.call(obj,1,2,3)
fn.apply(obj,[1,2,3])