這里的主題是 this ，不扯遠了。this 本身原本很簡單，總是指向類的當前實例，this 不能賦值。這前提是說 this 不能脫離 類/對象 來說，也就是說 this 是面向對象語言里常見的一個關鍵字。說的極端點，如果你編寫的 JS 采用函數(shù)式寫法，而不是面向對象式，你所有的代碼里 this 會少很多，甚至沒有。記住這一點，當你使用 this 時，你應該是在使用對象/類 方式開發(fā)，否則 this 只是函數(shù)調用時的副作用。

JavaScript中的this總是讓人迷惑，應該是js眾所周知的坑之一。 個人也覺得js中的this不是一個好的設計，由于this晚綁定的特性，它可以是全局對象，當前對象，或者…有人甚至因為坑大而不用this。

其實如果完全掌握了this的工作原理，自然就不會走進這些坑。來看下以下這些情況中的this分別會指向什么：

1.全局代碼中的this

alert(this)
//window

全局范圍內的this將會指向全局對象，在瀏覽器中即使window。

2.作為單純的函數(shù)調用

function fooCoder(x) {
 this.x = x;
}
fooCoder(2);
alert(x);
// 全局變量x值為2

這里this指向了全局對象，即window。在嚴格模式中，則是undefined。

3.作為對象的方法調用

var name = "clever coder";
var person = {
 name : "foocoder",
 hello : function(sth){
  console.log(this.name + " says " + sth);
 }
}
person.hello("hello world");

輸出 foocoder says hello world。this指向person對象，即當前對象。

4.作為構造函數(shù)

new FooCoder();

函數(shù)內部的this指向新創(chuàng)建的對象。

5.內部函數(shù)

var name = "clever coder";
var person = {
 name : "foocoder",
 hello : function(sth){
  var sayhello = function(sth) {
   console.log(this.name + " says " + sth);
  };
  sayhello(sth);
 }
}
person.hello("hello world");
//clever coder says hello world

在內部函數(shù)中，this沒有按預想的綁定到外層函數(shù)對象上，而是綁定到了全局對象。這里普遍被認為是JavaScript語言的設計錯誤，因為沒有人想讓內部函數(shù)中的this指向全局對象。一般的處理方式是將this作為變量保存下來，一般約定為that或者self：

var name = "clever coder";
var person = {
 name : "foocoder",
 hello : function(sth){
  var that = this;
  var sayhello = function(sth) {
   console.log(that.name + " says " + sth);
  };
  sayhello(sth);
 }
}
person.hello("hello world");
//foocoder says hello world

6.使用call和apply設置this

person.hello.call(person, "world");

apply和call類似，只是后面的參數(shù)是通過一個數(shù)組傳入，而不是分開傳入。兩者的方法定義：

call( thisArg [，arg1，arg2，… ] ); 
// 參數(shù)列表，arg1，arg2，...
apply(thisArg [，argArray] );  
// 參數(shù)數(shù)組，argArray

兩者都是將某個函數(shù)綁定到某個具體對象上使用，自然此時的this會被顯式的設置為第一個參數(shù)。

簡單地總結

簡單地總結以上幾點，可以發(fā)現(xiàn)，其實只有第六點是讓人疑惑的。

其實就可以總結為以下幾點：

1.當函數(shù)作為對象的方法調用時，this指向該對象。

2.當函數(shù)作為淡出函數(shù)調用時，this指向全局對象（嚴格模式時，為undefined）

3.構造函數(shù)中的this指向新創(chuàng)建的對象

4.嵌套函數(shù)中的this不會繼承上層函數(shù)的this，如果需要，可以用一個變量保存上層函數(shù)的this。

再總結的簡單點，如果在函數(shù)中使用了this，只有在該函數(shù)直接被某對象調用時，該this才指向該對象。

obj.foocoder();
foocoder.call(obj, ...);
foocoder.apply(obj, …);

更進一步

我們可能經(jīng)常會寫這樣的代碼：

$("#some-ele").click = obj.handler;

如果在handler中用了this，this會綁定在obj上么？顯然不是，賦值以后，函數(shù)是在回調中執(zhí)行的，this會綁定到$(“#some-div”)元素上。這就需要理解函數(shù)的執(zhí)行環(huán)境。本文不打算長篇贅述函數(shù)的執(zhí)行環(huán)境，可以參考《javascript高級程序設計》中對執(zhí)行環(huán)境和作用域鏈的相關介紹。這里要指出的時，理解js函數(shù)的執(zhí)行環(huán)境，會更好地理解this。

那我們如何能解決回調函數(shù)綁定的問題？ES5中引入了一個新的方法，bind():

fun.bind(thisArg[, arg1[, arg2[, ...]]])
 thisArg

當綁定函數(shù)被調用時,該參數(shù)會作為原函數(shù)運行時的this指向.當使用new 操作符調用綁定函數(shù)時,該參數(shù)無效.

arg1, arg2, ...

當綁定函數(shù)被調用時,這些參數(shù)加上綁定函數(shù)本身的參數(shù)會按照順序作為原函數(shù)運行時的參數(shù).
該方法創(chuàng)建一個新函數(shù)，稱為綁定函數(shù)，綁定函數(shù)會以創(chuàng)建它時傳入bind方法的第一個參數(shù)作為this，傳入bind方法的第二個以及以后的參數(shù)加上綁定函數(shù)運行時本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調用原函數(shù).

顯然bind方法可以很好地解決上述問題。

$("#some-ele").click(person.hello.bind(person));
//相應元素被點擊時，輸出foocoder says hello world

其實該方法也很容易模擬，我們看下Prototype.js中bind方法的源碼：

Function.prototype.bind = function(){
 var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();
 return function(){
 return fn.apply(object,
  args.concat(Array.prototype.slice.call(arguments)));
 };
};

相信看完全文以后，this不再是坑～，大家都明白了嗎，欲了解更多請點擊腳本之家的網(wǎng)站學習。

最新評論