【javascript】函數(shù)中的this的四種綁定形式 — 大家準(zhǔn)備好瓜子，我要講故事啦~~
（給前端大學(xué)加星標(biāo)，提升前端技能.）
作者：外婆的
https://www.cnblogs.com/penghuwan/p/7356210.html
目錄
this的默認(rèn)綁定
this的隱式綁定
隱式綁定下，作為對(duì)象屬性的函數(shù)，對(duì)于對(duì)象來(lái)說(shuō)是獨(dú)立的
在一串對(duì)象屬性鏈中，this綁定的是最內(nèi)層的對(duì)象
this的顯式綁定：(call和bind方法)
new綁定
?
正文
javascript中的this和函數(shù)息息相關(guān)，所以今天，我就給大家詳細(xì)地講述一番：javascript函數(shù)中的this
?
一談到this，很多讓人暈暈乎乎的抽象概念就跑出來(lái)了，這里我就只說(shuō)最核心的一點(diǎn)——函數(shù)中的this總指向調(diào)用它的對(duì)象，接下來(lái)的故事都將圍繞這一點(diǎn)展開(kāi)
?
（提醒前排的筒子們準(zhǔn)備好茶水和西瓜，我要開(kāi)始講故事啦！！）
?
【故事】有一個(gè)年輕人叫"迪斯"（this）,有一天，迪斯不小心穿越到一個(gè)叫?“伽瓦斯克利”（javascript）的 異世界，此時(shí)此刻迪斯身無(wú)分文， 他首先要做的事情就是——找到他的住宿的地方——調(diào)用函數(shù)的對(duì)象
?
this的默認(rèn)綁定
【故事——線路1】如果迪斯（this）直到天黑前都沒(méi)有找到能收留自己的住所，他眼看就要過(guò)上非洲難民的生活， 這時(shí)候，一位樂(lè)善好施的魔法師村長(zhǎng)——window救世主一般地出現(xiàn)了：先住在我家吧！
?
【正文】
當(dāng)一個(gè)函數(shù)沒(méi)有明確的調(diào)用對(duì)象的時(shí)候，也就是單純作為獨(dú)立函數(shù)調(diào)用的時(shí)候，將對(duì)函數(shù)的this使用默認(rèn)綁定：綁定到全局的window對(duì)象
function fire () {console.log(this === window)}fire(); // 輸出true
上面的例子我相信對(duì)大多數(shù)人都很簡(jiǎn)單，但有的時(shí)候我們把例子變一下就會(huì)具有迷惑性：
function fire () {// 我是被定義在函數(shù)內(nèi)部的函數(shù)哦！function innerFire() {console.log(this === window)}innerFire(); // 獨(dú)立函數(shù)調(diào)用}fire(); // 輸出true
函數(shù) innerFire在一個(gè)外部函數(shù)fire里面聲明且調(diào)用，那么它的this是指向誰(shuí)呢？仍然是window
?
許多人可能會(huì)顧慮于fire函數(shù)的作用域?qū)nnerFire的影響，但我們只要抓住我們的理論武器——沒(méi)有明確的調(diào)用對(duì)象的時(shí)候，將對(duì)函數(shù)的this使用默認(rèn)綁定：綁定到全局的window對(duì)象，便可得正確的答案了
?
下面這個(gè)加強(qiáng)版的例子也是同樣的輸出true
var obj = {fire: function () {function innerFire() {console.log(this === window)}innerFire(); // 獨(dú)立函數(shù)調(diào)用}}obj.fire(); //輸出 true
【注意】在這個(gè)例子中， obj.fire()的調(diào)用實(shí)際上使用到了this的隱式綁定，這就是下面我要講的內(nèi)容，這個(gè)例子我接下來(lái)還會(huì)繼續(xù)講解
?
【總結(jié)】 凡事函數(shù)作為獨(dú)立函數(shù)調(diào)用，無(wú)論它的位置在哪里，它的行為表現(xiàn)，都和直接在全局環(huán)境中調(diào)用無(wú)異
?
this的隱式綁定
【故事——線路2】 迪斯（this）穿越來(lái)異世界“伽瓦斯克利”（javascript）的時(shí)候，剛好身上帶了一些錢(qián)，于是他找到一個(gè)旅館住宿了下來(lái)
?
?
當(dāng)函數(shù)被一個(gè)對(duì)象“包含”的時(shí)候，我們稱函數(shù)的this被隱式綁定到這個(gè)對(duì)象里面了，這時(shí)候，通過(guò)this可以直接訪問(wèn)所綁定的對(duì)象里面的其他屬性，比如下面的a屬性
var obj = {a: 1,fire: function () {console.log(this.a)}}obj.fire(); // 輸出1
現(xiàn)在我們需要對(duì)平常司空見(jiàn)慣的的代碼操作做一些更深的思考，首先，下面的這兩段代碼達(dá)到的效果是相同的：
// 我是第一段代碼function fire () {console.log(this.a)}var obj = {a: 1,fire: fire}obj.fire(); // 輸出1// 我是第二段代碼var obj = {a: 1,fire: function () {console.log(this.a)}}obj.fire(); // 輸出1?
fire函數(shù)并不會(huì)因?yàn)樗欢x在obj對(duì)象的內(nèi)部和外部而有任何區(qū)別，也就是說(shuō)在上述隱式綁定的兩種形式下，fire通過(guò)this還是可以訪問(wèn)到obj內(nèi)的a屬性，這告訴我們：
?
1.? this是動(dòng)態(tài)綁定的，或者說(shuō)是在代碼運(yùn)行期綁定而不是在書(shū)寫(xiě)期
2.? 函數(shù)于對(duì)象的獨(dú)立性， this的傳遞丟失問(wèn)題
?
（下面的描述可能帶有個(gè)人的情感傾向而顯得不太嚴(yán)謹(jǐn)，但這是因?yàn)槲蚁Ｍ喿x者盡可能地理解我想表達(dá)的意思）
隱式綁定下，作為對(duì)象屬性的函數(shù)，對(duì)于對(duì)象來(lái)說(shuō)是獨(dú)立的
基于this動(dòng)態(tài)綁定的特點(diǎn)，寫(xiě)在對(duì)象內(nèi)部，作為對(duì)象屬性的函數(shù)，對(duì)于這個(gè)對(duì)象來(lái)說(shuō)是獨(dú)立的。（函數(shù)并不被這個(gè)外部對(duì)象所“完全擁有”）
?
我想表達(dá)的意思是：在上文中，函數(shù)雖然被定義在對(duì)象的內(nèi)部中，但它和“在對(duì)象外部聲明函數(shù)，然后在對(duì)象內(nèi)部通過(guò)屬性名稱的方式取得函數(shù)的引用”，這兩種方式在性質(zhì)上是等價(jià)的（而不僅僅是效果上）
?
定義在對(duì)象內(nèi)部的函數(shù)只是“恰好可以被這個(gè)對(duì)象調(diào)用”而已，而不是“生來(lái)就是為這個(gè)對(duì)象所調(diào)用的”
?
借用下面的隱式綁定中的this傳遞丟失問(wèn)題來(lái)說(shuō)明：
var obj = {a: 1, // a是定義在對(duì)象obj中的屬性 1fire: function () {console.log(this.a)}}var a = 2; // a是定義在全局環(huán)境中的變量 2var fireInGrobal = obj.fire;fireInGrobal(); // 輸出 2
上面這段簡(jiǎn)單代碼的有趣之處在于：這個(gè)于obj中的fire函數(shù)的引用（ fireInGrobal）在調(diào)用的時(shí)候，行為表現(xiàn)（輸出）完全看不出來(lái)它就是在obj內(nèi)部定義的，其原因在于：我們隱式綁定的this丟失了！！從而 fireInGrobal調(diào)用的時(shí)候取得的this不是obj，而是window
上面的例子稍微變個(gè)形式就會(huì)變成一個(gè)可能困擾我們的bug:
var a = 2;var obj = {a: 1, // a是定義在對(duì)象obj中的屬性fire: function () {console.log(this.a)}}function otherFire (fn) {fn();}otherFire(obj.fire); // 輸出2
在上面，我們的關(guān)鍵角色是otherFire函數(shù)，它接受一個(gè)函數(shù)引用作為參數(shù)，然后在內(nèi)部直接調(diào)用，但它做的假設(shè)是參數(shù)fn仍然能夠通過(guò)this去取得obj內(nèi)部的a屬性，但實(shí)際上, this對(duì)obj的綁定早已經(jīng)丟失了，所以輸出的是全局的a的值(2),而不是obj內(nèi)部的a的值（1）
在一串對(duì)象屬性鏈中，this綁定的是最內(nèi)層的對(duì)象
在隱式綁定中，如果函數(shù)調(diào)用位置是在一串對(duì)象屬性鏈中，this綁定的是最內(nèi)層的對(duì)象。如下所示：
var obj = {a: 1,obj2: {a: 2,obj3: {a:3,getA: function () {console.log(this.a)}}}}obj.obj2.obj3.getA(); // 輸出3
?
this的顯式綁定：(call和bind方法)
【故事——線路3】 迪斯（this）穿越來(lái)異世界“伽瓦斯克利”（javascript），經(jīng)過(guò)努力的打拼，積累了一定的財(cái)富，于是他買(mǎi)下了自己的房子
?
上面我們提到了this的隱式綁定所存在的this綁定丟失的問(wèn)題，也就是對(duì)于 “ fireInGrobal = obj.fire”
fireInGrobal調(diào)用和obj.fire調(diào)用的結(jié)果是不同的，因?yàn)檫@個(gè)函數(shù)賦值的過(guò)程無(wú)法把fire所綁定的this也傳遞過(guò)去。這個(gè)時(shí)候，call函數(shù)就派上用場(chǎng)了
?
call的基本使用方式：fn.call(object)
fn是你調(diào)用的函數(shù)，object參數(shù)是你希望函數(shù)的this所綁定的對(duì)象。
fn.call(object)的作用：
1.即刻調(diào)用這個(gè)函數(shù)（fn）
2.調(diào)用這個(gè)函數(shù)的時(shí)候函數(shù)的this指向object對(duì)象
?
例子：
var obj = {a: 1, // a是定義在對(duì)象obj中的屬性fire: function () {console.log(this.a)}}var a = 2; // a是定義在全局環(huán)境中的變量var fireInGrobal = obj.fire;fireInGrobal(); // 輸出2fireInGrobal.call(obj); // 輸出1?
原本丟失了與obj綁定的this參數(shù)的fireInGrobal再次重新把this綁回到了obj
?
但是，我們其實(shí)不太喜歡這種每次調(diào)用都要依賴call的方式，我們更希望：能夠一次性 返回一個(gè)this被永久綁定到obj的fireInGrobal函數(shù)，這樣我們就不必每次調(diào)用fireInGrobal都要在尾巴上加上call那么麻煩了。
?
怎么辦呢？聰明的你一定能想到，在fireInGrobal.call(obj)外面包裝一個(gè)函數(shù)不就可以了嘛！
var obj = {a: 1, // a是定義在對(duì)象obj中的屬性fire: function () {console.log(this.a)}}var a = 2; // a是定義在全局環(huán)境中的變量var fn = obj.fire;var fireInGrobal = function () {fn.call(obj) //硬綁定}fireInGrobal(); // 輸出1
?
如果使用bind的話會(huì)更加簡(jiǎn)單
var fireInGrobal = function () {fn.call(obj) //硬綁定}可以簡(jiǎn)化為：var fireInGrobal = fn.bind(obj);
?
call和bind的區(qū)別是：在綁定this到對(duì)象參數(shù)的同時(shí)：
?
1.call將立即執(zhí)行該函數(shù)
2.bind不執(zhí)行函數(shù)，只返回一個(gè)可供執(zhí)行的函數(shù)
?
【其他】：至于apply，因?yàn)槌耸褂梅椒ǎ蚦all并沒(méi)有太大差別，這里不加贅述
?
在這里，我把顯式綁定和隱式綁定下，函數(shù)和“包含”函數(shù)的對(duì)象間的關(guān)系比作買(mǎi)房和租房的區(qū)別。
?
因?yàn)閠his的緣故
?
在隱式綁定下：函數(shù)和只是暫時(shí)住在“包含對(duì)象“的旅館里面，可能過(guò)幾天就又到另一家旅館住了
在顯式綁定下：函數(shù)將取得在“包含對(duì)象“里的永久居住權(quán)，一直都會(huì)”住在這里“
?
new綁定
【故事】 迪斯（this）組建了自己的家庭，并生下多個(gè)孩子（通過(guò)構(gòu)造函數(shù)new了許多個(gè)對(duì)象）
執(zhí)行new操作的時(shí)候，將創(chuàng)建一個(gè)新的對(duì)象，并且將構(gòu)造函數(shù)的this指向所創(chuàng)建的新對(duì)象?
function foo (a) {this.a = a;}var a1 = new foo (1);var a2 = new foo (2);var a3 = new foo (3);var a4 = new foo (4);console.log(a1.a); // 輸出1console.log(a2.a); // 輸出2console.log(a3.a); // 輸出3console.log(a4.a); // 輸出4
謝謝大家哦！！
