JavaScript執行上下文中的this怎么使用

這篇文章主要講解了“JavaScript執行上下文中的this怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript執行上下文中的this怎么使用”吧！

前言

在對象內部的方法中使用對象內部的屬性是一個非常普遍的需求。但是 JavaScript 的作用域機制并不支持這一點，基于這個需求，JavaScript 有另外一套 this 機制。

this 是和執行上下文綁定的，也就是說每個執行上下文中都有一個 this。執行上下文主要分為三種——全局執行上下文、函數執行上下文和 eval 執行上下文，所以對應的 this 也只有這三種——全局執行上下文中的 this、函數中的 this 和 eval 中的 this。

全局執行上下文中的 this

全局執行上下文中的 this 是指向 window 對象的。這也是 this 和作用域鏈的 唯一交點，作用域鏈的最底端包含了 window 對象，全局執行上下文中的 this 也是指向 window 對象。

函數執行上下文中的 this

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

執行這段代碼，打印出來的也是 window 對象，這說明在默認情況下調用一個函數，其執行上下文中的 this 也是指向 window 對象的。

通常情況下，有下面三種方式來設置函數執行上下文中的 this 值:

1. 通過函數的 call 方法設置

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

執行這段代碼，你就能發現 foo 函數內部的 this 已經指向了 bar 對象，因為通過打印 bar 對象，可以看出 bar 的 myName 屬性已經由“極客邦”變為“極客時間”了，同時在全局執行上下文中打印 myName，JavaScript 引擎提示該變量未定義。其實除了 call 方法，你還可以使用 bind 和 apply 方法來設置函數執行上下文中的 this。

2. 通過對象調用方法設置

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

執行這段代碼，你可以看到，最終輸出的 this 值是指向 myObj 的。所以，你可以得出這樣的結論：使用對象來調用其內部的一個方法，該方法的 this 是指向對象本身的。

接下來我們稍微改變下調用方式，把 showThis 賦給一個全局對象，然后再調用該對象，代碼如下所示：

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

執行這段代碼，你會發現 this 又指向了全局 window 對象。

結論：

在全局環境中調用一個函數，函數內部的 this 指向的是全局變量 window。

通過一個對象來調用其內部的一個方法，該方法的執行上下文中的 this 指向對象本身。

3. 通過構造函數中設置

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

當執行 new CreateObj() 的時候，JavaScript 引擎做了如下四件事：

首先創建了一個空對象 tempObj

接著調用 CreateObj.call 方法，并將 tempObj 作為 call 方法的參數，這樣當 CreateObj 的執行上下文創建時，它的 this 就指向了 tempObj 對象

然后執行 CreateObj 函數，此時的 CreateObj 函數執行上下文中的 this 指向了 tempObj 對象

最后返回 tempObj 對象

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

這樣，就通過 new 關鍵字構建好了一個新對象，并且構造函數中的 this 其實就是新對象本身。

this 的設計缺陷以及應對方案

1. 嵌套函數中的 this 不會從外層函數中繼承

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

執行這段代碼后，會發現函數 bar 中的 this 指向的是全局 window 對象，而函數 showThis 中的 this 指向的是 myObj 對象。

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

其實，你也可以使用 ES6 中的箭頭函數來解決這個問題：

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

這是因為 ES6 中的箭頭函數并不會創建其自身的執行上下文，所以箭頭函數中的 this 取決于它的外部函數。

2. 普通函數中的 this 默認指向全局對象 window

在實際工作中，我們并不希望函數執行上下文中的 this 默認指向全局對象，因為這樣會打破數據的邊界，造成一些誤操作。如果要讓函數執行上下文中的 this 指向某個對象，最好的方式是通過 call 方法來顯示調用。

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

感謝各位的閱讀，以上就是“JavaScript執行上下文中的this怎么使用”的內容了，經過本文的學習后，相信大家對JavaScript執行上下文中的this怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！