全面理解JavaScript中的this

棕小漸發表於2017-12-04
JavaScript

this在JavaScript中似乎可以視而不見，但不去正視它學到的就只是殘缺的JS。拋開這些“形而上”的意義不說，從實用性及程式碼簡潔展示this的不可或缺的地位，舉例子：

function identifyUser () {
  return this.name.toUpperCase();
}

let obj1 = {
  name: leeper;
}

let obj2 = {
  name: Sandman;
}

identifyUser.call(obj1) // -> LEEPER
identifyUser.call(obj2) // -> SANDMAN
複製程式碼

如果不使用this，就需要給identifyUser()顯示傳入一個上下文物件，但隨著使用模式的增加，顯示傳遞上下文物件成了”噩夢“，讓程式碼也變得越來越混亂。為了將API設計得更加簡潔並易於複用，就必須正視this。

什麼是this

如果在任何函式體外部，無論是否在嚴格模式，this都指代全域性物件。這裡著重討論的是函式體內部的this。JavaScript的this總是指向一個物件，具體指向哪個物件是在執行時基於函式的執行環境動態繫結的，而非函式被宣告時的環境。

呼叫方式

在函式內部，this的繫結和函式宣告的位置沒有任何關係，只取決於函式的呼叫方式：

  • 作為普通函式呼叫
    this的值預設指向全域性物件：
let a = 233;
function foo () {
  console.log(this.a);
}
foo() // -> 233
複製程式碼

但在嚴格模式下，this預設為undefined；

  • 作為物件的方法呼叫
    函式呼叫時會繫結到上下文物件：
let obj = {
  a: 233,
  foo: foo
};
function foo () {
  console.log(this.a);
}
obj.foo(); // -> 233
複製程式碼

物件引用鏈中只有在最後一層呼叫位置中起作用：

function foo () {
  console.log(this.a);
}
let obj1 = {
  a: 233,
  foo: foo
};
let obj2 = {
  a: 2333,
  obj1: obj1
}
obj2.obj1.foo() // -> 233
複製程式碼
  • bind方法
    在講bind之前不得不先提兩種繫結丟失的情況：
// 第一種

function foo () {
  console.log(this.a);
}
var obj = {
  a: 233,
  foo: foo
};
var bar = obj.foo;
var a = 'global a';
bar(); // -> 'global a'

// 雖然bar是obj.foo的一個引用，但實際上，它引用的foo函式本身，作為普通函式直接呼叫，非嚴格模式下，this指向全域性物件。
複製程式碼
// 第二種
function foo () {
  console.log(this.a);
}
var obj = {
  a: 233,
  foo: foo
};
var a = "global a";
function doFn(fn) {
  fn();
}
doFn(obj.foo); // -> 'global a'
複製程式碼
function foo () {
  console.log(this.a);
}
var obj = {
  a: 233,
  foo: foo
};
var a = "global a";
setTimeout(obj.foo, 0) // -> 'global a'
複製程式碼

引數傳入的是函式，作為普通函式呼叫，會導致被傳入的這個函式this繫結丟失，this會指向預設的全域性物件。 bind方法可以解決上this繫結丟失的情況：

function foo () {
  console.log(this.a);
}
var obj = {
  a: 233,
  foo: foo
};
var a = "global a";
var bar = foo.bind(obj);
function doFn (fn) {
  fn();
}
doFn(bar); // -> 233
複製程式碼

fn.bind(某個物件)會建立一個與fn具有相同函式體和作用域的新函式，在這個新函式中，this將永久地繫結到了bind的第一個引數，無論這個函式如何被呼叫。

  • call與apply方法
    這兩個方法的第一個引數是一個物件，是給this準備的，接著在呼叫函式時將其繫結到this。
let obj = {
  a:233
};
function foo () {
  console.log(this.a);
}
foo.call(obj) // -> 233
複製程式碼

this繫結角度看，apply方法與call方法，區別在於其他引數上。

  • 作為建構函式呼叫
    使用new來呼叫函式時，會自動執行下面操作：
    • 構造一個全新的物件；
    • 構造出的新物件會被執行[[Prototype]]連線；
    • 新物件會繫結到函式呼叫的this;
    • 如果函式沒有返回其他物件，那麼表示式中的函式呼叫會自動返回這個新物件。
function foo (a) {
 this.a = a;
}
var bar = new foo(233);
console.log(bar.a); // -> 233
複製程式碼

使用new來呼叫foo()時，會構造一個新物件並把它繫結到foo()呼叫中的this上。

  • 作為DOM事件處理函式
    當函式被用作事件處理函式時，它的this會指向觸發事件的元素。
  • 箭頭函式
    箭頭函式會繼承外層函式呼叫的this繫結，在全域性作用域中則會繫結到全域性物件上。
function foo () {
  setTimeout(() => {
    console.log('a', this.a);
    }, 0);
}
var a = 'global a';
foo.call({a: 233}); // -> 233
複製程式碼

如果是普通函式，執行時this應該指向全域性物件，輸出的'global a'，而箭頭函式this繼承它的外層foo函式的this繫結，由於使用call方法將foo函式的this繫結指向{a: 233}，所以輸出233。

根據優先順序判斷常見this

  • 函式是否在new中呼叫？如果是的話，this繫結的是新建立的物件；
  • 函式是否通過call, apply或者bind繫結呼叫？如果是，this繫結的是指定的物件；
  • 函式是否在某個上下文物件中呼叫（ var bar = obj.foo() ）？如果是，this繫結到那個上下文物件；
  • 如果都不是，考慮是否是預設繫結，繫結到全域性物件。如果是在嚴格模式下，則繫結到undefined。

總結

  • 在任何函式體外部，無論是否在嚴格模式，this都指代全域性物件。
  • 在函式內部，this的繫結和函式宣告的位置沒有任何關係，只取決於函式的呼叫方式。
  • 箭頭函式會繼承外層函式呼叫的this繫結，在全域性作用域中則會繫結到全域性物件上。

相關文章