JavaScript 中的 this 簡(jiǎn)單規(guī)則

幾條規(guī)則確定函數(shù)里的 this 是什么。

想確定 this 是什么其實(shí)非常簡(jiǎn)單?？傮w的規(guī)則是，通過(guò)檢查它的調(diào)用位置，在函數(shù)被調(diào)用的的時(shí)候確定 this。它遵循下面這些規(guī)則，接下來(lái)以優(yōu)先級(jí)順序說(shuō)明。

規(guī)則

1、如果在調(diào)用函數(shù)時(shí)使用 new 關(guān)鍵字，那么函數(shù)里的 this 就是一個(gè)全新的對(duì)象。

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2、如果使用 apply、call 或者 bind 調(diào)用函數(shù)，那么函數(shù)里的 this 就是作為參數(shù)傳進(jìn)去的對(duì)象。

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3、如果函數(shù)作為一個(gè)方法調(diào)用，就是說(shuō)如果使用點(diǎn)符號(hào)調(diào)用函數(shù)，那么 this 就是擁有這個(gè)函數(shù)作為屬性的對(duì)象。換句話說(shuō)，當(dāng)一個(gè)點(diǎn)在函數(shù)調(diào)用的左側(cè)時(shí)，this 就是這個(gè)點(diǎn)左側(cè)的那個(gè)對(duì)象。

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4、如果函數(shù)作為一個(gè)純粹的函數(shù)調(diào)用，也就是說(shuō)，它在沒(méi)有上述任何條件的情況下被調(diào)用，那么 this 就是全局對(duì)象。在瀏覽器里，就是 window 對(duì)象。

function fn() {
  console.log(this);
}
// 如果在瀏覽器里調(diào)用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

注意這個(gè)規(guī)則其實(shí)和第三個(gè)規(guī)則是一樣的，區(qū)別在于沒(méi)有聲明為方法的函數(shù)會(huì)自動(dòng)成為全局對(duì)象 window 的屬性。因此，這其實(shí)是一個(gè)隱式的方法調(diào)用。當(dāng)我們調(diào)用 fn()，其實(shí)就會(huì)被瀏覽器理解為 window.fn()，所以 this 就是 window。

console.log(fn === window.fn); // -> true

5、如果上述規(guī)則有多個(gè)適用，那么優(yōu)先級(jí)更高的就會(huì)設(shè)置 this 值。

6、如果是 ES2015 里的箭頭函數(shù)，那么它將忽略上述所有規(guī)則，并在創(chuàng)建的時(shí)候接收包含它的作用域作為 this 的值。想確定 this 具體是什么的話，只需從創(chuàng)建箭頭函數(shù)那里往上一行，看看那兒的 this 是什么，箭頭函數(shù)里的 this 值和它一樣。

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

看回第三個(gè)規(guī)則，當(dāng)我們調(diào)用 obj.createArrowFn() 的時(shí)候，createArrowFn 里的 this 是 obj，因?yàn)檫@是方法調(diào)用。因此，obj 會(huì)在 arrowFn 里綁定到 this 上。如果我們?cè)谌肿饔糜騽?chuàng)建一個(gè)箭頭函數(shù)，那么 this 值就會(huì)是 window。

應(yīng)用規(guī)則

讓我們來(lái)看一個(gè)代碼示例，并應(yīng)用這些規(guī)則。嘗試一下看能否弄清楚不同的函數(shù)調(diào)用下，this 是什么。

確定應(yīng)用了哪條規(guī)則

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis() 屬于第三條規(guī)則，方法調(diào)用。另一方面，print() 屬于第四條規(guī)則，純粹的函數(shù)調(diào)用。對(duì)于 print() 來(lái)說(shuō)，我們?cè)谡{(diào)用的時(shí)候沒(méi)有使用 new、bind/call/apply 或者點(diǎn)符號(hào)，所以它對(duì)應(yīng)了規(guī)則四，this 就是全局對(duì)象 window。

當(dāng)適用多個(gè)規(guī)則的時(shí)候

當(dāng)適用多個(gè)規(guī)則的時(shí)候，使用列表里更高優(yōu)先級(jí)的規(guī)則。

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

如果規(guī)則二和規(guī)則三同時(shí)適用，那么規(guī)則二占優(yōu)。

obj1.print.call(obj2); // -> { value: 17 }

如果規(guī)則一和規(guī)則三同時(shí)適用，那么規(guī)則一占優(yōu)。

new obj1.print(); // -> {}

庫(kù)

有些庫(kù)有時(shí)候會(huì)故意將 this 值綁定到某些函數(shù)里。而通常會(huì)在函數(shù)里將最有用的值綁定到 this 上使用。舉個(gè)例子，jQuery 把 this 綁定到 DOM 元素上，在回調(diào)中觸發(fā)一個(gè)事件。如果某個(gè)庫(kù)出現(xiàn)一個(gè)不太符合上述規(guī)則的 this 值，那么請(qǐng)仔細(xì)閱讀這個(gè)庫(kù)的文檔，它很有可能使用 bind 綁定了。

總結(jié)

以上所述是小編給大家介紹的JavaScript 中的 this 簡(jiǎn)單規(guī)則，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！