this是Javascript語言的一個關鍵字。正確掌握了 JavaScript 中的 this 關鍵字,才算邁入了 JavaScript 這門語言的門檻。
this 不是變量,不是屬性,不能為其賦值,它始終指向調用它的對象。
只要記住最重要的一條即可“它始終指向調用它的對象” ,所以找到調用this的對象,就知道this到底指向誰了
它代表函數(shù)運行時,自動生成的一個內部對象,只能在函數(shù)內部使用。
下面分四種情況,詳細討論this的用法。
情況一:純粹的函數(shù)調用
這是函數(shù)的最通常用法,屬于全局性調用,因此this就代表全局對象Global。
function test(){
this.x = 1;
alert(this.x);
}
test(); // 1
var test = function(){
alert(this === window);
}
test(); //true
純粹的函數(shù)調用也有感覺上似乎復雜的:
var test = function(){
var innerTest = function(){
alert(this === test);
}
innerTest();
}
test();
你不會認為彈出"true"吧,不是按照上面的理論'innerTest'是被'test'調用的,然后'this'就指向'test'嗎?
額,錯就錯在是誰調用的'innerTest', 其實這種函數(shù)都是'window'對象調用的,即使你嵌套一千層,調用各個函數(shù)的都是'window'對象,奉上下面這段代碼為證
var test = function(){
var innerTest = function(){
alert(this === window); //true
var innerTest1 = function(){
alert(this === window); //true
}
innerTest1();
}
innerTest();
}
test();
情況二:作為對象方法的調用
函數(shù)還可以作為某個對象的方法調用,這時this就指這個上級對象。
function test(){
alert(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test; //作為對象的方法調用
obj.m(); //1
下面的你不會認為結果為"false"吧!,'test1'和'test' 兩個都指向一個對象,所以是true。關鍵記住”this 始終指向調用它的對象“。
var test ={
'a':1,
'b':function(){
alert(this === test)
}
}
var test1 = test;
test1.b(); //true
下面是 "true" 還是 "false" 呢?
var test ={
'a':1,
'b':{
'b1':function(){
alert(this === test);
}
}
}
test.b.b1();
按照上面的理論,這時 "this" 不再直接被 'test' 調用了,而是被 'test.b' 調用, 奉上下面一段代碼為證:
var test ={
'a':1,
'b':{
'b1':function(){
alert(this === test.b);
}
}
}
test.b.b1(); //true
情況三 作為構造函數(shù)調用
所謂構造函數(shù),就是通過這個函數(shù)生成一個新對象(object)。這時,this就指這個新對象。
function test(){
this.x = 1;
}
var o = new test();
alert(o.x); // 1
下面構造函數(shù)”new test()“創(chuàng)建了一個新的空對象,然后再由這個對象指向函數(shù)"test"中的代碼,因此此時this不在是window對象,而是該構造函數(shù)創(chuàng)建的新對象
var test = function(){
alert(this === window);
}
new test(); //false
情況四 apply調用
apply()是函數(shù)對象的一個方法,它的作用是改變函數(shù)的調用對象,它的第一個參數(shù)就表示改變后的調用這個函數(shù)的對象。因此,this指的就是這第一個參數(shù)。
var x = 0;
function test(){
alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0
apply()的參數(shù)為空時,默認調用全局對象。因此,這時的運行結果為0,證明this指的是全局對象。
如果把最后一行代碼修改為: o.m.apply(o); //1
運行結果就變成了1,證明了這時this代表的是對象o。
再來一段:
var test = function(){
alert(this === window);
}
var test1 = {
}
test.apply(test1); //false
apply作用就是”調用一個對象的一個方法,以另一個對象替換當前對象“ 所以了'window' 對象已經被替代為'test1',自然為'false'了,奉上如下代碼以為證明:
var test = function(){
alert(this === test1);
}
var test1 = {
}
test.apply(test1); //true