同事因為this指向的問題卡住的bug，vue2的this指向問題，使用了箭頭函數(shù)，導(dǎo)致拿不到對應(yīng)的props 。當我給他介紹的時候他竟然不知道，隨後也刻意的看了一下前端交流群，至今最起碼還有70%以上的前端程式設(shè)計師搞不明白，今天給大家分享一下this指向，如果啥都沒學(xué)會，請給我一個大嘴巴子。

1. 呼叫位置

• 作用域跟在哪裡定義有關(guān)，與在哪裡執(zhí)行無關(guān)
• ##this指向跟在哪裡定義無關(guān)，跟如何調(diào)用，透過什麼樣的形式調(diào)用有關(guān)
• this#(這個) 這個函數(shù)如何被調(diào)用(方便記憶)
#為了方便理解，預(yù)設(shè)不開啟嚴格模式

2. 綁定規(guī)則

??上面我們介紹了，

this的指向主要跟透過什麼樣的形式呼叫有關(guān)。接下來我就跟大家介紹一下調(diào)用規(guī)則，沒有規(guī)矩不成方圓，大家把這幾種調(diào)用規(guī)則牢記於心就行了，沒有什麼難的地方。

你必須找到呼叫位置，然後判斷是下面四種的哪一種綁定規(guī)則
• #其次你要也要曉得，這四種綁定規(guī)則的優(yōu)先順序
• 這兩點你都知道了知道this的指向?qū)赌銇碚f易如反掌

#2.1 預(yù)設(shè)綁定

?? 函數(shù)最常用的呼叫方式，呼叫函數(shù)的類型：獨立函數(shù)呼叫

function?bar()?{
??console.log(this)?//?window
}

bar是不帶任何修飾符的直接呼叫所以為預(yù)設(shè)綁定為
• window
在嚴格模式下這裡的
• this為undefined

#2.2 隱式綁定

??用最通俗的話表示就是：物件擁有某個方法，透過這個物件存取方法且直接呼叫（註:箭頭函數(shù)特殊，下面會講解）

const?info?=?{
??fullName:?'ice',
??getName:?function()?{
????console.log(this.fullName)
??}
}

info.getName()?//?'ice'

這個函數(shù)被
• info發(fā)起調(diào)用，進行了隱式綁定，所以當前的this為info，透過this.fullName毫無疑問的就訪問值為 ice

隱含丟失普通

??有些情況下會進行隱式丟失，被隱式綁定的函數(shù)會丟失綁定對象，也就是說它為變成預(yù)設(shè)綁定，預(yù)設(shè)綁定的

this值，為window還是undefined取決於您目前所處的環(huán)境，是否為嚴格模式。

const?info?=?{
??fullName:?'ice',
??getName:?function()?{
????console.log(this.fullName)
??}
}

const?fn?=?info.getName

fn()?//undefined

??這種情況下就進行了隱式丟失，丟失了綁定的對象，為什麼會產(chǎn)生這樣的問題呢？如果熟悉記憶體的小夥伴，就會很容易理解。

這裡並沒有直接調(diào)用，而是透過
• info找到了對應(yīng)getName的記憶體位址，賦值給變數(shù)fn
#然後透過
• fn 直接進行了呼叫
其實這裡的本質(zhì)就是獨立函數(shù)呼叫也就是為
• window，從window中取出fullName屬性，必定為undefined

#隱含遺失進階這裡大家首先要理解什麼是回調(diào)函數(shù)。其實可以這樣理解，就是我現(xiàn)在不呼叫它，把他透過參數(shù)的形式傳入到其他地方，在別的地方呼叫它。

//申明變量關(guān)鍵字必須為var
var?fullName?=?'panpan'

const?info?=?{
??fullName:?'ice',
??getName:?function()?{
????console.log(this.fullName)
??}
}

function?bar(fn)?{
??//fn?=?info.getName
??fn()?//?panpan
}

bar(info.getName)

首先
• bar中的fn為一個回呼函數(shù)
• fn = info.getName 參數(shù)傳遞就是一種隱式賦值，其實跟上面的隱式遺失是一個意思，他們都是指向的fn = info.getName引用，也就是它們的記憶體位址
因為他們的
• this遺失，也就是函數(shù)獨立調(diào)用，預(yù)設(shè)綁定規(guī)則，this為全域的window物件##注意: 為什麼申明必須為
var
• 呢？ 因為只有
  var
  • 申明的變數(shù)才會加入到全域window物件上如果採用
  let\const
  • 則不是，具體的後續(xù)介紹一下這兩個申明變數(shù)的關(guān)鍵字
  但是有些場景，我不想讓隱式丟失怎麼辦，下面就來給大家介紹一下顯示綁定，也就是固定調(diào)用。

2.3 顯示綁定

??但是在某些場景下，

this

的改變都是意想不到的，實際上我們無法控制回呼函數(shù)的執(zhí)行方式，因此沒有辦法控制呼叫位置已得到期望的綁定即this指向。 接下來的顯示綁定就可以用來解決這個隱式遺失問題。

2.3.1 call/apply/bind

??js中的」所有「函數(shù)都有一些有用的特性，這個跟它的原型鏈有關(guān)係，後續(xù)我會在原型介紹，透過原型鏈js中變相實現(xiàn)繼承的方法，其中

call/apply/bind

這三個方法就是函數(shù)原型鏈上的方法，可以在函數(shù)中呼叫它們。 <h4 id="strong-call-strong"><strong>2.3.2 call</strong></h4> <ul> <li> <code>call() 方法使用一個指定的 this 值和單獨給出的一個或多個參數(shù)來調(diào)用一個函數(shù)。

• 第一個參數(shù)為固定綁定的this對象
• 第二個參數(shù)以及二以后的參數(shù)，都是作為參數(shù)進行傳遞給所調(diào)用的函數(shù)

備注

• 該方法的語法和作用與?apply()?方法類似，只有一個區(qū)別，就是?call()?方法接受的是一個參數(shù)列表，而?apply()?方法接受的是一個包含多個參數(shù)的數(shù)組。

var?fullName?=?'panpan'

const?info?=?{
??fullName:?'ice',
??getName:?function(age,?height)?{
????console.log(this.fullName,?age,?height)
??}
}

function?bar(fn)?{
??fn.call(info,?20,?1.88)?//ice?20?1.88
}

bar(info.getName)

2.3.3 apply

• 與call的方法類似，只是參數(shù)列表有所不同
  • 參數(shù)
    • call ?參數(shù)為單個傳遞
    • apply 參數(shù)為數(shù)組傳遞

var?fullName?=?'panpan'

const?info?=?{
??fullName:?'ice',
??getName:?function(age,?height)?{
????console.log(this.fullName,?age,?height)
??}
}

function?bar(fn)?{
??fn.apply(info,?[20,?1.88])?//ice?20?1.88
}

bar(info.getName)

2.3.4 bind

• bind與apply/call之間有所不同，bind傳入this，則是返回一個this綁定后的函數(shù)，調(diào)用返回后的函數(shù)，就可以拿到期望的this。
• 參數(shù)傳遞則是
  • 調(diào)用bind時，可以傳入?yún)?shù)
  • 調(diào)用bind返回的參數(shù)也可以進行傳參

var?fullName?=?'panpan'

const?info?=?{
??fullName:?'ice',
??getName:?function(age,?height)?{
????console.log(this.fullName,?age,?height)?//ice?20?1.88
??}
}

function?bar(fn)?{
??let?newFn?=?fn.bind(info,?20)
??newFn(1.88)
}

bar(info.getName)

2.4 new綁定

??談到new關(guān)鍵字，就不得不談構(gòu)造函數(shù)，也就是JS中的 "類"，后續(xù)原型篇章在跟大家繼續(xù)探討這個new關(guān)鍵字，首先要明白以下幾點，new Fn()的時候發(fā)生了什么，有利于我們理解this的指向。

• 創(chuàng)建了一個空對象

• 將this指向所創(chuàng)建出來的對象

• 把這個對象的[[prototype]] 指向了構(gòu)造函數(shù)的prototype屬性

• 執(zhí)行代碼塊代碼

• 如果沒有明確返回一個非空對象，那么返回的對象就是這個創(chuàng)建出來的對象

function?Person(name,?age)?{
??this.name?=?name
??this.age?=?age

}

const?p1?=?new?Person('ice',?20)

console.log(p1)?//?{name:'ice',?age:20}

• 當我調(diào)用new Person()的時候，那個this所指向的其實就是p1對象

3. 綁定優(yōu)先級

3.1 隱式綁定 > 默認綁定

function?bar()?{
??console.log(this)?//info
}

const?info?=?{
??bar:?bar
}

info.bar()

• 雖然這邊比較有些勉強，有些開發(fā)者會認為這是默認綁定的規(guī)則不能直接的顯示誰的優(yōu)先級高
• 但是從另外一個角度來看，隱式綁定，的this丟失以后this才會指向widonw或者undefined，變相的可以認為隱式綁定 > 默認綁定

3.2 顯示綁定 > 隱式綁定

var?fullName?=?'global?ice'
const?info?=?{
??fullName:?'ice',
??getName:?function()?{
????console.log(this.fullName)?
??}
}

info.getName.call(this)?//global?ice
info.getName.apply(this)?//global?ice
info.getName.bind(this)()?//global?ice

• 通過隱式綁定和顯示綁定的一起使用很明顯 顯示綁定 > 隱式綁定

3.3 bind(硬綁定) > ?apply/call

function?bar()?{
??console.log(this)?//123
}

const?newFn?=?bar.bind(123)
newFn.call(456)

3.4 new綁定 > bind綁定

首先我們來說一下，為什么是和bind比較，而不能對call和apply比較，思考下面代碼

const?info?=?{
??height:?1.88
}

function?Person(name,?age)?{
??this.name?=?name
??this.age?=?age
}

const?p1?=?new?Person.call('ice',?20)

//報錯:?Uncaught?TypeError:?Person.call?is?not?a?constructor

new綁定和bind綁定比較

const?info?=?{
??height:?1.88
}

function?Person(name,?age)?{
??this.name?=?name
??this.age?=?age
}

const?hasBindPerson?=?Person.bind(info)

const?p1?=?new?hasBindPerson('ice',?20)

console.log(info)?//{height:?1.88}

• 我們通過bind對Person進行了一次劫持，硬綁定了this為info對象
• new 返回的固定this的函數(shù)
• 但是我們發(fā)現(xiàn) 并不能干預(yù)this的指向

3.5 總結(jié)

new關(guān)鍵字 > bind > apply/call > 隱式綁定 > 默認綁定

4. 箭頭函數(shù) (arrow function)

首先箭頭函數(shù)是ES6新增的語法

const?foo?=?()?=>?{}

4.1 箭頭函數(shù)this

var?fullName?=?'global?ice'

const?info?=?{
??fullName:?'ice',
??getName:?()?=>?{
????console.log(this.fullName)
??}
}

info.getName()?//global?ice

• 你會神奇的發(fā)現(xiàn)？ 為什么不是默認綁定，打印結(jié)果為ice
• 其實這是ES6的新特性，箭頭函數(shù)不綁定this，它的this是上一層作用域，上一層作用域為window
• 所以打印的結(jié)果是 global ice

4.2 箭頭函數(shù)的應(yīng)用場景 進階

• 需求: 在getObjName通過this拿到info中的fullName (值為ice的fullName)

const?info?=?{
??fullName:?'ice',
??getName:?function()?{
????let?_this?=?this
????return?{
??????fullName:?'panpan',
??????getObjName:?function()?{
????????console.log(this)?//?obj
????????console.log(_this.fullName)
??????}
????}
??}
}

const?obj?=?info.getName()
obj.getObjName()

• 當我調(diào)用 info.getName() 返回了一個新對象

• 當我調(diào)用返回對象的getObjName方法時，我想拿到最外層的fullName，我通過，getObjName的this訪問，拿到的this卻是obj，不是我想要的結(jié)果

• 我需要在調(diào)用info.getName() 把this保存下來，info.getName() 是通過隱式調(diào)用，所以它內(nèi)部的this就是info對象

• getObjName是obj對象，因為也是隱式綁定，this必定是obj對象，繞了一大圈我只是想拿到上層作用域的this而已，恰好箭頭函數(shù)解決了這一問題

const?info?=?{
??fullName:?'ice',
??getName:?function()?{
????return?{
??????fullName:?'panpan',
??????getObjName:?()?=>?{
????????console.log(this.fullName)
??????}
????}
??}
}

const?obj?=?info.getName()
obj.getObjName()

5. 總結(jié)

5.1 this的四種綁定規(guī)則

• 默認綁定

• 隱式綁定

• 顯示綁定 apply/call/bind(也稱硬綁定)

• new綁定

5.2 this的優(yōu)先級 從高到低

• new綁定

• bind

• call/apply

• 隱式綁定

• 默認綁定

6. 結(jié)語

??當一切都看起來不起作用的時候，我就會像個石匠一樣去敲打石頭，可能敲100次，石頭沒有任何反應(yīng)，但是101次，石頭可能就會裂為兩半 我知道并不是第101次起了作用，而是前面積累所致。

??大家有疑惑可以在評論區(qū)留言 第一時間為大家解答。

（學(xué)習(xí)視頻分享：web前端開發(fā)）