JavaScript學習總結——this對象

wzyplus 發布于2019-08-19 18:06 / 1899人閱讀

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

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

全局環境

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

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

函數調用

當作為普通函數被調用時，函數內部的的this也會指向全局對象。

var name = "window";

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

sayName();    // "window"

作為對象的方法調用

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

var name = "window";

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

obj.sayName();    // "obj"

作為構造函數調用

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

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

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

apply和call調用

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

var name = "window"

var obj = {
  name: "object"
}

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

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

特殊情況 常見錯誤

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

var name = "window";

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

obj.sayName();    // "window"

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

這屬于 JavaScript 的設計缺陷，正確的設計方式是內部函數的 this 應該綁定到其外層函數對應的對象上，為了規避這一缺陷，我們可以使用變量替代的方法，約定俗成，該變量一般被命名為 that。在這個栗子中，這樣我們創建了一個局部變量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會發生什么變化呢? 看個栗子:

var name = "window";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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