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 }

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