JS中this的4種繫結規則

前端攻城小牛發表於2018-10-16
JS

原文出自：https://segmentfault.com/a/1190000016678888

this

  • ES6中的箭頭函式採用的是詞法作用域。
  • 為什麼要使用this：使API設計得更簡潔且易於複用。
  • this即不指向自身，也不指向函式的詞法作用域。
  • this的指向只取決於函式的呼叫方式
JS中this的4種繫結規則

Java Android 原始碼

this繫結規則

  • new > 顯示繫結 > 隱式繫結 > 預設繫結

預設繫結

  • 當獨立函式呼叫時，不管是否在呼叫棧中，this都指向全域性物件（瀏覽器中為window）
  • 嚴格模式下，不能將全域性物件用於預設繫結。
var a = 2;
function foo(){
 console.log(this.a);
}
function bar(){
 var a = 5;
 foo();
}
bar(); // 2
複製程式碼

隱式繫結

  • 當函式引用有上下文物件時，隱式繫結規則會把函式呼叫中的this繫結到這個上下文物件。
  • 物件屬性引用鏈中只有最後一層在呼叫位置中起作用。
  • 要求：物件內部必須包含一個指向函式的屬性，該物件可通過這個屬性間接引用函式。
function foo() {
 console.log( this.a );
}
var obj2 = {
 a: 42,
 foo: foo
};
var obj1 = {
 a: 2,
 obj2: obj2
};
obj1.obj2.foo(); // 42
複製程式碼
  • 隱式丟失
function foo() {
 console.log( this.a );
}
var obj = {
 a: 2,
 foo: foo
};
var bar = obj.foo; // 這裡bar將引用foo函式本身，所以不帶有函式物件的上下文
var a = "oops, global"; // a是全域性物件的屬性
bar(); // "oops, global"
複製程式碼

和回撥函式的情況下（引數傳遞時的隱式賦值）

function foo() {
 console.log( this.a );
}
function doFoo(fn) {
 // 引數傳遞時，相當於fn = obj.foo，就和上個例子一樣了
 fn(); // <-- call-site!
}
var obj = {
 a: 2,
 foo: foo
};
var a = "oops, global"; // `a` also property on global object
doFoo( obj.foo ); // "oops, global"
複製程式碼

顯式繫結

  • 採用call()和apply()，通過傳入一個物件（若為基本型別，會被封裝函式轉為物件—裝箱），將this繫結到該物件。
  • 硬繫結
function foo() {
 console.log( this.a );
}
var obj = {
 a: 2
};
var bar = function() {
 foo.call( obj );
};
bar(); // 2
setTimeout( bar, 100 ); // 2
// 硬繫結後bar無論怎麼呼叫，都不會影響foo函式的this繫結
bar.call( window ); // 2
複製程式碼

硬繫結的典型應用是如下的包裹函式：

function foo(something) {
 console.log( this.a, something );
 return this.a + something;
}
var obj = {
 a: 2
};
var bar = function() {
 return foo.apply( obj, arguments ); // 將obj物件硬編碼進去
};
var b = bar( 3 ); // 2 3
console.log( b ); // 5
複製程式碼

即將內部函式用apply硬繫結到某個物件，無論怎麼呼叫這個包裹函式，都不會影響內部函式的this。

bind輔助函式如下：

function foo(something) {
 console.log( this.a, something );
 return this.a + something;
}
// simple `bind` helper
function bind(fn, obj) {
 return function() {
 return fn.apply( obj, arguments ); // 利用引數將obj傳入進去
 };
}
var obj = {
 a: 2
};
var bar = bind( foo, obj ); // bind( foo, obj )會返回一個包裹函式
var b = bar( 3 ); // 2 3
console.log( b ); // 5
複製程式碼

總結：上述包裹函式，想要包裹其他函式，只能一個一個重複寫，硬編碼的方式導致不能被重用，當某種功能需要多次重複使用時，將其抽象出來，成為函式。

new繫結

  • 任何函式都可能被用作建構函式，當函式被new操作符“構造呼叫”時，會執行下面操作：

1. 建立一個新物件（若該函式不是JS內建的，則建立一個新的Object物件）；

2. 將this繫結到這個物件；

3. 執行建構函式中的程式碼（為這個新物件新增屬性）；

4. 若函式沒有返回其他物件，則自動返回這個新物件；若函式有return返回的是非物件，則還是自動返回這個新物件，即覆蓋那個非物件。

function foo(a) {
 this.a = a;
}
var bar = new foo( 2 );
console.log( bar.a ); // 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，由於p.foo = o.foo的返回值是目標函式的引用，所以呼叫位置是foo()，而不是p.foo()或o.foo()
複製程式碼
  • 箭頭函式：不使用這四個this規則，根據詞法作用域來決定this。
function foo() {
 // 返回一個箭頭函式
 return (a) => {
 // `this` here is lexically adopted from `foo()`
 console.log( this.a );
 };
}
var obj1 = {
 a: 2
};
var obj2 = {
 a: 3
};
// foo()不是箭頭函式，他的this被繫結到obj1
var bar = foo.call( obj1 ); // foo.call( obj1 )返回箭頭函式，所以bar為箭頭函式
bar.call( obj2 ); // 2! 箭頭函式的this無法被修改，new也不行
複製程式碼

如下為和箭頭函式一樣的模式：

function foo() {
 var self = this; // lexical capture of `this`
 setTimeout( function(){
 console.log( self.a );
 }, 100 );
}
var obj = {
 a: 2
};
foo.call( obj ); // 2複製程式碼


相關文章