js中對this關鍵字的理解
this是Javascript語言的一個關鍵字。它代表函式執行時,自動生成的一個內部物件,只能在函式內部使用。
比如, 理解this指代什麼的關鍵點在與: 看這個this指的是區域性物件還是全域性物件(global)預設在”script”標籤中寫的成員變數和方法都屬於全域性物件(global)所有,global物件其實是不存在的,當js在瀏覽器上應用的時候,window物件是瀏覽器引擎對global物件的封裝,所以在瀏覽器上的全域性物件就是window物件,但在其他應用中就不一定是window物件了。所以當方法 直接在”script”標籤中呼叫和在標籤的屬性中寫都是預設用gloabl物件呼叫,該方式的this都指的是global物件.。在瀏覽器上就指的是window物件了。
function test(){
this.x = 1;
}
隨著函式使用場合的不同,this的值會發生變化。但是有一個總的原則,那就是this指的是,呼叫函式的那個物件。
下面分四種情況,詳細討論this的用法。
情況一:純粹的函式呼叫
這是函式的最通常用法,屬於全域性性呼叫,因此this就代表全域性物件Global。
請看下面這段程式碼,它的執行結果是1。
function test(){
this.x = 1;
alert(this.x);
}
test(); // 1
為了證明this就是全域性物件,我對程式碼做一些改變:
var x = 1;
function test(){
alert(this.x);
}
test(); // 1
執行結果還是1。再變一下:
var x = 1;
function test(){
this.x = 0;
}
test();
alert(x); //0
調整如下
情況二:作為物件方法的呼叫
函式還可以作為某個物件的方法呼叫,這時this就指這個上級物件。
function test(){
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1
情況三 作為建構函式呼叫
所謂建構函式,就是通過這個函式生成一個新物件(object)。這時,this就指這個新物件。
function test(){
this.x = 1;
}
var o = new test();
alert(o.x); // 1
執行結果為1。為了表明這時this不是全域性物件,我對程式碼做一些改變:
var x = 2;
function test(){
this.x = 1;
}
var o = new test();
alert(x); //2
執行結果為2,表明全域性變數x的值根本沒變。 當使用new +方法的形式時,該方法表示的是構造方法,與new關鍵字一起使用,會生成一個物件,js,java物件的建立其實是在建構函式開始執行之前,就是說建構函式執行的時候,被構造的物件其實已經存在了,該物件的屬性都是有預設值的(例如 int 預設0),所以建構函式中可以用this引用當前被構造的物件進行處理(比如 this.name=“Jack”),建構函式的作用就是給建立的物件的預設值賦值成您想要的。
情況四 apply呼叫
apply()是函式物件的一個方法,它的作用是改變函式的呼叫物件,它的第一個引數就表示改變後的呼叫這個函式的物件。因此,this指的就是這第一個引數。
var x = 0;
function test(){
alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0
apply()的引數為空時,預設呼叫全域性物件。因此,這時的執行結果為0,證明this指的是全域性物件。
如果把最後一行程式碼修改為
o.m.apply(o); //1
執行結果就變成了1,證明了這時this代表的是物件o
通過元素的屬性的方式呼叫函式,此方式this也指全域性物件(global) 用這種方式呼叫函式 預設是通過apply呼叫的,如果不傳遞任何引數預設的是this全域性物件,如果傳遞了引數this就是指定的引數
<script type="text/javascript">
var id = 2;
function test(){
alert(this.id); //2
}
</script>
</head>
<body>
<input type="button" value="anniu" onclick="test()" />
</body>
此例證明 當客戶端指明是瀏覽器時,全域性物件就是window物件
<script type="text/javascript">
var id = 2;
function test(){
this.id = 1;
alert(this.id);
}
test();//1
alert(window.id);//1
</script>
當this指代全域性物件時,也可用this宣告一個變數。
<script type="text/javascript">
function test(){
this.id = 1;
alert(this.id);
}
alert(id);//1
</script>