欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript this指針

 更新時間:2009年07月30日 18:19:25   作者:  
Javascript是一門基于對象的動態(tài)語言,也就是說,所有東西都是對象,一個很典型的例子就是函數(shù)也被視為普通的對象。

前言

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

示例說明

我們先來看一個最簡單的示例:

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

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

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

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

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

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

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

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

image

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

var person = {name:"Marry"};

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

image

是不是看出點道道了呢?

判別this指針的指導性原則

在Javascript里面,this指針代表的是執(zhí)行當前代碼的對象的所有者。

在上面的示例中我們可以看到,第一次,我們定義了一個全局函數(shù)對象sayHi并執(zhí)行了這個函數(shù),函數(shù)內(nèi)部使用了this關(guān)鍵字,那么執(zhí)行this這行代碼的對象是sayHi(一切皆對象的體現(xiàn)),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指向的自然就是我們定義的字符串了。

理解了上面所說的之后,我們將上面最后一段示例改造成面向?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>

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

在這段代碼中有兩點需要思考的,一個是new我們很熟悉,但是在這里new到底做了什么操作呢?另外一個是,這里執(zhí)行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>

當然這段代碼并不能正確執(zhí)行,但是它可以幫助你更好的理解這個過程。

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

容易誤用的情況

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

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

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

在此例代碼中,我們綁定了button的點擊事件,期望在彈出的對話框中打印出點擊元素的標簽名。但運行結(jié)果卻是:

image

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

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

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

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

我們知道,onclick函數(shù)是屬于btnTest元素的,那么在此函數(shù)內(nèi)部,this指針正是指向此Dom對象,于是我們只需要把this作為參數(shù)傳入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>

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

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

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

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

這個問題是由于引入了臨時變量導致的this指針的轉(zhuǎn)移。解決此問題的辦法有幾個:

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

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

修正代碼如下:

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

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

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

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

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

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

其實這個問題和上一個示例中的問題是類似的,都是因為臨時變量而導致的問題。當我們執(zhí)行函數(shù)的時候,如果函數(shù)帶有參數(shù),那么這個時候Javascript引擎會創(chuàng)建一個臨時變量,并將傳入的參數(shù)復制(注意,Javascript里面都是值傳遞的,沒有引用傳遞的概念)給此臨時變量。也就是說,整個過程就跟上面我們定義了一個getCookie的臨時變量,再將Utility.getCookie賦值給這個臨時變量一樣。只不過在這個示例中,容易忽視臨時變量導致的bug。

函數(shù)對象傳參

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

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

<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方法的實現(xiàn)其實是用到了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指針存入函數(shù)內(nèi)部臨時變量,然后在返回的函數(shù)對象中引用此臨時變量從而形成閉包。

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

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

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

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

相關(guān)文章

  • 兩個JavaScript中的特殊值null和undefined詳解

    兩個JavaScript中的特殊值null和undefined詳解

    Null和Undefined是JavaScript中非常基礎和重要的概念,理解它們的含義、特點和使用方式對于避免出現(xiàn)錯誤和編寫健壯的應用程序非常重要,這篇文章主要介紹了兩個JavaScript中的特殊值null和undefined詳解,需要的朋友可以參考下
    2023-06-06
  • 微信小程序之頁面攔截器的示例代碼

    微信小程序之頁面攔截器的示例代碼

    本篇文章主要介紹了微信小程序之頁面攔截器的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • 微信小程序加載更多 點擊查看更多

    微信小程序加載更多 點擊查看更多

    這篇文章主要為大家詳細介紹了微信小程序加載更多,點擊查看更多功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • JS?加載性能Tree?Shaking優(yōu)化詳解

    JS?加載性能Tree?Shaking優(yōu)化詳解

    這篇文章主要為大家介紹了JS?加載性能Tree?Shaking優(yōu)化詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • es6學習筆記之Async函數(shù)的使用示例

    es6學習筆記之Async函數(shù)的使用示例

    async 函數(shù),使得異步操作變得更加方便。它是 Generator 函數(shù)的語法糖。下面這篇文章主要給大家介紹了es6學習筆記之Async函數(shù)使用的相關(guān)資料,文中給出了詳細的示例代碼,需要的朋友們下面來一起看看吧。
    2017-05-05
  • Json對象和字符串互相轉(zhuǎn)換json數(shù)據(jù)拼接和JSON使用方式詳細介紹(小結(jié))

    Json對象和字符串互相轉(zhuǎn)換json數(shù)據(jù)拼接和JSON使用方式詳細介紹(小結(jié))

    JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式.這篇文章主要介紹了Json對象和字符串互相轉(zhuǎn)換json數(shù)據(jù)拼接和JSON使用方式詳細介紹(小結(jié))的相關(guān)資料,需要的朋友可以參考下
    2016-10-10
  • jscript之Read an Excel Spreadsheet

    jscript之Read an Excel Spreadsheet

    jscript之Read an Excel Spreadsheet...
    2007-06-06
  • Bootstrap 3 進度條的實現(xiàn)

    Bootstrap 3 進度條的實現(xiàn)

    這篇文章主要介紹了Bootstrap 3 進度條的實現(xiàn),非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-02-02
  • Bootstrap3 input輸入框插入glyphicon圖標的方法

    Bootstrap3 input輸入框插入glyphicon圖標的方法

    這篇文章主要介紹了Bootstrap3 input輸入框插入glyphicon圖標的方法的相關(guān)資料,需要的朋友可以參考下
    2016-05-05
  • 對JavaScript中this指針的新理解分享

    對JavaScript中this指針的新理解分享

    這篇文章主要介紹了對JavaScript中this指針的新理解分享,本文講解了方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造函數(shù)調(diào)用模式、Apply調(diào)用模式中的this指針理解,需要的朋友可以參考下
    2015-01-01

最新評論