前言

Javascript是一門基于對(duì)象的動(dòng)態(tài)語(yǔ)言，也就是說(shuō)，所有東西都是對(duì)象，一個(gè)很典型的例子就是函數(shù)也被視為普通的對(duì)象。Javascript 可以通過(guò)一定的設(shè)計(jì)模式來(lái)實(shí)現(xiàn)面向?qū)ο蟮木幊?，其中this “指針”就是實(shí)現(xiàn)面向?qū)ο蟮囊粋€(gè)很重要的特性。但是this也是Javascript中一個(gè)非常容易理解錯(cuò)，進(jìn)而用錯(cuò)的特性。特別是對(duì)于接觸靜態(tài)語(yǔ)言比較久了的同志來(lái)說(shuō)更是如此。

示例說(shuō)明

我們先來(lái)看一個(gè)最簡(jiǎn)單的示例：

<script type="text/javascript">
  var name = "Kevin Yang";
  function sayHi(){
    alert("你好，我的名字叫" + name);
  }
  sayHi();
script>

這段代碼很簡(jiǎn)單，我們定義了一個(gè)全局字符串對(duì)象name和函數(shù)對(duì)象sayHi。運(yùn)行會(huì)彈出一個(gè)打招呼的對(duì)話框，“你好，我的名字叫Kevin Yang”。

我們把這段代碼稍微改一改：

<script type="text/javascript">
  var name = "Kevin Yang";
  function sayHi(){
    alert("你好，我的名字叫" + this.name);
  }
  sayHi();
script>

這段代碼和上段代碼的區(qū)別就在于sayHi函數(shù)在使用name的時(shí)候加上了this.前綴。運(yùn)行結(jié)果和上面一摸一樣。這說(shuō)明this.name引用的也還是全局的name對(duì)象。

開(kāi)頭我們不是說(shuō)了，函數(shù)也是普通的對(duì)象，可以將其當(dāng)作一個(gè)普通變量使用。我們?cè)侔焉厦娴拇a改一改：

<script type="text/javascript">
  var name = "Kevin Yang";
  function sayHi(){
    alert("你好，我的名字叫" + this.name);
  }
  var person = {};
  person.sayHello = sayHi;
  person.sayHello();
script>

這一次，我們又創(chuàng)建了一個(gè)全局對(duì)象person，并將sayHi函數(shù)對(duì)象賦給person對(duì)象的sayHello屬性。運(yùn)行結(jié)果如下：

這一次打招呼的內(nèi)容就有點(diǎn)無(wú)厘頭了，我們發(fā)現(xiàn)this.name已經(jīng)變成undefined了。這說(shuō)明，在sayHello函數(shù)內(nèi)部執(zhí)行時(shí)已經(jīng)找不著this.name對(duì)象了。如果我們重新定義person對(duì)象，在其上面加上一個(gè)name屬性又會(huì)怎么樣呢？

var person = {name:"Marry"};

運(yùn)行代碼發(fā)現(xiàn)打招呼的“人”變了：

是不是看出點(diǎn)道道了呢？

判別this指針的指導(dǎo)性原則

在Javascript里面，this指針代表的是執(zhí)行當(dāng)前代碼的對(duì)象的所有者。

在上面的示例中我們可以看到，第一次，我們定義了一個(gè)全局函數(shù)對(duì)象sayHi并執(zhí)行了這個(gè)函數(shù)，函數(shù)內(nèi)部使用了this關(guān)鍵字，那么執(zhí)行this這行代碼的對(duì)象是sayHi（一切皆對(duì)象的體現(xiàn)），sayHi是被定義在全局作用域中。其實(shí)在Javascript中所謂的全局對(duì)象，無(wú)非是定義在 window這個(gè)根對(duì)象下的一個(gè)屬性而已。因此，sayHi的所有者是window對(duì)象。也就是說(shuō)，在全局作用域下，你可以通過(guò)直接使用name去引用這個(gè)對(duì)象，你也可以通過(guò)window.name去引用同一個(gè)對(duì)象。因而this.name就可以翻譯為window.name了。

再來(lái)看第二個(gè)this的示例。我們定義了一個(gè)person的對(duì)象，并定義了它的sayHello屬性，使其指向sayHi全局對(duì)象。那么這個(gè)時(shí)候，當(dāng)我們運(yùn)行person.sayHello的時(shí)候，this所在的代碼所屬對(duì)象就是sayHello了（其實(shí)準(zhǔn)確來(lái)說(shuō)，sayHi和sayHello是只不過(guò)類似兩個(gè)指針，指向的對(duì)象實(shí)際上是同一個(gè)），而sayHello對(duì)象的所有者就是person了。第一次，person里面沒(méi)有name屬性，因此彈出的對(duì)話框就是this.name引用的就是undefined對(duì)象（Javascript中所有只聲明而沒(méi)有定義的變量全都指向undefined對(duì)象）；而第二次我們?cè)诙xperson的時(shí)候加了name屬性了，那么this.name指向的自然就是我們定義的字符串了。

理解了上面所說(shuō)的之后，我們將上面最后一段示例改造成面向?qū)ο笫降拇a。

<script type="text/javascript">
  var name = "Kevin Yang";
  function sayHi(){
    alert("你好，我的名字叫" + this.name);
  }
  function Person(name){
    this.name = name;
  }
  Person.prototype.sayHello = sayHi;
  var marry = new Person("Marry");  
  marry.sayHello();
  var kevin = new Person("Kevin");
  kevin.sayHello();
script>

在上面這段代碼中，我們定義了一個(gè)Person的“類”（實(shí)際上還是一個(gè)對(duì)象），然后在這個(gè)類的原型（類原型相當(dāng)于C++中的靜態(tài)成員變量的概念）中定義了sayHello屬性，使其指向全局的sayHi對(duì)象。運(yùn)行代碼我們可以看到，marry和kevin都成功的向我們打了聲“招呼”。

在這段代碼中有兩點(diǎn)需要思考的，一個(gè)是new我們很熟悉，但是在這里new到底做了什么操作呢？另外一個(gè)是，這里執(zhí)行sayHello的時(shí)候，this指針為什么能夠正確的指向marry和kevin對(duì)象呢？

我們來(lái)把上面定義“類”和實(shí)例化類對(duì)象的操作重新“翻譯”一下：

<script type="text/javascript">
  var name = "Kevin Yang";
  function sayHi(){
    alert("你好，我的名字叫" + this.name);
  }
  function Person(name){
    var this;
    this.name = name;
    return this;
  }
  Person.prototype.sayHello = sayHi;
  var marry = Person("Marry");  
  marry.sayHello();
  var kevin = Person("Kevin");
  kevin.sayHello();
script>

當(dāng)然這段代碼并不能正確執(zhí)行，但是它可以幫助你更好的理解這個(gè)過(guò)程。

當(dāng)我們使用new關(guān)鍵字實(shí)例化一個(gè)“類”對(duì)象的時(shí)候，Javascript引擎會(huì)在這個(gè)對(duì)象內(nèi)部定義一個(gè)新的對(duì)象并將其存入this指針。所有此對(duì)象內(nèi)部用到this的代碼實(shí)際上都是指向這個(gè)新的對(duì)象。如this.name = name，實(shí)際上是將參數(shù)中的name對(duì)象賦值給了這個(gè)新創(chuàng)建的對(duì)象。函數(shù)對(duì)象執(zhí)行完之后Javascript引擎會(huì)將此對(duì)象返回給你，于是就有 marry變量得到的對(duì)象的name為“Marry”，而kevin變量得到的對(duì)象的name屬性確實(shí)“Kevin”。

容易誤用的情況

理解了this指針后，我們?cè)賮?lái)看看一些很容易誤用this指針的情況。

示例1——內(nèi)聯(lián)式綁定Dom元素的事件處理函數(shù)

<script type="text/javascript">
  function sayHi(){
    alert("當(dāng)前點(diǎn)擊的元素是" + this.tagName);
  }  
script>
<input id="btnTest" type="button" value="點(diǎn)擊我" onclick="sayHi()">

在此例代碼中，我們綁定了button的點(diǎn)擊事件，期望在彈出的對(duì)話框中打印出點(diǎn)擊元素的標(biāo)簽名。但運(yùn)行結(jié)果卻是：

也就是this指針并不是指向input元素。這是因?yàn)楫?dāng)使用內(nèi)聯(lián)式綁定Dom元素的事件處理函數(shù)時(shí)，實(shí)際上相當(dāng)于執(zhí)行了以下代碼：

<script type="text/javascript">  
  document.getElementById("btnTest").onclick = function(){
    sayHi();
  }
script>

在這種情況下sayHi函數(shù)對(duì)象的所有權(quán)并沒(méi)有發(fā)生轉(zhuǎn)移，還是屬于window所有。用上面的指導(dǎo)原則一套我們就很好理解為什么this.tagName是undefined了。

那么如果我們要引用元素本身怎么辦呢？

我們知道，onclick函數(shù)是屬于btnTest元素的，那么在此函數(shù)內(nèi)部，this指針正是指向此Dom對(duì)象，于是我們只需要把this作為參數(shù)傳入sayHi即可。

<script type="text/javascript">
  function sayHi(el){
    alert("當(dāng)前點(diǎn)擊的元素是" + el.tagName);
  }
script>
<input id="btnTest" type="button" value="點(diǎn)擊我" onclick="sayHi(this)">

等價(jià)代碼如下：

<script type="text/javascript"> 
  document.getElementById("btnTest").onclick = function(){
    sayHi(this);
  }
script>

示例2——臨時(shí)變量導(dǎo)致的this指針丟失

<script type="text/javascript">
  var Utility = {
    decode:function(str){
      return unescape(str);
    },
    getCookie:function(key){
      // ... 省略提取cookie字符串的代碼
      var value = "i%27m%20a%20cookie";
      return this.decode(value);
    }
  };
  alert(Utility.getCookie("identity"))
script>

我們?cè)趯?xiě)稍微有點(diǎn)規(guī)模的Js庫(kù)的時(shí)候，一般都會(huì)自己封裝一個(gè)Utility的類，然后將一些常用的函數(shù)作為Utility類的屬性，如客戶端經(jīng)常會(huì)用到的getCookie函數(shù)和解碼函數(shù)。如果每個(gè)函數(shù)都是彼此獨(dú)立的，那么還好辦，問(wèn)題是，函數(shù)之間有時(shí)候會(huì)相互引用。例如上面的getCookie函數(shù)，會(huì)對(duì)從document.cookie中提取到的字符串進(jìn)行decode之后再返回。如果我們通過(guò)Utility.getCookie去調(diào)用的話，那么沒(méi)有問(wèn)題，我們知道，getCookie內(nèi)部的this指針指向的還是Utility對(duì)象，而Utility對(duì)象時(shí)包含decode屬性的。代碼可以成功執(zhí)行。

但是有個(gè)人不小心這樣使用Utility對(duì)象呢？

<script type="text/javascript">
  function showUserIdentity(){
    // 保存getCookie函數(shù)到一個(gè)局部變量，因?yàn)橄旅鏁?huì)經(jīng)常用到
    var getCookie = Utility.getCookie;
    alert(getCookie("identity"));
  }
  showUserIdentity();
script>

這個(gè)時(shí)候運(yùn)行代碼會(huì)拋出異?！皌his.decode is not a function”。運(yùn)用上面我們講到的指導(dǎo)原則，很好理解，因?yàn)榇藭r(shí)Utility.getCookie對(duì)象被賦給了臨時(shí)變量getCookie，而臨時(shí)變量是屬于window對(duì)象的——只不過(guò)外界不能直接引用，只對(duì)Javascript引擎可見(jiàn)——于是在getCookie函數(shù)內(nèi)部的this指針指向的就是window對(duì)象了，而window對(duì)象沒(méi)有定義一個(gè)decode的函數(shù)對(duì)象，因此就會(huì)拋出這樣的異常來(lái)。

這個(gè)問(wèn)題是由于引入了臨時(shí)變量導(dǎo)致的this指針的轉(zhuǎn)移。解決此問(wèn)題的辦法有幾個(gè)：

• 不引入臨時(shí)變量，每次使用均使用Utility.getCookie進(jìn)行調(diào)用
• getCookie函數(shù)內(nèi)部使用Utility.decode顯式引用decode對(duì)象而不通過(guò)this指針隱式引用（如果Utility是一個(gè)實(shí)例化的對(duì)象，也即是通過(guò)new生成的，那么此法不可用）
• 使用Funtion.apply或者Function.call函數(shù)指定this指針

前面兩種都比較好理解，第三種需要提一下。正是因?yàn)閠his指針的指向很容易被轉(zhuǎn)移丟失，因此Javascript提供了兩個(gè)類似的函數(shù)apply和call來(lái)允許函數(shù)在調(diào)用時(shí)重新顯式的指定this指針。

修正代碼如下：

<script type="text/javascript">
  function showUserIdentity(){
    // 保存getCookie函數(shù)到一個(gè)局部變量，因?yàn)橄旅鏁?huì)經(jīng)常用到
    var getCookie = Utility.getCookie;
    alert(getCookie.call(Utility,"identity"));
    alert(getCookie.apply(Utility,["identity"]));
  }
  showUserIdentity();
script>

call和apply只有語(yǔ)法上的差異，沒(méi)有功能上的差別。

示例3——函數(shù)傳參時(shí)導(dǎo)致的this指針丟失

我們先來(lái)看一段問(wèn)題代碼：

<script type="text/javascript">
  var person = {
    name:"Kevin Yang",
    sayHi:function(){
      alert("你好，我是"+this.name);
    }
  }
  setTimeout(person.sayHi,5000);
script>

這段代碼期望在訪客進(jìn)入頁(yè)面5秒鐘之后向訪客打聲招呼。setTimeout函數(shù)接收一個(gè)函數(shù)作為參數(shù)，并在指定的觸發(fā)時(shí)刻執(zhí)行這個(gè)函數(shù)?？墒?，當(dāng)我們等了5秒鐘之后，彈出的對(duì)話框顯示的this.name卻是undefined。

其實(shí)這個(gè)問(wèn)題和上一個(gè)示例中的問(wèn)題是類似的，都是因?yàn)榕R時(shí)變量而導(dǎo)致的問(wèn)題。當(dāng)我們執(zhí)行函數(shù)的時(shí)候，如果函數(shù)帶有參數(shù)，那么這個(gè)時(shí)候Javascript引擎會(huì)創(chuàng)建一個(gè)臨時(shí)變量，并將傳入的參數(shù)復(fù)制（注意，Javascript里面都是值傳遞的，沒(méi)有引用傳遞的概念）給此臨時(shí)變量。也就是說(shuō)，整個(gè)過(guò)程就跟上面我們定義了一個(gè)getCookie的臨時(shí)變量，再將Utility.getCookie賦值給這個(gè)臨時(shí)變量一樣。只不過(guò)在這個(gè)示例中，容易忽視臨時(shí)變量導(dǎo)致的bug。

函數(shù)對(duì)象傳參

對(duì)于函數(shù)作為參數(shù)傳遞導(dǎo)致的this指針丟失的問(wèn)題，目前很多框架都已經(jīng)有方法解決了。

Prototype的解決方案——傳參之前使用bind方法將函數(shù)封裝起來(lái)，并返回封裝后的對(duì)象

<script type="text/javascript">
  var person = {
    name:"Kevin Yang",
    sayHi:function(){
      alert("你好，我是"+this.name);
    }
  }
  var boundFunc = person.sayHi.bind(person,person.sayHi);
  setTimeout(boundFunc,5000);
script>

bind方法的實(shí)現(xiàn)其實(shí)是用到了Javascript又一個(gè)高級(jí)特性——閉包。我們來(lái)看一下源代碼：

function bind(){
  if (arguments.length < 2 && arguments[0] === undefined) 
    return this;
  var __method = this, args = $A(arguments), object = args.shift();
  return function(){
    return __method.apply(object, args.concat($A(arguments)));
  }
}

首先將this指針存入函數(shù)內(nèi)部臨時(shí)變量，然后在返回的函數(shù)對(duì)象中引用此臨時(shí)變量從而形成閉包。

微軟的Ajax庫(kù)提供的方案——構(gòu)建委托對(duì)象

<script type="text/javascript">
  var person = {
    name:"Kevin Yang",
    sayHi:function(){
      alert("你好，我是"+this.name);
    }
  }  
  var boundFunc = Function.createDelegate(person,person.sayHi);
  setTimeout(boundFunc,5000);
script>

其實(shí)本質(zhì)上和prototype的方式是一樣的。

著名的Extjs庫(kù)的解決方案采用的手法和微軟是一樣的。

最新評(píng)論