前言

對(duì)于許多JavaScript的初學(xué)者來(lái)說(shuō)，this是一個(gè)讓人又愛(ài)又恨的關(guān)鍵詞，它的指向靈活多變，稍有不慎就會(huì)出現(xiàn)意想不到的結(jié)果。但是掌握this的綁定規(guī)則卻是寫(xiě)出優(yōu)雅，可復(fù)用的代碼的必經(jīng)之路。所以，本文將帶你系統(tǒng)梳理this的來(lái)龍去脈，徹底搞懂它的工作機(jī)制。

一.為什么要有this

this 是 JS 中的一個(gè)關(guān)鍵字，它提供了一種更優(yōu)雅的方式隱式的傳遞一個(gè)對(duì)象的引用，可以讓代碼更簡(jiǎn)潔易于復(fù)用。

// 優(yōu)雅的 this
const alice = {
  name: 'Alice',
  age: 25,
  introduce() {
    console.log(this.name);
  }
};
alice.introduce(); // this隱式傳遞了 alice 對(duì)象

二. this 可以出現(xiàn)在哪里？

1.全局

在瀏覽器中，全局中 this 指向 window 對(duì)象。

console.log( this === window);// true

2.函數(shù)體內(nèi)

函數(shù)內(nèi)部的 this 指向取決于如何調(diào)用，而不是在哪里定義，這也是 this 最復(fù)雜也是最靈活的地方。

三.this 的綁定規(guī)則

1.默認(rèn)綁定

當(dāng)函數(shù)獨(dú)立調(diào)用時(shí)，函數(shù)中的 this 指向 window 對(duì)象

function foo(){
  console.log(this);
}

foo(); // window

2.隱式綁定

當(dāng)一個(gè)函數(shù)被一個(gè)上下文對(duì)象所擁有，并被該對(duì)象調(diào)用，函數(shù)中的 this 指向該對(duì)象。

const obj = {
  name: 'obj',
  say() {
    console.log(this.name);
  }
};
obj.say(); // 'obj'

當(dāng)一個(gè)函數(shù)被多層對(duì)象調(diào)用，函數(shù)中的 this 指向最近的那個(gè)對(duì)象。

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

var oo = {
  a: 2,
  foo: obj,
};

oo.foo.foo(); // 1  離 foo 最近的對(duì)象是 obj 所以 this 指向 obj 對(duì)象

3.顯示綁定

JavaScript中提供了三種方法 call, apply 和 bind，可以強(qiáng)制指定函數(shù)中的this。

• call :立即調(diào)用函數(shù)，參數(shù)逐個(gè)傳遞。
  fn.call(obj, x, y)

• apply:立即調(diào)用函數(shù)，參數(shù)以數(shù)組方式傳遞。
  fn.apply(obj, [x, y]

• bind:返回一個(gè)新的函數(shù)。
  fn.bind(obj, x, y)()

4.new 綁定

當(dāng)一個(gè)函數(shù)被用作構(gòu)造函數(shù)時(shí)， this 會(huì)指向新創(chuàng)建的那個(gè)實(shí)例對(duì)象。new的過(guò)程如下：

1. 創(chuàng)建一個(gè)全新的空對(duì)象。

2. 將這個(gè)空對(duì)象的 __proto__ 指向構(gòu)造函數(shù)的 prototype；

3. 將構(gòu)造函數(shù)內(nèi)的 this 綁定到該新對(duì)象；

4. 執(zhí)行構(gòu)造函數(shù)代碼；

5. 如果構(gòu)造函數(shù)沒(méi)有返回對(duì)象，則返回這個(gè)新對(duì)象。

function Person(name) {
  this.name = name;
  this.say = function() {
    console.log(this.name);
  };
}
const alice = new Person('Alice');
alice.say(); // 'Alice'，this 指向 alice 實(shí)例

四.箭頭函數(shù)中的 this

箭頭函數(shù)沒(méi)有 this 這個(gè)概念，所以寫(xiě)在箭頭函數(shù)中的 this ，是它外層非箭頭函數(shù)的。

function foo() {
  var fn = () => {
    this.a = 2;
  };
  fn();
}

var obj = {
  a: 1,
  bar: foo,
};
obj.bar(); // this 指向的是 obj 對(duì)象，所以相當(dāng)于最后執(zhí)行obj.a = 2,obj 對(duì)象中 a 的值變?yōu)?2
console.log(obj);  //obj { a: 2, bar: foo}

注意：如果箭頭函數(shù)外面也沒(méi)有普通函數(shù)，那么 this 指向全局

const fn = () => {
  console.log(this); // window
};
fn();

五.一表總結(jié)

到此這篇關(guān)于從綁定規(guī)則到箭頭函數(shù)徹底講解JavaScript中this的文章就介紹到這了,更多相關(guān)JS中this綁定規(guī)則到箭頭函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論