this
this是Javascript中最難理解的概念，弄懂了會(huì)對(duì)編程能力有極大的提升啸胧。
一個(gè)簡(jiǎn)單的示例：
function getCount() {
let count = 1
console.log(this.count)
}
getCount()
/**
* 在這段代碼中赶站，我們期望打印函數(shù)訪問的是 getCount 內(nèi)部的count，即1
* 但實(shí)際上打印出來的是 undefined
* 其實(shí)這段代碼在全局創(chuàng)建了一個(gè)變量count纺念，沒有賦值
* 調(diào)用getCount實(shí)際上訪問到的是全局中的count
*/
this的作用域
this在任何情況下都不指向函數(shù)的詞法作用域贝椿。 在JavaScript內(nèi)部， 作用域確實(shí)和對(duì)象類似陷谱，可見的標(biāo)識(shí)符都是它的屬性烙博。但是作用域“對(duì)象”無法通過JavaScript代碼訪問，它存在于JavaScript引擎內(nèi)部烟逊。
this是在運(yùn)行時(shí)進(jìn)行綁定的渣窜，并不是在編寫時(shí)綁定的（所見不一定即所得）。它的上下文取決于函數(shù)調(diào)用時(shí)的各種條件宪躯。this的綁定和函數(shù)聲明的位置沒有任何關(guān)系乔宿，只取決于函數(shù)的調(diào)用方式。
當(dāng)一個(gè)函數(shù)被調(diào)用時(shí)访雪， 會(huì)創(chuàng)建一個(gè)活動(dòng)記錄（ 有時(shí)候也稱為執(zhí)行上下文）详瑞。這個(gè)記錄會(huì)包含函數(shù)在哪里被調(diào)用（ 調(diào)用棧）、函數(shù)的調(diào)用方法冬阳、傳入的參數(shù)等信息蛤虐。this就是記錄的其中一個(gè)屬性，會(huì)在函數(shù)執(zhí)行的過程中用到肝陪。
this的綁定規(guī)則
- 默認(rèn)綁定：獨(dú)立函數(shù)調(diào)用驳庭，非嚴(yán)格模式下this會(huì)被綁定到全局對(duì)象，瀏覽器中window哥力，node環(huán)境中的global死讹，嚴(yán)格模式下指向 undefined
function foo() {
let a = 2
console.log(this.a) // undefined
}
foo()
function foo() {
let a = 2
function bar() {
console.log(this.a) // undefined
}
bar()
}
不管函數(shù)是在哪個(gè)位置作為獨(dú)立函數(shù)調(diào)用的咳燕，都適用這條規(guī)則蔼两。
- 隱式綁定：調(diào)用位置是否有上下文對(duì)象庆聘，是否被某個(gè)對(duì)象擁有或者包含（誰調(diào)用铜犬，this指向誰）匣掸。
function foo() {
console.log(this.a)
}
let obj = {
a: 2,
foo: foo
}
obj.foo() // 2
當(dāng)foo()被調(diào)用時(shí)霸琴， 它的落腳點(diǎn)確實(shí)指向obj對(duì)象播聪。 當(dāng)函數(shù)引用有上下文對(duì)象時(shí)朽基，隱式綁定規(guī)則會(huì)把函數(shù)調(diào)用中的this綁定到這個(gè)上下文對(duì)象。因?yàn)檎{(diào)用foo()時(shí)this被綁定到obj离陶，因此this.a和obj.a是一樣的稼虎。
對(duì)象屬性引用鏈中只有最頂層或者說最后一層會(huì)影響調(diào)用位置。
function foo() {
console.log(this.a)
}
let obj = {
a: 2,
obj: {
a: 3,
foo: foo
}
}
obj.obj.foo() // 3
隱式丟失招刨，會(huì)執(zhí)行默認(rèn)綁定的規(guī)則霎俩； 調(diào)用回調(diào)函數(shù)的函數(shù)可能會(huì)修改this。
擴(kuò)展：react中的this綁定
- 顯式綁定：使用 call apply 指定 this 的綁定上下文
function foo() {
console.log(this.a)
}
let obj = {
a: 2,
}
foo.call(obj) // 2
foo.apply(obj) // 2
硬綁定沉眶，綁定方法中的this打却，使其無法再改變（根據(jù)對(duì)象屬性引用鏈中只有最頂層或者說最后一層會(huì)影響調(diào)用位置的原理）
function foo() {
console.log(this.a)
}
let obj = {
a: 2,
}
let bar = function () {
// 相當(dāng)與綁定了最后一層的環(huán)境
foo.call(obj)
}
var obj1 = {
a: 3
}
bar.call(obj1)
實(shí)現(xiàn)一個(gè)硬綁定函數(shù)：
function bind(fn, obj) {
return function () {
return fn.apply(obj, arguments)
}
}
let obj = {
a: 2
}
let obj1 = {
a: 3
}
function foo() {
console.log(this)
}
let bar = bind(foo, obj)
bar() // 2
bar.call(obj1) // 2
/ES5內(nèi)置了硬綁定方法，F(xiàn)unction.prototype.bind/
- new 綁定
function Person(name, age) {
this.name = name
this.age = age
console.log(this)
}
const person = new Person('new', 5)
function Person(name, age) {
this.name = name
this.age = age
console.log(this)
}
const person = new Person('new', 5)
/**
* new 操作做的事情
* 創(chuàng)建一個(gè)全新的對(duì)象
* 對(duì)這個(gè)新對(duì)象執(zhí)行原型鏈接（讓這個(gè)新對(duì)象的隱式原型（__proto__）指向構(gòu)造函數(shù)的原型（prototype））
* 讓函數(shù)調(diào)用時(shí)的this指向這個(gè)新對(duì)象谎倔，執(zhí)行構(gòu)造函數(shù)里面的操作
* 在構(gòu)造函數(shù)沒有返回其他對(duì)象的情況下柳击，返回這個(gè)新創(chuàng)建的對(duì)象
* 如果構(gòu)造函數(shù)返回了其他對(duì)象，則會(huì)返回這個(gè)對(duì)象
*/
this綁定優(yōu)先級(jí)
- 顯式綁定>隱式綁定
- new綁定>隱式綁定
- 硬綁定（bind）>new綁定
判斷this的規(guī)則
1传藏、函數(shù)是否在new中調(diào)用（new綁定）腻暮？如果是的話this綁定的是新創(chuàng)建的對(duì)象。
2毯侦、函數(shù)是否通過call哭靖、apply（顯式綁定）或者硬綁定調(diào)用？ 如果是的話侈离，this綁定的是指定的對(duì)象试幽。
3、函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用（ 隱式綁定）卦碾？ 如果是的話铺坞，this綁定的是那個(gè)上下文對(duì)象。
4洲胖、如果都不是的話济榨，使用默認(rèn)綁定。如果在嚴(yán)格模式下绿映，就綁定到undefined擒滑，否則綁定到全局對(duì)象腐晾。
