Un collègue est resté bloqué à cause du problème de bug signalé par ceci, vue2 est ce problème de pointage, et la fonction flèche a été utilisée, ce qui a entra?né l'échec de l'obtention du accessoires >. Il ne le savait pas quand je le lui ai présenté, puis j'ai délibérément regardé le groupe de communication front-end. Jusqu'à présent, au moins 70 % des programmeurs front-end ne peuvent pas le comprendre. Aujourd'hui, je vais partager avec vous. ce code>Montrez-le, si vous n'avez rien appris, s'il vous pla?t, faites-moi une grande gueule. <code>bug，vue2的this指向問題，使用了箭頭函數(shù)，導(dǎo)致拿不到對應(yīng)的props。當(dāng)我給他介紹的時候他竟然不知道，隨后也刻意的看了一下前端交流群，至今最起碼還有70%以上的前端程序員搞不明白，今天給大家分享一下this指向，如果啥都沒學(xué)會，請給我一個大嘴巴子。

1. 調(diào)用位置

• 作用域跟在哪里定義有關(guān)，與在哪里執(zhí)行無關(guān)
• this指向跟在哪里定義無關(guān)，跟如何調(diào)用，通過什么樣的形式調(diào)用有關(guān)
• this(這個) 這個函數(shù)如何被調(diào)用(方便記憶)
• 為了方便理解，默認(rèn)情況下不開啟嚴(yán)格模式

2. 綁定規(guī)則

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

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

2.1 默認(rèn)綁定

?? 函數(shù)最常用的調(diào)用方式，調(diào)用函數(shù)的類型：獨立函數(shù)調(diào)用

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

• bar是不帶任何修飾符的直接調(diào)用 所以為默認(rèn)綁定 為window
• 在嚴(yán)格模式下 這里的this為undefined

2.2 隱式綁定

??用最通俗的話表示就是：對象擁有某個方法，通過這個對象訪問方法且直接調(diào)用（注:箭頭函數(shù)特殊，下面會講解）

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

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

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

隱式丟失 普通

??有些情況下會進(jìn)行隱式丟失，被隱式綁定的函數(shù)會丟失綁定對象，也就是說它為變?yōu)槟J(rèn)綁定，默認(rèn)綁定的this值，為window還是undefined取決于您當(dāng)前所處的環(huán)境，是否為嚴(yán)格模式。

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

const?fn?=?info.getName

fn()?//undefined

??這種情況下就進(jìn)行了隱式丟失，丟失了綁定的對象，為什么會產(chǎn)生這樣的問題呢？如果熟悉內(nèi)存的小伙伴，就會很容易理解。

• 這里并沒有直接調(diào)用，而是通過info找到了對應(yīng)getName的內(nèi)存地址，賦值給變量fn
• 然后通過fn 直接進(jìn)行了調(diào)用
• 其實這里的本質(zhì) 就是獨立函數(shù)調(diào)用 也就是為window，從window中取出fullName屬性，必定為undefined

隱式丟失 進(jìn)階
這里大家首先要理解什么是回調(diào)函數(shù)。其實可以這樣理解，就是我現(xiàn)在不調(diào)用它，把他通過參數(shù)的形式傳入到其他地方，在別的地方調(diào)用它。

//申明變量關(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為一個回調(diào)函數(shù)
• fn = info.getName 參數(shù)傳遞就是一種隱式賦值，其實跟上面的隱式丟失是一個意思，他們都是指向的fn = info.getName引用，也就是它們的內(nèi)存地址
• 因為他們的this丟失，也就是函數(shù)獨立調(diào)用，默認(rèn)綁定規(guī)則，this為全局的window對象
• 注意: 為什么申明必須為var呢？
  • 因為只有var申明的變量才會加入到全局window對象上
  • 如果采用letconst 則不是，具體的后續(xù)介紹一下這兩個申明變量的關(guān)鍵字
• 但是有些場景，我不想讓隱式丟失怎么辦，下面就來給大家介紹一下顯示綁定，也就是固定調(diào)用。

2.3 顯示綁定

??但是在某些場景下，this的改變都是意想不到的，實際上我們無法控制回調(diào)函數(shù)的執(zhí)行方式，因此沒有辦法控制調(diào)用位置已得到期望的綁定即this指向。

接下來的顯示綁定就可以用來解決這一隱式丟失問題。

2.3.1 call/apply/bind

??js中的 ”所有“函數(shù)都有一些有用的特性，這個跟它的原型鏈有關(guān)系，后續(xù)我會在原型介紹，通過原型鏈js中變相實現(xiàn)繼承的方法，其中call/apply/bind

1. Emplacement de l'appel

• La portée est liée à l'endroit où elle est définie, et non à l'endroit où elle est exécutée
• this pointe vers une fonction qui n'a rien à voir avec l'endroit où elle est définie, mais comment elle est appelée et sous quelle forme
• this(this) Comment être appelé (facile à retenir)
• Pour faciliter la compréhension, le mode strict n'est pas activé par défaut

2. Règles de liaison

? Comme nous l'avons introduit ci-dessus, le pointage de this est principalement lié à la forme d'appel. Ensuite, je vais vous présenter les règles d'appel. Sans règles, rien n'est complet. Gardez simplement ces règles d'appel à l'esprit. Il n'y a rien de difficile. ??

• Vous devez trouver l'emplacement appelant, puis déterminer laquelle des quatre règles contraignantes suivantes
• Deuxièmement, vous devez également conna?tre la priorité de ces quatre règles contraignantes
• Vous connaissez ces deux points et il est facile pour vous d'en conna?tre la direction

2.1 Liaison par défaut

?????La manière la plus courante d'appeler une fonction, le type d'appel de fonction?: appel de fonction indépendant??

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)

• bar est un appel direct sans aucun modificateur, donc la liaison par défaut est window
• En mode strict, ce ici est non défini

2.2 Liaison implicite

???? Dans les termes les plus courants, cela signifie?: l'objet a une certaine méthode, et la méthode est accessible via cet objet et appelée directement (remarque?: les fonctions fléchées sont spéciales, expliquera ci-dessous) ??

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)

• Cette fonction est appelée par info et implicitement liée, donc le this actuel est info, via this.fullName il ne fait aucun doute que la valeur d'accès est ice

??Perte implicite de la normale??????Dans certains Dans certains cas, une perte implicite se produit. La fonction implicitement liée perdra l'objet de liaison, ce qui signifie qu'elle devient la liaison par défaut, et la valeur this de la liaison par défaut, qu'il s'agisse de window code> ou <code>undefined dépend de l'environnement dans lequel vous vous trouvez actuellement, s'il s'agit d'un mode strict. ??

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)

????Dans ce cas, une perte implicite est effectuée et l'objet lié est perdu. Pourquoi un tel problème se produit-il ? Si vous êtes familier avec la mémoire, ce sera facile à comprendre. ??

• Il n'y a pas d'appel direct ici, mais l'adresse mémoire correspondant à getName est trouvée via info et affectée à la variable fn code>
• Ensuite, l'appel a été effectué directement via fn
• En fait, l'essence ici est un appel de fonction indépendant, qui est window, from fullName extrait de code>window

doit être undefined??Perte implicite Avancé
Ici, tout le monde doit d'abord comprendre ce qu'est une fonction de rappel. En fait, cela peut être compris de cette fa?on, c'est-à-dire que je ne l'appelle pas maintenant, mais je le transmets à d'autres endroits sous forme de paramètres et je l'appelle ailleurs. ??

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

}

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

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

• Tout d'abord, fn dans bar est une fonction de rappel
• fn = info.getName code> Le passage de paramètres est une sorte d'affectation implicite. En fait, cela a la même signification que la perte implicite ci-dessus. Ils pointent tous vers des références <code>fn = info.getName, qui sont leurs adresses mémoireli>Parce que leur this est perdu, c'est-à-dire que la fonction est appelée indépendamment et la règle de liaison par défaut est que this est la fenêtre globale. code> objet
• Remarque?: Pourquoi la déclaration doit-elle être var??
  • Parce que seules les variables déclarées par var seront ajoutées à l'objet global window
  • Si letconst est utilisé > Non, je présenterai les deux mots-clés pour déclarer les variables en détail plus tard
• Mais dans certains scénarios, je ne veux pas de perte implicite. Que dois-je faire. ? Je vais vous dire quoi faire ensuite. Introduisons la liaison d'affichage, qui est un appel fixe.

2.3 Liaison d'affichage

?? ? Mais dans certains scénarios, thisLe les changements sont inattendus. En fait, nous n'avons aucun contr?le sur la fa?on dont la fonction de rappel est exécutée, il n'y a donc aucun moyen de contr?ler que l'emplacement appelant a obtenu la liaison attendue, c'est-à-dire qu'il y pointe. ????La prochaine liaison d'affichage peut être utilisée pour résoudre ce problème de perte implicite. ??

2.3.1 call/apply/bind

??? Toutes les fonctions de js ont des fonctionnalités utiles, celle-ci est la même que celle-ci. cha?ne prototype de Appelez-les dans les fonctions. ??

2.3.2 call

• call() 方法使用一個指定的 this 值和單獨給出的一個或多個參數(shù)來調(diào)用一個函數(shù)。
  • 第一個參數(shù)為固定綁定的this對象
  • 第二個參數(shù)以及二以后的參數(shù)，都是作為參數(shù)進(jìn)行傳遞給所調(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ù)也可以進(jìn)行傳參

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}

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

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

3.1 隱式綁定 > 默認(rèn)綁定

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

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

info.bar()

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

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進(jìn)行了一次劫持，硬綁定了this為info對象
• new 返回的固定this的函數(shù)
• 但是我們發(fā)現(xiàn) 并不能干預(yù)this的指向

3.5 總結(jié)

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

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)？ 為什么不是默認(rèn)綁定，打印結(jié)果為ice
• 其實這是ES6的新特性，箭頭函數(shù)不綁定this，它的this是上一層作用域，上一層作用域為window
• 所以打印的結(jié)果是 global ice

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

• 需求: 在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()

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

• 當(dāng)我調(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ī)則

• 默認(rèn)綁定

• 隱式綁定

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

• new綁定

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

• new綁定

• bind

• call/apply

• 隱式綁定

• 默認(rèn)綁定

6. 結(jié)語

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

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

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