理解JavaScript中的this

genedna 發布于2019-08-22 10:42 / 2252人閱讀

摘要：別的文章一來就舉例子，我這里首先告訴大家一個結論指向的是調用函數的那個對象。這里依然是之前的例子中的俗稱箭頭函數，使用它來定義匿名函數，同樣可以解決的綁定問題這是由于函數體內的就是定義時所在的對象，而不是執行時所在的對象。

一、結論在前

javascript中的this是一個老生常談的話題，但不知道是之前那些作者沒講清楚還是我太笨沒能理解，始終沒能真正理解它，隨著自己在項目過程中的大量實踐，終于對this比較理解，這里作個總結，也與大家分享一下。

別的文章一來就舉例子，我這里首先告訴大家一個結論：

this指向的是調用函數的那個對象。

要是覺得理解了就可以不用看后面的文章了：）

二、經典栗子

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        return this.name
    }
};
alert(object.getName());

這是一個所有講this都會使用的簡單而又經典的例子，我們根據一開始的結論----this指向的是調用函數的那個對象，很容易就知道輸出結果是My Object，接下來我們將這個經典例子升級。

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        return function () {
            return this.name
        }

    }
};
alert(object.getName()());

請告訴我輸出結果是什么。

許多人會說還是My Object，那么你就進入陷阱了。其實這也是JS新手常有的誤區，他們總簡單地以為this指向this所在的對象，這是錯誤的！一定要牢記結論this指向的是調用函數的那個對象，這個重要的結論我終于說滿三遍。那么我們再來分析上面的代碼：

首先我們創建了一個全局變量name，為它賦值"The Window"；接下來我們創建了對象object，它有個屬性name，屬性值"My Object"，這個對象還包含一個方法getName()，而這個方法會返回一個匿名函數，而匿名函數又返回this.name。

邏輯理清后，我來告訴大家陷阱在哪：

匿名函數執行具有全局性，其this對象通常會指向window

說"通常"就是說有例外，在通過call()或apply()改變函數執行環境的情況下，this就會指向其他對象了，這些函數我之后會講到，這里不做展開。

ok，我們知道了這個陷阱，但這也只是個沒用的知識點，有用的是怎么解決這種尷尬的情況。雖然我之前說很多新手會犯總簡單地以為this指向this所在的對象這樣的錯誤，但是我們在實際開發中就是想讓this有這樣的效果，那么我們該怎么做呢？

三、this的綁定 1.var _this=this

這是最基礎的綁定this的方式，將this賦值給一個變量，這個變量可以取任何名字，我喜歡取名_this,有些人喜歡取名that，我們再回顧之前升級的例子：

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        var _this=this
        return function () {
            return _this.name
        }

    }
};
alert(object.getName()());

2.bind()

稍微高級點的方法是使用bind()函數，這是一個ECMAScript 5.1出來的擴展方法，與call()、apply()是"同期生"，他們的關系和差別之后我會專門談。這里依然是之前的例子：

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        return function () {
            return this.name
        }.bind(this)
    }
};
alert(object.getName()());

3.ES6中的()=>

()=>俗稱箭頭函數，使用它來定義匿名函數，同樣可以解決this的綁定問題

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        return ()=> {
            return this.name
        }
    }
};
alert(object.getName()());

這是由于()=>函數體內的this就是定義時所在的對象，而不是執行時所在的對象。

以上，想到再補充吧...

GPU云服務器云服務器 javaScript中的this js中的this js中的this機制 js中的this與html

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

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

理解 JavaScript this

摘要：回調函數在回調函數中的指向也會發生變化。在閉包回調函數賦值等場景下我們都可以利用來改變的指向，以達到我們的預期。文章參考系列文章理解閉包理解執行棧理解作用域理解數據類型與變量原文發布在我的公眾號，點擊查看。這是本系列的第 5 篇文章。還記得上一篇文章中的閉包嗎？點擊查看文章理解 JavaScript 閉包。在聊 this 之前，先來復習一下閉包： var name = Nei...

zombieda 2019-08-23 14:10 評論0 收藏0
理解 JavaScript 中的 this 關鍵字

摘要：原文許多人被中的關鍵字給困擾住了，我想混亂的根源來自人們理所當然地認為中的應該像中的或中的一樣工作。盡管有點難理解，但它的原理并不神秘。在瀏覽器中，全局對象是對象。運算符創建一個新對象并且設置函數中的指向調用函數的新對象。原文：Understanding the this keyword in JavaScript 許多人被JavaScript中的this關鍵字給困擾住了，我想混亂的...

jayzou 2019-08-21 10:32 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
我對JavaScript中this的一些理解

摘要：匿名函數的執行環境具有全局性，因此它的對象通常指向。如果對此有疑惑，可以看知乎上的答案知乎匿名函數的指向為什么是作為對象方法的調用，指向該對象當函數作為某個對象的方法調用時，就指這個函數所在的對象。因為日常工作中經常使用到this，而且在JavaScript中this的指向問題也很容易讓人混淆一部分知識。這段時間翻閱了一些書籍也查閱了網上一些資料然后結合自己的經驗，為了能讓自...

focusj 2019-08-23 15:23 評論0 收藏0
理解 JavaScript call()/apply()/bind()

摘要：理解文章中已經比較全面的分析了在中的指向問題，用一句話來總結就是的指向一定是在執行時決定的，指向被調用函數的對象。與和直接執行原函數不同的是，返回的是一個新函數。這個新函數包裹了原函數，并且綁定了的指向為傳入的。理解 JavaScript this 文章中已經比較全面的分析了 this 在 JavaScript 中的指向問題，用一句話來總結就是：this 的指向一定是在執行時決定的，...

duan199226 2019-08-23 14:27 評論0 收藏0