DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript中this的四種用法
javascript中this的四種用法
編輯:關於JavaScript     

this

在函數執行時,this 總是指向調用該函數的對象。要判斷 this 的指向,其實就是判斷 this 所在的函數屬於誰。

在《javaScript語言精粹》這本書中,把 this 出現的場景分為四類,簡單的說就是:

有對象就指向調用對象
沒調用對象就指向全局對象
用new構造就指向新對象
通過 apply 或 call 或 bind 來改變 this 的所指。

1) 函數有所屬對象時:指向所屬對象

函數有所屬對象時,通常通過 . 表達式調用,這時 this 自然指向所屬對象。比如下面的例子:

var myObject = {value: 100};
myObject.getValue = function () {
 console.log(this.value); // 輸出 100

 // 輸出 { value: 100, getValue: [Function] },
 // 其實就是 myObject 對象本身
 console.log(this);

 return this.value;
};

console.log(myObject.getValue()); // => 100

getValue() 屬於對象 myObject,並由 myOjbect 進行 . 調用,因此 this 指向對象 myObject。

2) 函數沒有所屬對象:指向全局對象

var myObject = {value: 100};
myObject.getValue = function () {
 var foo = function () {
  console.log(this.value) // => undefined
  console.log(this);// 輸出全局對象 global
 };

 foo();

 return this.value;
};

console.log(myObject.getValue()); // => 100

在上述代碼塊中,foo 函數雖然定義在 getValue 的函數體內,但實際上它既不屬於 getValue 也不屬於 myObject。foo 並沒有被綁定在任何對象上,所以當調用時,它的 this 指針指向了全局對象 global。

據說這是個設計錯誤。

3) 構造器中的 this:指向新對象

js 中,我們通過 new 關鍵詞來調用構造函數,此時 this 會綁定在該新對象上。

var SomeClass = function(){
 this.value = 100;
}

var myCreate = new SomeClass();

console.log(myCreate.value); // 輸出100

順便說一句,在 js 中,構造函數、普通函數、對象方法、閉包,這四者沒有明確界線。界線都在人的心中。

4) apply 和 call 調用以及 bind 綁定:指向綁定的對象

apply() 方法接受兩個參數第一個是函數運行的作用域,另外一個是一個參數數組(arguments)。

call() 方法第一個參數的意義與 apply() 方法相同,只是其他的參數需要一個個列舉出來。

簡單來說,call 的方式更接近我們平時調用函數,而 apply 需要我們傳遞 Array 形式的數組給它。它們是可以互相轉換的。

var myObject = {value: 100};

var foo = function(){
 console.log(this);
};

foo(); // 全局變量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }

var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }

以所述就是本文的全部內容了,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved