【javascript】函式中的this的四種繫結形式 — 大家準備好瓜子,我要講故事啦~~
阿新 • • 發佈:2020-08-10
目錄
- this的預設繫結
- this的隱式繫結
- 隱式繫結下,作為物件屬性的函式,對於物件來說是獨立的
- 在一串物件屬性鏈中,this繫結的是最內層的物件
- this的顯式繫結:(call和bind方法)
- new繫結
正文
javascript中的this和函式息息相關,所以今天,我就給大家詳細地講述一番:javascript函式中的this 一談到this,很多讓人暈暈乎乎的抽象概念就跑出來了,這裡我就只說最核心的一點——函式中的this總指向呼叫它的物件,接下來的故事都將圍繞這一點展開 (提醒前排的筒子們準備好茶水和西瓜,我要開始講故事啦!!) 【故事】有一個年輕人叫"迪斯"(this),this的預設繫結
【故事——線路1】如果迪斯(this)直到天黑前都沒有找到能收留自己的住所,他眼看就要過上非洲難民的生活, 這時候,一位樂善好施的魔法師村長——window救世主一般地出現了:先住在我家吧! 【正文】 當一個函式沒有明確的呼叫物件的時候,也就是單純作為獨立函式呼叫的時候,將對函式的this使用預設繫結:繫結到全域性的window物件function fire () { console.log(this === window) } fire(); // 輸出true上面的例子我相信對大多數人都很簡單,但有的時候我們把例子變一下就會具有迷惑性:
function fire () { // 我是被定義在函式內部的函式哦! function innerFire() { console.log(this === window) } innerFire(); // 獨立函式呼叫 } fire(); // 輸出true函式 innerFire在一個外部函式fire裡面宣告且呼叫,那麼它的this是指向誰呢? 仍然是window 許多人可能會顧慮於fire函式的作用域對innerFire的影響,但我們只要抓住我們的理論武器——沒有明確的呼叫物件的時候,將對函式的this使用預設繫結:繫結到全域性的window物件,便可得正確的答案了
var obj = { fire: function () { function innerFire() { console.log(this === window) } innerFire(); // 獨立函式呼叫 } } obj.fire(); //輸出 true【注意】在這個例子中, obj.fire()的呼叫實際上使用到了this的隱式繫結,這就是下面我要講的內容,這個例子我接下來還會繼續講解 【總結】 凡事函式作為獨立函式呼叫,無論它的位置在哪裡,它的行為表現,都和直接在全域性環境中呼叫無異 回到頂部
this的隱式繫結
【故事——線路2】 迪斯(this)穿越來異世界“伽瓦斯克利”(javascript)的時候,剛好身上帶了一些錢,於是他找到一個旅館住宿了下來 當函式被一個物件“包含”的時候,我們稱函式的this被隱式繫結到這個物件裡面了,這時候,通過this可以直接訪問所繫結的物件裡面的其他屬性,比如下面的a屬性var obj = { a: 1, fire: function () { console.log(this.a) } } obj.fire(); // 輸出1現在我們需要對平常司空見慣的的程式碼操作做一些更深的思考,首先,下面的這兩段程式碼達到的效果是相同的:
// 我是第一段程式碼 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(); // 輸出1fire函式並不會因為它被定義在obj物件的內部和外部而有任何區別,也就是說在上述隱式繫結的兩種形式下,fire通過this還是可以訪問到obj內的a屬性,這告訴我們: 1. this是動態繫結的,或者說是在程式碼執行期繫結而不是在書寫期 2. 函式於物件的獨立性, this的傳遞丟失問題 (下面的描述可能帶有個人的情感傾向而顯得不太嚴謹,但這是因為我希望閱讀者儘可能地理解我想表達的意思)
隱式繫結下,作為物件屬性的函式,對於物件來說是獨立的
基於this動態繫結的特點,寫在物件內部,作為物件屬性的函式,對於這個物件來說是獨立的。(函式並不被這個外部物件所“完全擁有”) 我想表達的意思是:在上文中,函式雖然被定義在物件的內部中,但它和“在物件外部宣告函式,然後在物件內部通過屬性名稱的方式取得函式的引用”,這兩種方式在性質上是等價的(而不僅僅是效果上) 定義在物件內部的函式只是“恰好可以被這個物件呼叫”而已,而不是“生來就是為這個物件所呼叫的” 借用下面的隱式繫結中的this傳遞丟失問題來說明:var obj = { a: 1, // a是定義在物件obj中的屬性 1 fire: function () { console.log(this.a) } } var a = 2; // a是定義在全域性環境中的變數 2 var fireInGrobal = obj.fire; fireInGrobal(); // 輸出 2上面這段簡單程式碼的有趣之處在於: 這個於obj中的fire函式的引用( fireInGrobal)在呼叫的時候,行為表現(輸出)完全看不出來它就是在obj內部定義的,其原因在於:我們隱式繫結的this丟失了!! 從而 fireInGrobal呼叫的時候取得的this不是obj,而是window 上面的例子稍微變個形式就會變成一個可能困擾我們的bug:
var a = 2; var obj = { a: 1, // a是定義在物件obj中的屬性 fire: function () { console.log(this.a) } } function otherFire (fn) { fn(); } otherFire(obj.fire); // 輸出2在上面,我們的關鍵角色是otherFire函式,它接受一個函式引用作為引數,然後在內部直接呼叫,但它做的假設是引數fn仍然能夠通過this去取得obj內部的a屬性,但實際上, this對obj的繫結早已經丟失了,所以輸出的是全域性的a的值(2),而不是obj內部的a的值(1)
在一串物件屬性鏈中,this繫結的是最內層的物件
在隱式繫結中,如果函式呼叫位置是在一串物件屬性鏈中,this繫結的是最內層的物件。如下所示: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)穿越來異世界“伽瓦斯克利”(javascript),經過努力的打拼,積累了一定的財富,於是他買下了自己的房子 上面我們提到了this的隱式繫結所存在的this繫結丟失的問題,也就是對於 “ fireInGrobal = obj.fire” fireInGrobal呼叫和obj.fire呼叫的結果是不同的,因為這個函式賦值的過程無法把fire所繫結的this也傳遞過去。這個時候,call函式就派上用場了 call的基本使用方式: fn.call(object) fn是你呼叫的函式,object引數是你希望函式的this所繫結的物件。 fn.call(object)的作用: 1.即刻呼叫這個函式(fn) 2.呼叫這個函式的時候函式的this指向object物件 例子:var obj = { a: 1, // a是定義在物件obj中的屬性 fire: function () { console.log(this.a) } } var a = 2; // a是定義在全域性環境中的變數 var fireInGrobal = obj.fire; fireInGrobal(); // 輸出2 fireInGrobal.call(obj); // 輸出1原本丟失了與obj繫結的this引數的fireInGrobal再次重新把this綁回到了obj 但是,我們其實不太喜歡這種每次呼叫都要依賴call的方式,我們更希望:能夠一次性 返回一個this被永久繫結到obj的fireInGrobal函式,這樣我們就不必每次呼叫fireInGrobal都要在尾巴上加上call那麼麻煩了。 怎麼辦呢? 聰明的你一定能想到,在fireInGrobal.call(obj)外面包裝一個函式不就可以了嘛!
var obj = { a: 1, // a是定義在物件obj中的屬性 fire: function () { console.log(this.a) } } var a = 2; // a是定義在全域性環境中的變數 var fn = obj.fire; var fireInGrobal = function () { fn.call(obj) //硬繫結 } fireInGrobal(); // 輸出1如果使用bind的話會更加簡單
var fireInGrobal = function () { fn.call(obj) //硬繫結 }可以簡化為:
var fireInGrobal = fn.bind(obj);call和bind的區別是:在繫結this到物件引數的同時: 1.call將立即執行該函式 2.bind不執行函式,只返回一個可供執行的函式 【其他】:至於apply,因為除了使用方法,它和call並沒有太大差別,這裡不加贅述 在這裡,我把顯式繫結和隱式繫結下,函式和“包含”函式的物件間的關係比作買房和租房的區別。 因為this的緣故 在隱式繫結下:函式和只是暫時住在“包含物件“的旅館裡面,可能過幾天就又到另一家旅館住了 在顯式繫結下:函式將取得在“包含物件“裡的永久居住權,一直都會”住在這裡“ 回到頂部
new繫結
【故事】 迪斯(this)組建了自己的家庭,並生下多個孩子(通過建構函式new了許多個物件) 執行new操作的時候,將建立一個新的物件,並且將建構函式的this指向所建立的新物件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); // 輸出1 console.log(a2.a); // 輸出2 console.log(a3.a); // 輸出3 console.log(a4.a); // 輸出4