理解JavaScript中的this

genedna 發(fā)布于2019-08-22 10:42 / 2263人閱讀

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

一、結(jié)論在前

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

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

this指向的是調(diào)用函數(shù)的那個對象。

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

二、經(jīng)典栗子

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

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

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

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

請告訴我輸出結(jié)果是什么。

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

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

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

匿名函數(shù)執(zhí)行具有全局性，其this對象通常會指向window

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

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

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

這是最基礎(chǔ)的綁定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()函數(shù)，這是一個ECMAScript 5.1出來的擴展方法，與call()、apply()是"同期生"，他們的關(guān)系和差別之后我會專門談。這里依然是之前的例子：

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

3.ES6中的()=>

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

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

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

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