Colleagues got stuck because of the problem pointed by thisbug, vue2’s this pointed problem, using the arrow function, resulting in the inability to get the corresponding props . He didn't know it when I introduced it to him, and then I deliberately looked at the front-end communication group. So far, at least 70% of front-end programmers still don't understand it. I'll share it with you today thisPoint, if you haven’t learned anything, please give me a big mouth.

1. Calling location

• The scope is related to where it is defined and has nothing to do with where it is executed
• thisThe pointer has nothing to do with where it is defined, it has to do with how it is called and in what form
• this(this) how this function is called (convenient to remember)
• In order to facilitate understanding, strict mode is not enabled by default

2. Binding rules

We introduced above,this Pointing mainly depends on the form of calling. Next, I will introduce the calling rules to you. Without rules, nothing is complete. Just keep these calling rules in mind. There is nothing difficult.

• You must find the calling location, and then determine which of the following four binding rules is
• Secondly, you must also know the priority of these four binding rules.
• You know these two points and it will be easy for you to know where this points.

2.1 Default binding

Functions are the most commonly used The calling method, the type of calling function: independent function call

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

• bar is a direct call without any modifier, so the default binding is window
• In strict mode, this here is undefined

##2.2 Implicit binding

Use the most In layman's terms, it means: the object has a certain method, and the method is accessed through this object and called directly (note: the arrow function is special, which will be explained below)

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

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

This function is
• info The call is initiated and implicit binding is performed, so the current this is info, and the value accessed through this.fullName is undoubtedly ice

Implicit loss normal

? In some cases, implicit loss will be performed, and the implicitly bound function will lose the bound object. , that is to say, it becomes the default binding. The

this value of the default binding is window or undefined, depending on the environment you are currently in. Whether it is strict mode.

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

const?fn?=?info.getName

fn()?//undefined

??In this case, implicit loss is performed and the bound object is lost. Why does such a problem occur? If you are familiar with memory, it will be easy to understand.

There is no direct call here, but the memory address corresponding to
• getName is found through info and assigned to the variable fn
Then the call was made directly through
• fn
In fact, the essence here is an independent function call, which is
• window, from windowTake out the fullName attribute, which must be undefined

Implicit loss advancedWhat do you need to understand first? Is the callback function. In fact, it can be understood this way, that is, I don't call it now, but pass it to other places in the form of parameters, and call it somewhere else.

//申明變量關(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)

First of all,
• fn in bar is a callback function
• fn = info.getName parameter passing It is an implicit assignment. In fact, it has the same meaning as the implicit loss above. They all point to fn = info.getName references, which is their memory addresses
because they The
• this is lost, that is, the function is called independently, the default binding rule is, this is the global window object
Note: Why must the declaration be What about
• var?
  Because only the variables declared by
  • var will be added to the global window object
  If
  • let\const is used, then No, I will introduce the two keywords for declaring variables in detail
But in some scenarios, I don’t want implicit loss. What should I do? Let’s introduce display binding to you. , that is, fixed call.

2.3 Display binding

?However, in some scenarios, the changes in

this are unexpected. In fact, we There is no control over how the callback function is executed, so there is no way to control that the calling location has the expected binding that this points to.

The next display binding can be used to solve this implicit loss problem.

2.3.1 call/apply/bind

“All” functions in js have some useful features. This is related to its prototype chain. Follow-up I will introduce in the prototype, the method of implementing inheritance in disguise through the prototype chain js, among which the three methods

call/apply/bind are the methods on the function prototype chain, and they can be called in the function.

2.3.2 call

• call() 方法使用一個(gè)指定的 this 值和單獨(dú)給出的一個(gè)或多個(gè)參數(shù)來(lái)調(diào)用一個(gè)函數(shù)。
  • 第一個(gè)參數(shù)為固定綁定的this對(duì)象
  • 第二個(gè)參數(shù)以及二以后的參數(shù)，都是作為參數(shù)進(jìn)行傳遞給所調(diào)用的函數(shù)
• 備注
  • 該方法的語(yǔ)法和作用與?apply()?方法類似，只有一個(gè)區(qū)別，就是?call()?方法接受的是一個(gè)參數(shù)列表，而?apply()?方法接受的是一個(gè)包含多個(gè)參數(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ù)為單個(gè)傳遞
    • 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，則是返回一個(gè)this綁定后的函數(shù)，調(diào)用返回后的函數(shù)，就可以拿到期望的this。
• 參數(shù)傳遞則是
  • 調(diào)用bind時(shí)，可以傳入?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ù)探討這個(gè)new關(guān)鍵字，首先要明白以下幾點(diǎn)，new Fn()的時(shí)候發(fā)生了什么，有利于我們理解this的指向。

• 創(chuàng)建了一個(gè)空對(duì)象

• 將this指向所創(chuàng)建出來(lái)的對(duì)象

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

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

• 如果沒(méi)有明確返回一個(gè)非空對(duì)象，那么返回的對(duì)象就是這個(gè)創(chuàng)建出來(lái)的對(duì)象

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()的時(shí)候，那個(gè)this所指向的其實(shí)就是p1對(duì)象

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

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

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

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

info.bar()

• 雖然這邊比較有些勉強(qiáng)，有些開(kāi)發(fā)者會(huì)認(rèn)為這是默認(rèn)綁定的規(guī)則不能直接的顯示誰(shuí)的優(yōu)先級(jí)高
• 但是從另外一個(gè)角度來(lái)看，隱式綁定，的this丟失以后this才會(huì)指向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

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

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

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

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

3.4 new綁定 > bind綁定

首先我們來(lái)說(shuō)一下，為什么是和bind比較，而不能對(duì)call和apply比較，思考下面代碼

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

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

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

//報(bào)錯(cuò):?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}

• 我們通過(guò)bind對(duì)Person進(jìn)行了一次劫持，硬綁定了this為info對(duì)象
• 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新增的語(yǔ)法

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

4.1 箭頭函數(shù)this

var?fullName?=?'global?ice'

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

info.getName()?//global?ice

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

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

• 需求: 在getObjName通過(guò)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() 返回了一個(gè)新對(duì)象

• 當(dāng)我調(diào)用返回對(duì)象的getObjName方法時(shí)，我想拿到最外層的fullName，我通過(guò)，getObjName的this訪問(wèn)，拿到的this卻是obj，不是我想要的結(jié)果

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

• getObjName是obj對(duì)象，因?yàn)橐彩请[式綁定，this必定是obj對(duì)象，繞了一大圈我只是想拿到上層作用域的this而已，恰好箭頭函數(shù)解決了這一問(wèn)題

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)先級(jí) 從高到低

• new綁定

• bind

• call/apply

• 隱式綁定

• 默認(rèn)綁定

6. 結(jié)語(yǔ)

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

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

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