JavaScript學習總結——this對象

wzyplus 發(fā)布于2019-08-19 18:06 / 1894人閱讀

摘要：全局環(huán)境在全局環(huán)境中使用，它會指向全局對象。作為構造函數(shù)調用中的構造函數(shù)很特殊，如果不使用調用，則和普通函數(shù)一樣。作為又一項約定俗成的準則，構造函數(shù)以大寫字母開頭，提醒調用者使用正確的方式調用。

在JavaScript中，this關鍵字是動態(tài)綁定的，或稱為運行期綁定，這極大地增強的我們程序的靈活性，同時也給初學者帶來了很多困惑。本文總結了this的幾個使用場景和常見誤區(qū)。

全局環(huán)境

在全局環(huán)境中使用this，它會指向全局對象。在web游覽器中，也就是window對象。

alert(this === window);    // true

函數(shù)調用

當作為普通函數(shù)被調用時，函數(shù)內(nèi)部的的this也會指向全局對象。

var name = "window";

function sayName(){
    var name = "fun";
    alert(this.name);
}

sayName();    // "window"

作為對象的方法調用

當作為對象內(nèi)部的方法被調用時，這里this指向這個方法所在的對象。

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    alert(this.name);
  }
};

obj.sayName();    // "obj"

作為構造函數(shù)調用

JavaScript 中的構造函數(shù)很特殊，如果不使用 new 調用，則和普通函數(shù)一樣。作為又一項約定俗成的準則，構造函數(shù)以大寫字母開頭，提醒調用者使用正確的方式調用。如果調用正確，this 綁定到新創(chuàng)建的對象上。

function Person(name){
    this.name = name,
    this.sayName = function(){
        alert(this.name);
    }
}

var person1 = new Person("daoko");
person1.sayName();    // "darko"

apply和call調用

apply和call是函數(shù)對象的的兩個方法，它們可以修改函數(shù)執(zhí)行的上下文環(huán)境，即this綁定的對象。apply和call的第一個參數(shù)就是this綁定的對象，若apply和call的參數(shù)為空，則默認調用全局對象。

var name = "window"

var obj = {
  name: "object"
}

function sayName(){
  alert(this.name);
}

sayName();    // 直接調用函數(shù)sayName
sayName.call(obj);    // 用call方法修改this的指向
sayName.call();    // 當call方法的參數(shù)為空時，默認調用全局對象

特殊情況 常見錯誤

我們首先來看這樣一個栗子：

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    var test = function(){
      alert(this.name);    // this綁定到全局對象上
    }
    test();
  }
}

obj.sayName();    // "window"

是不是和上面說的作為對象的方法調用情況很像，按照我們的理解此時的this應該指向obj對象，但是實際情況不是這樣的，此時的this指向全局對象。

這屬于 JavaScript 的設計缺陷，正確的設計方式是內(nèi)部函數(shù)的 this 應該綁定到其外層函數(shù)對應的對象上，為了規(guī)避這一缺陷，我們可以使用變量替代的方法，約定俗成，該變量一般被命名為 that。在這個栗子中，這樣我們創(chuàng)建了一個局部變量that來指向obj對象。

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    var that = this;    // that指向對象obj
    var test = function(){
      alert(that.name);
    }
    test();
  }
}

obj.sayName();    // "obj"

方法的賦值表達式

當我們把一個對象的方法賦值給一個變量時，它的this會發(fā)生什么變化呢? 看個栗子:

var name = "window";

var obj = {
  name: "obj",
  sayName: function(){
    alert(this.name);
  }
}

var test = obj.sayName;
obj.sayName();    // "obj"
test();    // "window"

從上面這個栗子中我們可以看到，當把對象obj的方法賦值給一個新的變量test時，它的this指向發(fā)生了變化，test就向一個普通的函數(shù)一樣被調用，此時指向全局對象。

云服務器 GPU云服務器 javascript學習總結對象名this javascript的this javaScript中的this

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79205.html

Javascript this 的一些學習總結02【轉自cnblogs的JKhuang】

摘要：發(fā)生這種情況的條件是當引用類型值的對象恰好為活躍對象。總結本文介紹中的使用，更重要的是幫助我們能更好地理解值在全局函數(shù)構造函數(shù)以及一些特例的情況中值的變化。然而，由于對于來說沒有任何意義，因此會隱式轉換為全局對象。接上一篇Javascript this 的一些學習總結02【轉自cnblogs的JKhuang】引用類型以及this的null值對于前面提及的情形，還有例外的情況，當調...

suemi 2019-08-21 15:06 評論0 收藏0
javascript this的學習總結

摘要：例如通過，調用時強制把它的綁定到上。箭頭函數(shù)問題箭頭函數(shù)體內(nèi)的對象就是定義時所在的對象，而不是使用時所在的對象，固定不變。剛入門javascript，關于this的學習，花了自己挺多的時間，做了比較多的功課，看了一篇又一篇的文章，也看了一些書籍，今天就結合看的那些東西總結下自己所學到的東西，方便留著以后回看，進一步的學習，這篇文章會不斷的更新，不斷的更新自己的想法，現(xiàn)在還是一個入門不...

A Loity 2019-08-21 17:32 評論0 收藏0
Javascript Context和Scope的學習總結02【轉自cnblogs的JKhuang】

摘要：總結本博文通過介紹執(zhí)行上下文和作用域的異同的使用以及變量對象，讓我們加深對語言特性的理解。首先，我們介紹了執(zhí)行上下文和的的關系，并且執(zhí)行上下文是具有對象的然后，介紹了作用域使變量在作用域范圍內(nèi)可見，并且作用域是基于函數(shù)的。接上一篇Javascript Context和Scope的學習總結01【轉自cnblogs的JKhuang】（可能是segmentfault對單篇文章發(fā)布字數(shù)有限制...

Aldous 2019-08-21 15:05 評論0 收藏0
Javascript Context和Scope的學習總結01【轉自cnblogs的JKhuang】

摘要：正文執(zhí)行環(huán)境也稱為環(huán)境是中最為重要的一個概念。執(zhí)行環(huán)境定義了變量或函數(shù)有權訪問的其他數(shù)據(jù)，決定了它們各自的行為。簡而言之，執(zhí)行環(huán)境是基于對象的，而作用域是基于函數(shù)的。前述在我們學習Javascript過程中，常常會遇到作用域（Scope）和執(zhí)行上下文（Context）等概念。其中，執(zhí)行上下文與this關鍵字的關系密切。有面向對象編程經(jīng)驗的各位，對于this關鍵字再熟悉不過了，因此...

April 2019-08-21 15:06 評論0 收藏0
JavaScript學習總結（九）事件詳解

摘要：布爾值表示捕獲階段調用事件處理程序，表示冒泡階段通過對象的方法，也可以定義事件的回調函數(shù)。對象會被作為第一個參數(shù)傳遞給事件監(jiān)聽的回調函數(shù)。布爾默認值是，當設置成時用以取消事件的默認行為與中的相同。其實這篇文章挺早之前就寫了，但是由于sf保存方面的bug，所以當時寫了一大堆，結果沒保存，覺得這個沒寫完是個不小的遺憾，今天正好有空，就給補充下了，也正好給我的javascript學習總結做...

LiveVideoStack 2019-08-21 10:21 評論0 收藏0