Javascript this指標

來源:互聯網
上載者:User

前言

Javascript是一門基於對象的動態語言,也就是說,所有東西都是對象,一個很典型的例子就是函數也被視為普通的對象。Javascript 可以通過一定的設計模式來實現物件導向的編程,其中this “指標”就是實現物件導向的一個很重要的特性。但是this也是Javascript中一個非常容易理解錯,進而用錯的特性。特別是對於接觸靜態語言比較久了的同志來說更是如此。

樣本說明

我們先來看一個最簡單的樣本:

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

這段代碼很簡單,我們定義了一個全域字串對象name和函數對象sayHi。運行會彈出一個打招呼的對話方塊,“你好,我的名字叫Kevin Yang”。

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

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

這段代碼和上段代碼的區別就在於sayHi函數在使用name的時候加上了this.首碼。運行結果和上面一摸一樣。這說明this.name引用的也還是全域的name對象。

開頭我們不是說了,函數也是普通的對象,可以將其當作一個普通變數使用。我們再把上面的代碼改一改:

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

這一次,我們又建立了一個全域對象person,並將sayHi函數對象賦給person對象的sayHello屬性。運行結果如下:

這一次打招呼的內容就有點無厘頭了,我們發現this.name已經變成undefined了。這說明,在sayHello函數內部執行時已經找不著this.name對象了。如果我們重新定義person對象,在其上面加上一個name屬性又會怎麼樣呢?

var person = {name:"Marry"};

運行代碼發現打招呼的“人”變了:

是不是看出點道道了呢?

判別this指標的指導性原則

在Javascript裡面,this指標代表的是執行當前代碼的對象的所有者。

在上面的樣本中我們可以看到,第一次,我們定義了一個全域函數對象sayHi並執行了這個函數,函數內部使用了this關鍵字,那麼執行this這行代碼的對象是sayHi(一切皆對象的體現),sayHi是被定義在全域範圍中。其實在Javascript中所謂的全域對象,無非是定義在 window這個根對象下的一個屬性而已。因此,sayHi的所有者是window對象。也就是說,在全域範圍下,你可以通過直接使用name去引用這個對象,你也可以通過window.name去引用同一個對象。因而this.name就可以翻譯為window.name了。

再來看第二個this的樣本。我們定義了一個person的對象,並定義了它的sayHello屬性,使其指向sayHi全域對象。那麼這個時候,當我們運行person.sayHello的時候,this所在的代碼所屬對象就是sayHello了(其實準確來說,sayHi和sayHello是只不過類似兩個指標,指向的對象實際上是同一個),而sayHello對象的所有者就是person了。第一次,person裡面沒有name屬性,因此彈出的對話方塊就是this.name引用的就是undefined對象(Javascript中所有只聲明而沒有定義的變數全都指向undefined對象);而第二次我們在定義person的時候加了name屬性了,那麼this.name指向的自然就是我們定義的字串了。

理解了上面所說的之後,我們將上面最後一段樣本改造成物件導向式的代碼。

<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>

在上面這段代碼中,我們定義了一個Person的“類”(實際上還是一個對象),然後在這個類的原型(類原型相當於C++中的靜態成員變數的概念)中定義了sayHello屬性,使其指向全域的sayHi對象。運行代碼我們可以看到,marry和kevin都成功的向我們打了聲“招呼”。

在這段代碼中有兩點需要思考的,一個是new我們很熟悉,但是在這裡new到底做了什麼操作呢?另外一個是,這裡執行sayHello的時候,this指標為什麼能夠正確的指向marry和kevin對象呢?

我們來把上面定義“類”和執行個體化類對象的操作重新“翻譯”一下:

<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>

當然這段代碼並不能正確執行,但是它可以協助你更好的理解這個過程。

當我們使用new關鍵字執行個體化一個“類”對象的時候,Javascript引擎會在這個對象內部定義一個新的對象並將其存入this指標。所有此對象內部用到this的代碼實際上都是指向這個新的對象。如this.name = name,實際上是將參數中的name對象賦值給了這個新建立的對象。函數對象執行完之後Javascript引擎會將此對象返回給你,於是就有 marry變數得到的對象的name為“Marry”,而kevin變數得到的對象的name屬性確實“Kevin”。

容易誤用的情況

理解了this指標後,我們再來看看一些很容易誤用this指標的情況。

樣本1——內聯式綁定Dom元素的事件處理函數

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

在此例代碼中,我們綁定了button的點擊事件,期望在彈出的對話方塊中列印出點擊元素的標籤名。但運行結果卻是:

也就是this指標並不是指向input元素。這是因為當使用內聯式綁定Dom元素的事件處理函數時,實際上相當於執行了以下代碼:

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

在這種情況下sayHi函數對象的所有權並沒有發生轉移,還是屬於window所有。用上面的指導原則一套我們就很好理解為什麼this.tagName是undefined了。

那麼如果我們要引用元素本身怎麼辦呢?

我們知道,onclick函數是屬於btnTest元素的,那麼在此函數內部,this指標正是指向此Dom對象,於是我們只需要把this作為參數傳入sayHi即可。

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

等價代碼如下:

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

樣本2——臨時變數導致的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>

我們在寫稍微有點規模的Js庫的時候,一般都會自己封裝一個Utility的類,然後將一些常用的函數作為Utility類的屬性,如用戶端經常會用到的getCookie函數和解碼函數。如果每個函數都是彼此獨立的,那麼還好辦,問題是,函數之間有時候會相互引用。例如上面的getCookie函數,會對從document.cookie中提取到的字串進行decode之後再返回。如果我們通過Utility.getCookie去調用的話,那麼沒有問題,我們知道,getCookie內部的this指標指向的還是Utility對象,而Utility對象時包含decode屬性的。代碼可以成功執行。

但是有個人不小心這樣使用Utility對象呢?

<script type="text/javascript">  function showUserIdentity(){    // 儲存getCookie函數到一個局部變數,因為下面會經常用到    var getCookie = Utility.getCookie;    alert(getCookie("identity"));  }  showUserIdentity();script>

這個時候運行代碼會拋出異常“this.decode is not a function”。運用上面我們講到的指導原則,很好理解,因為此時Utility.getCookie對象被賦給了臨時變數getCookie,而臨時變數是屬於window對象的——只不過外界不能直接引用,只對Javascript引擎可見——於是在getCookie函數內部的this指標指向的就是window對象了,而window對象沒有定義一個decode的函數對象,因此就會拋出這樣的異常來。

這個問題是由於引入了臨時變數導致的this指標的轉移。解決此問題的辦法有幾個:

  • 不引入臨時變數,每次使用均使用Utility.getCookie進行調用
  • getCookie函數內部使用Utility.decode顯式引用decode對象而不通過this指標隱式引用(如果Utility是一個執行個體化的對象,也即是通過new產生的,那麼此法不可用)
  • 使用Funtion.apply或者Function.call函數指定this指標

前面兩種都比較好理解,第三種需要提一下。正是因為this指標的指向很容易被轉移丟失,因此Javascript提供了兩個類似的函數apply和call來允許函數在調用時重新顯式的指定this指標。

修正代碼如下:

<script type="text/javascript">  function showUserIdentity(){    // 儲存getCookie函數到一個局部變數,因為下面會經常用到    var getCookie = Utility.getCookie;    alert(getCookie.call(Utility,"identity"));    alert(getCookie.apply(Utility,["identity"]));  }  showUserIdentity();script>

call和apply只有文法上的差異,沒有功能上的差別。

樣本3——函數傳參時導致的this指標丟失

我們先來看一段問題代碼:

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

這段代碼期望在訪客進入頁面5秒鐘之後向訪客打聲招呼。setTimeout函數接收一個函數作為參數,並在指定的觸發時刻執行這個函數。可是,當我們等了5秒鐘之後,彈出的對話方塊顯示的this.name卻是undefined。

其實這個問題和上一個樣本中的問題是類似的,都是因為臨時變數而導致的問題。當我們執行函數的時候,如果函數帶有參數,那麼這個時候Javascript引擎會建立一個臨時變數,並將傳入的參數複製(注意,Javascript裡面都是值傳遞的,沒有引用傳遞的概念)給此臨時變數。也就是說,整個過程就跟上面我們定義了一個getCookie的臨時變數,再將Utility.getCookie賦值給這個臨時變數一樣。只不過在這個樣本中,容易忽視臨時變數導致的bug。

函數對象傳參

對於函數作為參數傳遞導致的this指標丟失的問題,目前很多架構都已經有方法解決了。

Prototype的解決方案——傳參之前使用bind方法將函數封裝起來,並返回封裝後的對象

<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方法的實現其實是用到了Javascript又一個進階特性——閉包。我們來看一下原始碼:

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指標存入函數內部臨時變數,然後在返回的函數對象中引用此臨時變數從而形成閉包。

微軟的Ajax庫提供的方案——構建委派物件

<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>

其實本質上和prototype的方式是一樣的。

著名的Extjs庫的解決方案採用的手法和微軟是一樣的。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.