この バグ 、vue2 のこの指摘された問題 でアロー関數(shù)を使用したため、同僚が行き詰まり、対応する props# を取得できなくなりました。 ## 。私がそれを紹介したとき、彼はそれを知りませんでした。その後、私はわざとフロントエンド コミュニケーション グループに目を向けました。今のところ、フロントエンド プログラマの少なくとも 70% はまだそれを理解していません。それを共有します。今日はあなたと一緒に thisポイント、何も學んでいないなら、大きな口を立ててください。

1. 場所の呼び出し

スコープは定義された場所に関連しており、実行される場所とは関係ありません
• thisポインタは、どこで定義されるかには関係なく、どのように呼び出されるか、そしてどのような形式で呼び出されるかに関係します。
• this(this) どのように this関數(shù)が呼び出されます (覚えておくと便利です)
理解を容易にするために、デフォルトでは厳密モードは有効になっていません

#2. バインディング ルール

上でも紹介しましたが、

this ポインティングは主に呼び方の形式によって決まります。次に、呼び出しルールを紹介します。ルールがなければ何も完成しません。この呼び出しルールを覚えておいてください。難しいことは何もありません。」

呼び出し元の場所を見つけて、次の 4 つのバインド ルールのどれであるかを判斷する必要があります。
• 次に、これら 4 つのバインド ルールの優(yōu)先順位も把握しておく必要があります。
• これら 2 つの點を理解していると、これがどこを指しているのかを簡単に理解できるでしょう。

2.1 デフォルトのバインディング

最も一般的なのは関數(shù)です。 used 呼び出しメソッド、呼び出し関數(shù)のタイプ: 獨立した関數(shù)呼び出し

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

bar は修飾子のない直接呼び出しであるため、デフォルトのバインディングは

window
• ## です。 #厳密モー??ドでは、this
ここは
• 未定義
#2.2 暗黙的なバインディング

最も一般的な用語を使用します。 、それは意味します: オブジェクトには特定のメソッドがあり、そのメソッドはこのオブジェクトを通じてアクセスされ、直接呼び出されます (注: アロー関數(shù)は特別であり、これについては後で説明します)

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

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

この関數(shù)は

info

呼び出しが開始され、暗黙的なバインディングが実行されるため、現(xiàn)在の
• this は info となり、値は this.fullName を通じてアクセスされます。は間違いなく Ice
暗黙的な損失が正常です

場合によっては、暗黙的な損失が実行され、暗黙的にバインドされた関數(shù)がバインドされたオブジェクトが失われます。つまり、デフォルト バインディングになります。デフォルト バインディングの this

値は、現(xiàn)在いる環(huán)境。厳密モードかどうか。

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

const?fn?=?info.getName

fn()?//undefined

この場合、暗黙的な損失が行われ、バインドされたオブジェクトが失われることになりますが、なぜこのような問題が発生するのでしょうか？記憶に詳しい人なら簡単に理解できると思います。 ここには直接呼び出しはありませんが、getName に対応するメモリ アドレスは info

を通じて検出され、変數(shù)

fn## に割り當てられます。

• #その後、呼び出しは fn を通じて直接行われました。実際、ここでの本質は、獨立した関數(shù)呼び出し (window です) です。
window
• fullName 屬性を取り出します。この屬性は
未定義
• 暗黙的な損失の高度なである必要があります。最初に理解する必要があるのは、コールバック関數(shù)です。実際、これはこのように理解できます。つまり、今は呼び出すのではなく、パラメーターの形式で他の場所に渡し、別の場所で呼び出します。 <pre class="brush:php;toolbar:false">//申明變量關鍵字必須為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)</pre>
まず、

bar

の fn はコールバック関數(shù)

fn = info.getName
• です。パラメータの受け渡し これは暗黙的な割り當てです。実際、上記の暗黙的な損失と同じ意味を持っています。それらはすべて fn = info.getName 參照を指しており、これはメモリ アドレス です
this
• が失われているため、関數(shù)は獨立して呼び出されます。デフォルトのバインディング ルールは、this がグローバル window オブジェクト
# であるためです。 ##注: 宣言が「What about
• var」でなければならないのはなぜですか? var で宣言された変數(shù)のみがグローバル window
オブジェクトに追加されるためです。
• If let\const
  使用済みの場合は、いいえ、変數(shù)を宣言するための 2 つのキーワードを詳しく紹介します
  • しかし、シナリオによっては、暗黙的な損失を望まない場合があります。どうすればよいですか? ディスプレイ バインディングを導入しましょうあなたへの、つまり固定電話です。
  • 2.3 表示バインディング
  ただし、一部のシナリオでは、
this
• の変更は予期せぬものになります。コールバック関數(shù)がどのように実行されるかを制御できないため、呼び出し場所に、これが指す予想されるバインディングがあるかどうかを制御する方法がありません。

次の表示バインディングを使用して、この暗黙的な損失の問題を解決できます。

2.3.1 call/apply/bind

js の「すべての」関數(shù)には、いくつかの便利な機能があります。これは、そのプロトタイプ チェーンに関連しています。プロトタイプチェーン js を介して継承を偽裝して実裝する方法をプロトタイプに導入します。このうち call/apply/bind

の 3 つのメソッドは関數(shù)プロトタイプチェーン上のメソッドであり、これらは関數(shù)プロトタイプチェーンで呼び出すことができます。関數(shù)。

2.3.2 call

• call() 方法使用一個指定的 this 值和單獨給出的一個或多個參數(shù)來調用一個函數(shù)。
  • 第一個參數(shù)為固定綁定的this對象
  • 第二個參數(shù)以及二以后的參數(shù)，都是作為參數(shù)進行傳遞給所調用的函數(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ù)，調用返回后的函數(shù)，就可以拿到期望的this。
• 參數(shù)傳遞則是
  • 調用bind時，可以傳入?yún)?shù)
  • 調用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關鍵字，就不得不談構造函數(shù)，也就是JS中的 "類"，后續(xù)原型篇章在跟大家繼續(xù)探討這個new關鍵字，首先要明白以下幾點，new Fn()的時候發(fā)生了什么，有利于我們理解this的指向。

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

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

• 把這個對象的[[prototype]] 指向了構造函數(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}

• 當我調用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) 并不能干預this的指向

3.5 總結

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

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

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

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

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

• 我需要在調用info.getName() 把this保存下來，info.getName() 是通過隱式調用，所以它內部的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. 總結

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

• 默認綁定

• 隱式綁定

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

• new綁定

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

• new綁定

• bind

• call/apply

• 隱式綁定

• 默認綁定

6. 結語

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

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

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