【前端工程師手冊】JavaScript之this的筆記

roland_reed 發布于2019-08-22 17:32 / 1873人閱讀

摘要：函數別名是全局對象的屬性顯式綁定一個小栗子和第一個參數是一個對象，它們會把這個對象綁定到，接著在調用函數時指定這個。

今天總結一下this。

誤解

熟悉Java或者其他語言的同學看到this會想當然的認為this指向函數本身，然而在JavaScript中并不是這樣子。

function func(){
    console.log(this.index)
}
func.index  = 123
func() // undefined

結果很顯然，this并不是指向函數自身。

this到底是什么

那么this到底是什么呢？
當一個函數被調用時，會創建一個活動記錄(有時候也稱為執行上下文)。這個記錄會包含函數在哪里被調用(調用棧)、函數的調用方法、傳入的參數等信息。this 就是記錄的其中一個屬性，會在函數執行的過程中用到。
長話短說：this就是函數執行上下文的一個屬性
this 實際上是在函數被調用時發生的綁定，它指向什么完全取決于函數在哪里被調用。

this的綁定規則

默認綁定
舉個栗子：

   function foo() {
       console.log( this.a );
   }
   var a = 2; 
   foo(); // 2

當調用 foo() 時，this.a 被解析成了全局變量 a。為什么?因為在本例中，函數調用時應用了 this 的默認綁定，因此 this 指向全局對象。
那么我們怎么知道這里應用了默認綁定呢?可以通過分析調用位置來看看 foo() 是如何調用的。在代碼中，foo() 是直接使用不帶任何修飾的函數引用進行調用的，因此只能使用默認綁定，無法應用其他規則。
但是此時如果使用了嚴格模式(strict mode)，那么全局對象將無法使用默認綁定，因此 this 會綁定到 undefined：

   function foo() { 
       "use strict";
        console.log( this.a );
    }

   var a = 2;
   foo(); // TypeError: this is undefined

隱式綁定

   function foo() { 
       console.log( this.a );
   }
   var obj = { 
       a: 2,
       foo: foo 
   };
   obj.foo(); // 2

調用位置會使用 obj 上下文來引用函數，因此你可以說函數被調用時 obj 對象“擁有”或者“包含”它。
當 foo() 被調用時，它的落腳點確實指向 obj 對象。當函數引用有上下文對象時，隱式綁定規則會把函數調用中的 this 綁定到這個上下文對象。因為調用 foo() 時 this 被綁定到 obj，因此 this.a 和 obj.a 是一樣的。
這種綁定方式的反面即是this的隱形丟失。

   function foo() { 
       console.log( this.a );
   }
   var obj = { 
       a: 2,
       foo: foo 
   };
   var bar = obj.foo; // 函數別名!
   var a = "oops, global"; // a 是全局對象的屬性
   bar(); // "oops, global"

顯式綁定
一個小栗子：
call和apply

   function foo() { 
       console.log( this.a );
   }
   var obj = { 
       a:2
   };
   foo.call( obj ); // 2

第一個參數是一個對象，它們會把這個對象綁定到 this，接著在調用函數時指定這個 this。因為你可以直接指定 this 的綁定對象，因此我們稱之為顯式綁定。
bind

   function foo(something) { 
       console.log( this.a, something ); 
       return this.a + something;
   }
   function bind(fn, obj) {
       return function() {
           return fn.apply( obj, arguments );
       };
   }
   var obj = { 
       a:2
   };
   var bar = bind( foo, obj );
   var b = bar( 3 ); // 2 3
   console.log( b ); // 5

由于硬綁定是一種非常常用的模式，所以在 ES5 中提供了內置的方法 Function.prototype.bind
bind(..) 會返回一個硬編碼的新函數，它會把參數設置為 this 的上下文并調用原始函數

new綁定
使用 new 來調用函數，或者說發生構造函數調用時，會自動執行下面的操作。

創建(或者說構造)一個全新的對象。

這個新對象會被執行[[原型]]連接。

這個新對象會綁定到函數調用的this。

如果函數沒有返回其他對象，那么new表達式中的函數調用會自動返回這個新對象。
例如：

  function foo(a) { 
      this.a = a;
  }
  var bar = new foo(2); 
  console.log( bar.a ); // 2

四種綁定規則的優先級

首先，默認綁定的優先級是四條規則中最低的

function foo() { 
    console.log( this.a );
}
var obj1 = { 
    a: 2,
    foo: foo 
};
var obj2 = { 
    a: 3,
    foo: foo 
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2

結論：顯式綁定 > 隱式綁定

function foo(something) { 
    this.a = something;
}
var obj1 = { 
    foo: foo
};
var obj2 = {};
obj1.foo( 2 );
console.log( obj1.a ); // 2
obj1.foo.call( obj2, 3 );
console.log( obj2.a ); // 3

var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2 
console.log( bar.a ); // 4

結論：new 綁定 > 隱式綁定優先級

function foo(something) { 
    this.a = something;
}
var obj1 = {};
var bar = foo.bind( obj1 ); 
bar( 2 );
console.log( obj1.a ); // 2
var baz = new bar(3);
console.log( obj1.a ); // 2 
console.log( baz.a ); // 3

結論：new綁定 > es原生bind綁定
總結判斷this的方法：

函數是否在new中調用(new綁定)?如果是的話this綁定的是新創建的對象。var bar = new foo()

函數是否通過call、apply(顯式綁定)或者硬綁定調用?如果是的話，this綁定的是指定的對象。var bar = foo.call(obj2)

函數是否在某個上下文對象中調用(隱式綁定)?如果是的話，this 綁定的是那個上下文對象。var bar = obj1.foo()

如果都不是的話，使用默認綁定。如果在嚴格模式下，就綁定到undefined，否則綁定到全局對象。var bar = foo()

參考資料：
你不知道的JavaScript-上卷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95274.html

【前端工程師手冊】this拾遺之關于箭頭函數的種種

摘要：之前總結了的一些常見綁定情況前端工程師手冊之的筆記，但是還有一些沒有說到，今天繼續學習一下。參考資料箭頭函數你不知道的上卷之前總結了this的一些常見綁定情況（【前端工程師手冊】JavaScript之this的筆記），但是還有一些沒有說到，今天繼續學習一下。 es6箭頭函數先說結論：箭頭函數沒有自己的this，它是根據外層(函數或者全局，后面會說到箭頭函數作為某個對象的方法時的情況...

oogh 2019-08-26 11:55 評論0 收藏0
【前端工程師手冊】JavaScript之原型

摘要：又是一個比較重要的知識點原型。且和指向了同一個對象。可以是使用做什么創建對象的數據共享把一些實例共享的屬性和方法放在原型上，節約空間。基于原型鏈的委托繼承這個原型繼承的關系可以用圖來表示參考資料深入之從原型到原型鏈強大的原型和原型鏈又是一個比較重要的知識點——原型（prototype）。一個例子 function F() {} var f = new F() F.prototype...

Darkgel 2019-08-22 17:29 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
7月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 評論0 收藏0
前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

Lowky 2019-08-22 11:22 評論0 收藏0