前言

在對(duì)象內(nèi)部的方法中使用對(duì)象內(nèi)部的屬性是一個(gè)非常普遍的需求。但是 JavaScript 的作用域機(jī)制并不支持這一點(diǎn)，基于這個(gè)需求，JavaScript 有另外一套 this 機(jī)制。

this 是和執(zhí)行上下文綁定的，也就是說每個(gè)執(zhí)行上下文中都有一個(gè) this。執(zhí)行上下文主要分為三種——全局執(zhí)行上下文、函數(shù)執(zhí)行上下文和 eval 執(zhí)行上下文，所以對(duì)應(yīng)的 this 也只有這三種——全局執(zhí)行上下文中的 this、函數(shù)中的 this 和 eval 中的 this。

全局執(zhí)行上下文中的 this

全局執(zhí)行上下文中的 this 是指向 window 對(duì)象的。這也是 this 和作用域鏈的 唯一交點(diǎn)，作用域鏈的最底端包含了 window 對(duì)象，全局執(zhí)行上下文中的 this 也是指向 window 對(duì)象。

函數(shù)執(zhí)行上下文中的 this

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

執(zhí)行這段代碼，打印出來的也是 window 對(duì)象，這說明在默認(rèn)情況下調(diào)用一個(gè)函數(shù)，其執(zhí)行上下文中的 this 也是指向 window 對(duì)象的。

通常情況下，有下面三種方式來設(shè)置函數(shù)執(zhí)行上下文中的 this 值:

1. 通過函數(shù)的 call 方法設(shè)置

let bar = {
  myName: "極客邦",
  test1: 1,
};
function foo() {
  this.myName = "極客時(shí)間";
}
foo.call(bar);
console.log(bar);
console.log(myName);

執(zhí)行這段代碼，你就能發(fā)現(xiàn) foo 函數(shù)內(nèi)部的 this 已經(jīng)指向了 bar 對(duì)象，因?yàn)橥ㄟ^打印 bar 對(duì)象，可以看出 bar 的 myName 屬性已經(jīng)由“極客邦”變?yōu)?ldquo;極客時(shí)間”了，同時(shí)在全局執(zhí)行上下文中打印 myName，JavaScript 引擎提示該變量未定義。其實(shí)除了 call 方法，你還可以使用 bind 和 apply 方法來設(shè)置函數(shù)執(zhí)行上下文中的 this。

2. 通過對(duì)象調(diào)用方法設(shè)置

var myObj = {
  name: "極客時(shí)間",
  showThis: function () {
    console.log(this);
  },
};
myObj.showThis();

執(zhí)行這段代碼，你可以看到，最終輸出的 this 值是指向 myObj 的。所以，你可以得出這樣的結(jié)論：使用對(duì)象來調(diào)用其內(nèi)部的一個(gè)方法，該方法的 this 是指向?qū)ο蟊旧淼摹?/p>

接下來我們稍微改變下調(diào)用方式，把 showThis 賦給一個(gè)全局對(duì)象，然后再調(diào)用該對(duì)象，代碼如下所示：

var myObj = {
  name: "極客時(shí)間",
  showThis: function () {
    this.name = "極客邦";
    console.log(this);
  },
};
var foo = myObj.showThis;
foo();

執(zhí)行這段代碼，你會(huì)發(fā)現(xiàn) this 又指向了全局 window 對(duì)象。

結(jié)論：

在全局環(huán)境中調(diào)用一個(gè)函數(shù)，函數(shù)內(nèi)部的 this 指向的是全局變量 window。

通過一個(gè)對(duì)象來調(diào)用其內(nèi)部的一個(gè)方法，該方法的執(zhí)行上下文中的 this 指向?qū)ο蟊旧怼?/p>

3. 通過構(gòu)造函數(shù)中設(shè)置

function CreateObj() {
  this.name = "極客時(shí)間";
}
var myObj = new CreateObj();

當(dāng)執(zhí)行 new CreateObj() 的時(shí)候，JavaScript 引擎做了如下四件事：

首先創(chuàng)建了一個(gè)空對(duì)象 tempObj

接著調(diào)用 CreateObj.call 方法，并將 tempObj 作為 call 方法的參數(shù)，這樣當(dāng) CreateObj 的執(zhí)行上下文創(chuàng)建時(shí)，它的 this 就指向了 tempObj 對(duì)象

然后執(zhí)行 CreateObj 函數(shù)，此時(shí)的 CreateObj 函數(shù)執(zhí)行上下文中的 this 指向了 tempObj 對(duì)象

最后返回 tempObj 對(duì)象

var tempObj = {};
CreateObj.call(tempObj);
return tempObj;

這樣，就通過 new 關(guān)鍵字構(gòu)建好了一個(gè)新對(duì)象，并且構(gòu)造函數(shù)中的 this 其實(shí)就是新對(duì)象本身。

this 的設(shè)計(jì)缺陷以及應(yīng)對(duì)方案

1. 嵌套函數(shù)中的 this 不會(huì)從外層函數(shù)中繼承

var myObj = {
  name: "極客時(shí)間",
  showThis: function () {
    console.log(this);
    function bar() {
      console.log(this);
    }
    bar();
  },
};
myObj.showThis();

執(zhí)行這段代碼后，會(huì)發(fā)現(xiàn)函數(shù) bar 中的 this 指向的是全局 window 對(duì)象，而函數(shù) showThis 中的 this 指向的是 myObj 對(duì)象。

可以通過一個(gè)小技巧來解決這個(gè)問題，比如在 showThis 函數(shù)中聲明一個(gè)變量 that 用來保存 this，然后在 bar 函數(shù)中使用 that。其實(shí)，這個(gè)方法的的本質(zhì)是把 this 體系轉(zhuǎn)換為了作用域的體系。

其實(shí)，你也可以使用 ES6 中的箭頭函數(shù)來解決這個(gè)問題：

var myObj = {
  name: "極客時(shí)間",
  showThis: function () {
    console.log(this);
    var bar = () => {
      console.log(this);
    };
    bar();
  },
};
myObj.showThis();

這是因?yàn)?ES6 中的箭頭函數(shù)并不會(huì)創(chuàng)建其自身的執(zhí)行上下文，所以箭頭函數(shù)中的 this 取決于它的外部函數(shù)。

2. 普通函數(shù)中的 this 默認(rèn)指向全局對(duì)象 window

在實(shí)際工作中，我們并不希望函數(shù)執(zhí)行上下文中的 this 默認(rèn)指向全局對(duì)象，因?yàn)檫@樣會(huì)打破數(shù)據(jù)的邊界，造成一些誤操作。如果要讓函數(shù)執(zhí)行上下文中的 this 指向某個(gè)對(duì)象，最好的方式是通過 call 方法來顯示調(diào)用。

可以通過設(shè)置 JavaScript 的 嚴(yán)格模式 來解決(在第一行加上 "use strict";)。在嚴(yán)格模式下，默認(rèn)執(zhí)行一個(gè)函數(shù)，其函數(shù)的執(zhí)行上下文中的 this 值是 undefined。

以上就是JavaScript 執(zhí)行上下文的視角詳解this使用的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 執(zhí)行上下文 this的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論