不要再問我this的指向問題了

nifhlheimr 發布于2019-08-22 18:25 / 2922人閱讀

摘要：所以構造函數里的指的就是將要被出來的新對象。希望看完這篇文章之后，再有人問指向的問題，你可以嘴角微微上揚，冷笑一聲不要再問我的指向問題了。

this的指向已經是一個老生常談的問題，每逢面試都要去復習復習，近來鞏固js的基礎，決心徹底掌握這個知識點，一勞永逸。說明一下，為了不影響大家的思考過程，下面的代碼都不會去注釋答案，想知道答案，只需要去控制臺執行一下。

四類場景逐一擊破

首先，分析this的指向共有四種類型，在分析之前，我們首先帶好兩個錦囊：
1.函數被調用時（即運行時）才會確定該函數內this的指向。因為在函數中this與arguments是兩個特殊的變量，在函數被調用時才會取得它們，而且搜索這兩個變量時只會在活動對象范圍里面去搜。（有關活動對象與變量對象的知識，請移步到js 中的活動對象與變量對象什么區別？）
2.要確定函數中this的指向，必須先找到該函數被調用的位置。

認準第一種“test()”形式

var a = 1
function test () {
    console.log(this.a)
}
test()

直接不帶任何引用形式去調用函數，則this會指向全局對象，因為沒有其他影響去改變this，this默認就是指向全局對象（瀏覽器是window，Node中是global）的。這個結論是在非嚴格模式的情況下，嚴格模式下這個this其實是undefined的。

認準第二種“xxx.test()”形式

var a = 1
function test () {
    console.log(this.a)
}
var obj = {
    a: 2,
    test
}
obj.test()

這種形式對比起第一種，很明顯test()已經是名花有主的了！看清楚，是誰呼喚的test()？沒錯，就是obj，所以this的指向就不言而喻了。一句話，誰去調用這個函數的，這個函數中的this就綁定到誰身上。

var a = 1
function test () {
    console.log(this.a)
}
var obj = {
    a: 2,
    test
}
var obj0 = {
    a: 3,
    obj 
}
obj0.obj.test()

即使是這種串串燒的形式，結果也是一樣的，test()中的this只對直屬上司（直接調用者obj）負責。再來看一個綜合點的例子：

var a = 1
function test () {
    console.log(this.a)
}
var obj = {
    a: 2,
    test
}
var testCopy = obj.test
testCopy()

嗯，聰明的你一定想到，換了個名字就能騙到我了??？雖然經過了一波改名換姓，但本質上還不是obj.test()嘛！結果一定和上面一樣！唔，請F12在控制臺試試，竟然……其實這里并不需要去思考什么，按照我們的套路，我們就認函數調時的樣子，有沒有看到最后調用的時候跟第一種情況一毛一樣？我再介紹一個場景大家一定不會覺得陌生：

var a = 1
function test () {
    console.log(this.a)
}
var obj = {
    a: 2,
    test
}
setTimeout(obj.test)

你可以意淫一下setTimeout的本質，是不是相當于有一個setTimeout函數，接收兩個參數：

function setTimeout (fn, time) {
    // 這里干了一大波不可描述的事情，最后會去調一下你傳進來的回調函數
    fn()
}

看到怎樣調用你傳進來的函數了嗎??？再想想我們第一種形式的標題認準第一種“test()”形式。

認準第三種“test.call(xxx) / test.apply(xxx) / test.bind()”形式

看了上面兩種形式之后，你可能會想，我非常討厭上面那些矯情的扭扭捏捏的九曲十八彎的調用方式，讓人毫無安全感，我要我自己指定this的指向，我要勝天半子！沒問題，我的代碼我做主：

var a = 1
function test () {
    console.log(this.a)
}
var obj = {
    a: 2,
    test
}
var testCopy = obj.test
testCopy.call(obj)

可以看到，我們通過call（apply跟call的區別只是傳參，作用是一樣的，bind有點區別，bind能讓我們的函數延遲執行，apply與call調用就執行，所以bind這樣的形式我們也稱為函數柯里化，這些就不是我們這里要說的啦）來調用testCopy，并且傳入了你想要this指向的上下文，那么this就會乖乖按照你的指示行事啦?？吹竭@里，我們也可以想象第一、二種形式其實可以轉化成call/apply的形式，有一篇比較棒的文章描述了這樣的思考過程，大家也可以看看this 的值到底是什么？一次說清楚

認準第四種“new test()”形式

終于到了最后一種形式了，這種形式比較好認，因為有標志性的new：

var a = 1
function test (a) {
    this.a = a
}
var b = new test(2)
console.log(b.a)

new這個操作符其實是new了一個新對象出來，而被new的test我們稱為構造函數，我們可以在這個構造函數里定義一下將要到來的新對象的一些屬性。那么在構造函數里，我們怎樣去描述這個還未出生的新對象呢？沒錯，就是用this。所以構造函數里的this指的就是將要被new出來的新對象。

One more thing

感謝大家看到這里，但還要說最后一種形式。等等，不是說好的只有四種形式嗎！稍安勿躁，正常套路下確實只有上面四種，但是有個東西別忘了，就是大家最喜歡的箭頭函數。

var a = 1
var test = () => {
    console.log(this.a)
}
var obj = {
    a: 2,
    test
}
obj.test()

來，往上翻一下我們的第一個錦囊，“函數被調用時（即運行時）才會確定該函數內this的指向。”現在函數這兩個字要加個詞修飾一下，變成普通函數（非箭頭函數）才能區別于箭頭函數。箭頭函數中的this在函數定義的時候就已經確定，它this指向的是它的外層作用域this的指向。

最后

我們最后還要說：“到此為止，真的沒有了?！?br>希望看完這篇文章之后，再有人問this指向的問題，你可以嘴角微微上揚，冷笑一聲：“不要再問我this的指向問題了。”
揚長而去。

云服務器 GPU云服務器 this的指向改變this指向阿里云的服務器登錄密碼是什么問題了 this的用法

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

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

不要再問我移動適配的問題了

摘要：不要再問我的問題系列一不要再問我的指向問題了二不要再問我跨域的問題了移動端適配的問題，一般來說我們都不會去深究，因為這種東西都是配置一次就再也不用管的了，接到設計圖就按照祖傳套路擼就完事了。不要再問我XX的問題系列：一、不要再問我this的指向問題了二、不要再問我跨域的問題了移動端適配的問題，一般來說我們都不會去深究，因為這種東西都是配置一次就再也不用管的了，接到設計圖就按照祖傳...

Airy 2019-08-30 15:55 評論0 收藏0
不要再問我移動適配的問題了

摘要：不要再問我的問題系列一不要再問我的指向問題了二不要再問我跨域的問題了移動端適配的問題，一般來說我們都不會去深究，因為這種東西都是配置一次就再也不用管的了，接到設計圖就按照祖傳套路擼就完事了。不要再問我XX的問題系列：一、不要再問我this的指向問題了二、不要再問我跨域的問題了移動端適配的問題，一般來說我們都不會去深究，因為這種東西都是配置一次就再也不用管的了，接到設計圖就按照祖傳...

caozhijian 2019-08-02 14:02 評論0 收藏0
不要再問我移動適配的問題了

摘要：不要再問我的問題系列一不要再問我的指向問題了二不要再問我跨域的問題了移動端適配的問題，一般來說我們都不會去深究，因為這種東西都是配置一次就再也不用管的了，接到設計圖就按照祖傳套路擼就完事了。不要再問我XX的問題系列：一、不要再問我this的指向問題了二、不要再問我跨域的問題了移動端適配的問題，一般來說我們都不會去深究，因為這種東西都是配置一次就再也不用管的了，接到設計圖就按照祖傳...

MRZYD 2019-08-23 14:32 評論0 收藏0
拜托！面試請不要再問我Spring Cloud底層原理！

摘要：不過大多數講解還停留在對功能使用的層面，其底層的很多原理，很多人可能并不知曉。每個線程池里的線程就僅僅用于請求那個服務。歡迎關注微信公眾號：石杉的架構筆記（id：shishan100）每日更新！精品技術文章準時送上！目錄一、業務場景介紹二、Spring Cloud核心組件：Eureka 三、Spring Cloud核心組件：Feign 四、Spring Cloud核心組件：R...

wums 2019-08-16 13:38 評論0 收藏0
拜托！面試請不要再問我Spring Cloud底層原理！

摘要：不過大多數講解還停留在對功能使用的層面，其底層的很多原理，很多人可能并不知曉。每個線程池里的線程就僅僅用于請求那個服務。歡迎關注微信公眾號：石杉的架構筆記（id：shishan100）每日更新！精品技術文章準時送上！目錄一、業務場景介紹二、Spring Cloud核心組件：Eureka 三、Spring Cloud核心組件：Feign 四、Spring Cloud核心組件：R...

wangjuntytl 2019-06-24 18:11 評論0 收藏0