JavaScript 中的 this 全面解析
GitHub地址:https://github.com/SimonZhangITer/MyBlog/issues/12
this的指向問題應該是讓每一個前端er都頭疼的問題,我也一樣,曾經遇到甚至都是一頓亂猜。最近在研讀一些書籍如《你不知道的JavaScript》和《JavaScript語言精粹與程式設計實踐》,讓我對this的問題豁然開朗。故寫下此篇文章,分享一下我的心得。
隱式繫結
關於this,一般來說,誰呼叫了方法,該方法的this就指向誰,如:
function foo(){ console.log(this.a) } var a = 3; var obj = { a: 2, foo: foo }; obj.foo(); // 輸出2,因為是obj呼叫的foo,所以foo的this指向了obj,而obj.a = 2
如果存在多次呼叫,物件屬性引用鏈只有上一層或者說最後一層在呼叫位置中起作用,如:
function foo() { console.log( this.a ) } var obj2 = { a: 42, foo: foo } var obj1 = { a: 2, obj2: obj2 } obj1.obj2.foo(); // 42
隱式丟失
一個最常見的this繫結問題就是被隱式繫結
的函式會丟失繫結物件,也就是說他回應用預設繫結,從而把this繫結到全域性物件或者undefined上,取決於是否是嚴格模式。
function foo() { console.log( this.a ) } var obj1 = { a: 2, foo: foo } var bar = obj1.foo; // 函式別名! var a = "oops, global"; // a是全域性物件的屬性 bar(); // "oops, global"
雖然bar是obj.foo的一個引用,但是實際上,它引用的是foo函式本身,因此此時的bar()其實是一個不帶任何修飾的函式呼叫,因此應用了預設繫結
一個更微妙、更常見並且更出乎意料的情況發生在傳入回撥函式時
:
function foo() { console.log( this.a ) } function doFoo( fn ){ // fn 其實引用的是 foo fn(); // <-- 呼叫位置! } var obj = { a: 2, foo: foo } var a = "oops, global"; // a是全域性物件的屬性 doFoo( obj.foo ); // "oops, global"
引數傳遞其實就是一種隱式賦值
,因此我們傳入函式時也會被隱式賦值,所以結果和上一個例子一樣,如果把函式傳入語言內建的函式而不是傳入自己宣告的函式(如setTimeout等),結果也是一樣的
顯式繫結
簡單的說,就是指定this,如:call、apply、bind、new繫結等
硬繫結
function foo( something ) { console.log( this.a, something) return this.a + something } var obj = { a: 2 } var bar = function() { return foo.apply( obj, arguments) } var b = bar(3); // 2 3 console.log(b); // 5
這裡簡單做一下解釋: 在bar函式中,foo使用apply函式繫結了obj,也就是說foo中的this將指向obj,與此同時,使用arguments(不限制傳入引數的數量)作為引數傳入foo函式中;所以在執行bar(3)的時候,首先輸出obj.a也就是2和傳入的3,然後foo返回了兩者的相加值,所以b的值為5
同樣,本例也可以使用bind
:
function foo( something ) { console.log( this.a, something) return this.a + something } var obj = { a: 2 } var bar = foo.bind(obj) var b = bar(3); // 2 3 console.log(b); // 5
new繫結
在傳統面向類的語言中,使用new初始化類的時候會呼叫類中的建構函式,但是JS中new的機制實際上和麵向類和語言完全不同。
使用new
來呼叫函式,或者說發生建構函式呼叫時,會自動執行下面的操作:
- 建立(或者說構造)一個全新的物件
- 這個新物件會被執行[[Prototype]]連線
- 這個新物件會繫結到函式呼叫的this
- 如果函式沒有返回其他物件,那麼new表示式中的函式會自動返回這個新物件 如:
function foo(a){ this.a = a } var bar = new foo(2); console.log(bar.a); // 2
使用new來呼叫foo(…)時,我們會構造一個新物件並把它繫結到foo(…)呼叫中的this上。new是最後一種可以影響函式呼叫時this繫結行為的方法,我們稱之為new繫結。
this的優先順序
毫無疑問,預設繫結的優先順序是四條規則中最低的,所以我們可以先不考慮它。
隱式繫結和顯式繫結哪個優先順序更高?我們來測試一下:
function foo(a){ 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
可以看到,顯式繫結
優先順序更高,也就是說在判斷時應當先考慮是否可以存在顯式繫結。
現在我們要搞清楚new繫結
和隱式繫結
的優先順序誰高誰低 :
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繫結
比隱式繫結
優先順序高。但是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繫結
修改了硬繫結
中的this,所以new繫結
的優先順序比顯式繫結
更高。
之所以要在new中使用硬繫結函式,主要目的是預先設定函式的一些引數,這樣在使用new進行初始化時就可以只傳入其餘的引數。bind(…)的功能之一就是可以把除了第一個引數(第一個引數用於繫結this)之外的其他引數都傳給下層的函式(這種技術稱為“部分應用”,是“柯里化
”的一種)。舉例來說:
function foo(p1,p2){ this.val = p1 + p2; } // 之所以使用null是因為在本例中我們並不關心硬繫結的this是什麼 // 反正使用new時this會被修改 var bar = foo.bind(null,'p1'); var baz = new bar('p2'); baz.val; // p1p2 }
柯里化:在直覺上,柯里化聲稱“如果你固定某些引數,你將得到接受餘下引數的一個函式”。所以對於有兩個變數的函式yx,如果固定了 y = 2,則得到有一個變數的函式 2x
This在箭頭函式中的應用
箭頭函式不使用this的四種標準規則,而是根據外層(函式或者全域性)作用域來決定this。
我們來看一下箭頭函式的詞法作用域:
function foo() { // 返回一個箭頭函式 return (a) => { // this繼承自foo() console.log(this.a) }; } var obj1 = { a: 2 }; var obj2 = { a: 3 }; var bar = foo.call(obj1); bar.call(obj2); // 2, 不是3!
foo()內部建立的箭頭函式會捕獲呼叫時foo()的this。由於foo()的this繫結到obj1,bar(引用箭頭函式)的this也會繫結到obj1,箭頭函式的繫結無法被修改。(new也不行!)
總結
如果要判斷一個執行中的函式的this繫結,就需要找到這個函式的直接呼叫位置。找到之後就可以順序應用下面這四條規則來判斷this的繫結物件。
- 由new呼叫?繫結到新建立的物件。
- 由call或者apply(或者bind)呼叫?繫結到指定的物件。
- 由上下文物件呼叫?繫結到那個上下文物件。
- 預設:在嚴格模式下繫結到undefined,否則繫結到全域性物件。
相關文章
- 全面解析JavaScript中this指向JavaScript
- 全面理解JavaScript中的thisJavaScript
- 解析javascript中的thisJavaScript
- Java 中泛型的全面解析Java泛型
- 前端技術分享:JavaScript正則全面解析前端JavaScript
- 深入理解JavaScript系列3:全面解析Module模式JavaScript模式
- this 全面解析
- this全面解析
- 非正式全面解析 NebulaGraph 中 Session 管理Session
- 全面解析Java中的String資料型別Java資料型別
- 長沙前端培訓班分享:JavaScript正則全面解析前端JavaScript
- this全面解析(二)
- this 全面解析(一)
- JavaScriptCore全面解析JavaScript
- VLayout全面解析
- iOS動畫全面解析iOS動畫
- find 命令全面解析
- ios 全面解析blockiOSBloC
- 全面解析PHP的糟糕設計PHP
- JavaScript中的預解析(變數提升)介紹JavaScript變數
- JavaScript中的預解析(變數提升)介紹!JavaScript變數
- [Flutter必備]-Dart中的非同步與檔案操作全面解析FlutterDart非同步
- 全面理解物件導向的 JavaScript物件JavaScript
- JavaScript中依賴注入詳細解析JavaScript依賴注入
- Redux 原始碼全面解析Redux原始碼
- Java 註解全面解析Java
- Java註解全面解析Java
- iOS UIButton 全面解析iOSUI
- 全面解析js庫的可用性JS
- 全面解析Flutter Platform Channel原理FlutterPlatform
- Android之Activity全面解析Android
- Python_類全面解析Python
- 結果集 (ResultSet)全面解析
- Linux dd命令全面解析Linux
- 全面解析 qiankun 原始碼原始碼
- 異常處理全面解析
- 這篇文章讓你徹底搞懂ES6中的Class(全面解析)
- 【進階3-1期】JavaScript深入之史上最全–5種this繫結全面解析JavaScript