this是什么荆烈？
對(duì)JavaScript中this存在的兩種誤解：
- this指向函數(shù)本身
- this指向函數(shù)作用域
作用域無(wú)法通過(guò)JavaScript代碼進(jìn)行訪問(wèn)其爵，它存在于JavaScript引擎內(nèi)部，每當(dāng)把this和詞法作用域的查找混合使用時(shí)涣狗，這是無(wú)法實(shí)現(xiàn)的。
this是在運(yùn)行時(shí)進(jìn)行綁定语淘，也就是執(zhí)行上下文的創(chuàng)建階段镇饮，并不是在編寫(xiě)時(shí)綁定广鳍，它的上下文取決于函數(shù)調(diào)用時(shí)的各種條件。this的綁定和函數(shù)聲明的位置沒(méi)有任何關(guān)系蝶溶，只取決于函數(shù)的調(diào)用位置（也就是函數(shù)的調(diào)用方式）
var foo = 'gloabl foo'
var myObj = {foo: 'myObj foo'}
var say = function() {
console.log(this.foo)
}
myObj.say = say
myObj.say() // myObj foo
say() // global foo
為什么使用this嗜历？
this提供了一種更優(yōu)雅的方式來(lái)隱式“傳遞”對(duì)象引用，因此可以講api設(shè)計(jì)得更加簡(jiǎn)潔并易于復(fù)用身坐。
var me = {name: 'jack'}
// 不使用this
function speak(name) {
console.log('hello, i am' + name)
}
speak(me.name) // hello, i am jack
// 使用this
function speak() {
console.log('hello, i am' + this.name)
}
speak.call(me) // hello, i am jack
this的四大綁定規(guī)則
1秸脱、默認(rèn)綁定
函數(shù)調(diào)用類(lèi)型，this指向全局對(duì)象
var a = 'foo'
function foo() {
console.log(this.a)
}
foo() // foo
在嚴(yán)格模式下部蛇，全局對(duì)象無(wú)法使用默認(rèn)綁定摊唇，因此this會(huì)綁定到undefined
var a = 'foo'
function foo() {
'use strict'
console.log(this.a)
}
foo() // TypeError: this is undefined
2、隱式綁定
調(diào)用值是否有上下文對(duì)象涯鲁，或者說(shuō)被某個(gè)對(duì)象擁有或者包含
function foo() {
console.log(this.a)
}
var obj1 = {
a: 2,
foo: foo
}
var obj2 = {
a: 1,
obj1: obj1
}
obj2.obj1.foo() // 2
當(dāng)foo()被調(diào)用時(shí)巷查，JavaScript是靜態(tài)作用域類(lèi)型有序，foo函數(shù)定義的位置是obj1，隱式綁定規(guī)則會(huì)把函數(shù)調(diào)用中的this綁定到這個(gè)上下文對(duì)象岛请。
對(duì)象屬性引用鏈中只有最頂層或者說(shuō)最后一層會(huì)影響調(diào)用位置旭寿。
注意：隱式丟失
常見(jiàn)的this綁定問(wèn)題就是“隱式綁定”的函數(shù)會(huì)丟失綁定對(duì)象，也就是“默認(rèn)綁定”崇败，從而把this綁定到全局對(duì)象（嚴(yán)格模式下為undefined）
var a = 'foo'
function foo() {
console.log(this.a)
}
var obj = {
a: 2,
foo: foo
}
var bar = obj.foo
bar() // foo
雖然bar是obj.foo的一個(gè)引用盅称，但是實(shí)際上，它應(yīng)用的是foo函數(shù)本身后室，因此此時(shí)的bar()其實(shí)是不帶任何修飾的函數(shù)調(diào)用缩膝，因此應(yīng)用了默認(rèn)綁定。
var a = 'foo'
function foo() {
console.log(this.a)
}
function doFoo(fn) {
fn()
}
var obj = {
a: 2,
foo: foo
}
doFoo(obj.foo) // foo
setTimeout(obj.foo, 100)
參數(shù)傳遞其實(shí)就是一種隱式賦值岸霹，因此傳入函數(shù)式會(huì)被隱式賦值
3疾层、顯式綁定
（1）call、apply
（2）硬綁定
function foo() {
console.log(this.a)
}
var obj = {a: 2}
var bar = function() {
foo.call(obj)
}
bar() // 2
setTimeout(bar, 1000) // 2
bar.call(window) // 2
創(chuàng)建了函數(shù)bar()贡避，在其內(nèi)部手動(dòng)調(diào)用了foo.call(obj)痛黎，因此強(qiáng)制把foo的this綁定到了obj上。無(wú)論之后如何調(diào)用函數(shù)bar刮吧，總會(huì)手動(dòng)在obj上調(diào)用foo湖饱。
這種顯式的強(qiáng)制綁定，成為“硬綁定”
4皇筛、new綁定
new調(diào)用函數(shù)會(huì)自動(dòng)執(zhí)行下面操作：
（1）創(chuàng)建（或者說(shuō)是構(gòu)造）一個(gè)全新的對(duì)象
（2）這個(gè)新對(duì)象會(huì)被執(zhí)行[[原型]]連接
（3）這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的this
（4）如果函數(shù)沒(méi)有返回其他對(duì)象琉历，那么new表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對(duì)象
優(yōu)先級(jí)
了解函數(shù)調(diào)用中this綁定的四條規(guī)則坠七，需要做的就是找到函數(shù)的調(diào)用位置并判斷對(duì)象哪條規(guī)則
1水醋、函數(shù)是否是new綁定？如果是彪置，this綁定的是新創(chuàng)建的對(duì)象
var bar = new Foo()
2拄踪、函數(shù)是否通過(guò)call、appy顯式綁定或硬綁定拳魁？如果是惶桐，this綁定的是那個(gè)上下文對(duì)象
var bar = foo.call(obj)
3、函數(shù)是否在某個(gè)上下文對(duì)象中隱式調(diào)用潘懊？如果是姚糊，this綁定的是哪個(gè)上下文對(duì)象
var bar = obj.foo()
4、上述全不是授舟，則使用默認(rèn)綁定規(guī)則救恨，如果在嚴(yán)格模式下，就綁定到undefined释树，否則綁定到全局對(duì)象
var bar = foo()
綁定this的注意點(diǎn)
1肠槽、忽略this
把null和undefined作為this的綁定對(duì)象傳入call擎淤、apply、bind秸仙，調(diào)用時(shí)會(huì)被忽略嘴拢，實(shí)際應(yīng)用的是默認(rèn)綁定規(guī)則
function foo() {
console.log(this.a)
}
var a = 1
foo.call(null, 2) // 1
foo.apply(null, [3]) // 1
2、間接引用
function foo() {
console.log(this.a)
}
var a = 2
var o = {a: 3, foo: foo}
var p = {a: 4}
o.foo() // 3
(p.foo = o.foo)() // 2,間接引用
var pfoo = o.foo
pfoo() // 2 隱式丟失
3寂纪、ES6箭頭函數(shù)
箭頭函數(shù)不使用this的四種標(biāo)準(zhǔn)規(guī)則席吴，而是根據(jù)外層（函數(shù)或全局）作用域來(lái)決定this
箭頭函數(shù)的綁定無(wú)法被修改。常用于回調(diào)函數(shù)中捞蛋，如事件處理器或定時(shí)器抢腐。
function foo() {
setTimeout(() => {
console.log(this.a)
}, 100)
}
var obj = {a: 2}
foo.call(obj) // 2
詳解如何確定this
1、（隱式綁定）如果某個(gè)對(duì)象中某個(gè)成員是function襟交，當(dāng)從這個(gè)對(duì)象上調(diào)用這個(gè)方法時(shí)迈倍，this指向當(dāng)前對(duì)象
var FenFei = {
firstname:"li",
lastname:"gang",
timeTravel:function(year){
console.log(this.firstname + " " + this.lastname + " is time traveling to " + year);
}
}
FenFei.timeTravel(2014) //li gang is time traveling to 2014（父/擁有者對(duì)象：FenFei）
2、（隱式綁定）可以通過(guò)創(chuàng)建一個(gè)對(duì)象捣域，來(lái)引用FenFei對(duì)象上的timerTravel方法
var Camile = {
firstname:"li",
lastname:"yunxia"
}
Camile.timeTravel = FenFei.timeTravel;
Camile.timeTravel(2014); //li yunxia is time traveling to 2014（父/擁有者對(duì)象：Camile）
3啼染、（隱式丟失）使用變量保存FenFei.timeTravel方法的引用
var getTimeTravel = FenFei.timeTravel
getTimeTravel(2014) // undefined undefined is time traveling to 2014 (父/擁有對(duì)象： window；window對(duì)象里并沒(méi)有firstName和lastName屬性)
注意：謹(jǐn)記方法中的this將指向調(diào)用它的那個(gè)父/擁有者對(duì)象焕梅！無(wú)論何時(shí)被調(diào)用迹鹅，我們必須看方括號(hào)或者是圓括號(hào)左邊緊鄰的位置，如果我們看到一個(gè)引用（reference）贞言，那么傳到function里面的this值就是指向這個(gè)方法所屬于的那個(gè)對(duì)象斜棚，要不然就是指向全局對(duì)象，或嚴(yán)格模式下的undefined
4该窗、異步調(diào)用的方法內(nèi)部的this
<button id='async'>點(diǎn)擊我</button>
var btnDom = document.getElementById('async')
btnDom.addEventListener('click', FenFei.timeTravel)
// undefined undefined is time traveling to [Object MouseEvent](父/擁有對(duì)象: button)
btnDom.addEventListener('click', function(e) {
FenFei.timeTravel(2014)
})
//li gang is time traveling to 2014（父/擁有者對(duì)象：FenFei）
5弟蚀、（new綁定）構(gòu)造函數(shù)里的this
當(dāng)使用構(gòu)造函數(shù)創(chuàng)建一個(gè)對(duì)象的實(shí)例時(shí)，構(gòu)造函數(shù)里的this就是新建的實(shí)例
var TimeTravel = function(fName, lName) {
this.firstName = fName
this.lastName = lName
}
var FenFei = new TimeTravel('li', 'gang')
console.log(FenFei.firstName, FenFei.lastNmae) // li gang
6酗失、（顯式綁定）call和apply方法設(shè)定this的值
var Campile = {
firstName: 'li',
lastName: 'yunxia'
}
FenFei.timeTravel.call(Camile,2014); //li yunxia is time traveling to 2014（指定this對(duì)象為Camile）
FenFei.timeTravel.apply(Camile,[2014]); //li yunxia is time traveling to 2014（指定this對(duì)象為Camile）
7义钉、（顯式綁定）bind將函數(shù)邦定至某個(gè)對(duì)象（ES5）
function f(y) {
return this.x + y
}
var o = {x: 1}
var g = f.bind(o)
g(2) // 3
f.bind(0)返回的是一個(gè)新函數(shù)，調(diào)用g(2)會(huì)把原始的函數(shù)f()當(dāng)做o的方法來(lái)調(diào)用
8规肴、補(bǔ)充捶闸，ES5之前模擬bind方法
function myBind(f, o) {
if(f.bind) {
return f.bind(o)
} else {
return function() {
f.apply(o, arguments)
}
}
}
bind的作用和apply、call類(lèi)似都是改變函數(shù)的execute context拖刃，也就是runtime時(shí)this關(guān)鍵字的指向删壮。但是使用方法略有不同。一個(gè)函數(shù)進(jìn)行bind后可稍后執(zhí)行兑牡。
補(bǔ)充
1央碟、使用new為函數(shù)創(chuàng)建多個(gè)實(shí)例的時(shí)候，這些實(shí)例會(huì)共享prototype
當(dāng)在一個(gè)實(shí)例你直接給this添加屬性時(shí)发绢，會(huì)隱藏prototype中與之同名的屬性硬耍。
如果先訪問(wèn)prototype中的屬性而不是自己設(shè)定的屬性值垄琐，
（1）刪除實(shí)例自己添加的屬性，delete實(shí)例名.屬性名
（2）直接訪問(wèn)prototype中的屬性经柴，xx.prototype.name
function Thing() {}
Thing.prototype.name = 'jack'
Thing.prototype.getName = function() {
console.log(this.name)
}
Thing.prototype.setName = function() {
this.name = 'marry'
}
Thing.prototype.deleteName = function() {
delete this.name
}
var thing = new Thing()
thing.setName()
thing.getName() //marry
thing.deleteName()
thing.getName() //jack
2狸窘、柯里化
在接受多個(gè)參數(shù)的函數(shù)變換成接受一個(gè)單一參數(shù)（最初函數(shù)的第一個(gè)參數(shù)）的函數(shù)，如果其他的參數(shù)是必要的坯认，返回接受余下的參數(shù)并返回結(jié)果的新函數(shù)
var sum = function(x, y) {
return x+y
}
var succ = sum.bind(null, 1)
succ(2) // 3
function f(y,z) {
return this.x + y + z
}
var g = f.bind({x:1}, 2)
g(3) // 6
