深入淺出 JavaScript 中的 this

来源:https://www.cnblogs.com/gopal/archive/2022/09/19/16707377.html
-Advertisement-
Play Games

筆者最近在看 你不知道的JavaScript上捲，裡面關於 this 的講解個人覺得非常精彩。JavaScript 中的 this 算是一個核心的概念，有一些同學會對其有點模糊和小恐懼，究其原因，現在對 this 討論的文章很多，讓我們覺得 this 無規律可尋，就像一個幽靈一樣 如果你還沒弄懂 t ...


筆者最近在看 你不知道的JavaScript上捲，裡面關於 this 的講解個人覺得非常精彩。JavaScript 中的 this 算是一個核心的概念，有一些同學會對其有點模糊和小恐懼，究其原因，現在對 this 討論的文章很多，讓我們覺得 this 無規律可尋，就像一個幽靈一樣

如果你還沒弄懂 this，或者對它比較模糊，這篇文章就是專門為你準備的，如果你相對比較熟悉了，那你也可以當做複習鞏固你的知識點

本篇文章，算是一篇讀書筆記，當然也加上了很多我的個人理解，我覺得肯定對大家有所幫助

執行上下文

在理解 this 之前，我們先來看下什麼是執行上下文

簡而言之，執行上下文是評估和執行 JavaScript 代碼的環境的抽象概念。每當 Javascript 代碼在運行的時候，它都是在執行上下文中運行

JavaScript 中有三種執行上下文類型

  • 全局執行上下文 — 這是預設或者說基礎的上下文，任何不在函數內部的代碼都在全局上下文中。它會執行兩件事：創建一個全局的 window 對象（瀏覽器的情況下），並且設置 this 的值等於這個全局對象。一個程式中只會有一個全局執行上下文
  • 函數執行上下文 — 每當一個函數被調用時, 都會為該函數創建一個新的上下文。每個函數都有它自己的執行上下文，不過是在函數被調用時創建的。函數上下文可以有任意多個
  • eval 函數執行上下文 — 執行在 eval 函數內部的代碼也會有它屬於自己的執行上下文，但由於 JavaScript 開發者並不經常使用 eval，所以在這裡我不會討論它

這裡我們先得出一個結論，非嚴格模式和嚴格模式中 this 都是指向頂層對象（瀏覽器中是window）

console.log(this === window); // true
'use strict'
console.log(this === window); // true
this.name = 'vnues';
console.log(this.name); // vnues

後面我們的討論更多的是針對函數執行上下文

this 到底是什麼？為什麼要用 this

this 是在運行時進行綁定的，並不是在編寫時綁定，它的上下文取決於函數調 用時的各種條件

牢記：this 的綁定和函數聲明的位置沒有任何關係，只取決於函數的調用方式

當一個函數被調用時，會創建一個活動記錄(有時候也稱為執行上下文)。這個記錄會包 含函數在哪裡被調用(調用棧)、函數的調用方法、傳入的參數等信息。this 就是記錄的 其中一個屬性，會在函數執行的過程中用到

看個實例，理解為什麼要用 this，有時候，我們需要實現類似如下的代碼：

function identify(context) {
  return context.name.toUpperCase();
}
function speak(context) {
  var greeting = "Hello, I'm " + identify(context);
  console.log(greeting);
}
var me = {
  name: "Kyle"
};
speak(me); //hello, 我是 KYLE

這段代碼的問題，在於需要顯示傳遞上下文對象，如果代碼越來越複雜，這種方式會讓你的代碼看起來很混亂，用 this 則更加的優雅

var me = {
  name: "Kyle"
};

function identify() {
  return this.name.toUpperCase();
}
function speak() {
  var greeting = "Hello, I'm " + identify.call(this);
  console.log(greeting);
}
speak.call(me); // Hello, 我是 KYLE

this 的四種綁定規則

下麵我們來看在函數上下文中的綁定規則，有以下四種

  • 預設綁定
  • 隱式綁定
  • 顯式綁定
  • new 綁定

預設綁定

最常用的函數調用類型：獨立函數調用，這個也是優先順序最低的一個，此事 this 指向全局對象。註意：如果使用嚴格模式(strict mode)，那麼全局對象將無法使用預設綁定，因此 this 會綁定 到 undefined，如下所示

var a = 2;  //  變數聲明到全局對象中
function foo() {
  console.log(this.a);   // 輸出 a
}

function bar() {
  'use strict';
  console.log(this); // undefined
}
foo();
bar();

隱式綁定

還可以我們開頭說的：this 的綁定和函數聲明的位置沒有任何關係，只取決於函數的調用方式

先來看一個例子：

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

當調用 obj.foo() 的時候，this 指向 obj 對象。當函數引用有上下文對象時，隱式綁定規則會把函數調用中的 this 綁定到這個上下文對象。因為調 用 foo() 時 this 被綁定到 obj，因此 this.a 和 obj.a 是一樣的

記住：對象屬性引用鏈中只有最頂層或者說最後一層會影響調用位置

    function foo() {
      console.log(this.a);
    }
    var obj2 = {
      a: 42,
      foo: foo
    };
    var obj1 = {
      a: 2,
      obj2: obj2
    };
    obj1.obj2.foo(); // 42

間接引用

另一個需要註意的是，你有可能(有意或者無意地)創建一個函數的“間接引用”，在這 種情況下，調用這個函數會應用預設綁定規則

function foo() {
  console.log(this.a);
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)(); // 2

另一個需要註意的是，你有可能(有意或者無意地)創建一個函數的“間接引用”，在這 種情況下，調用這個函數會應用預設綁定規則

賦值表達式 p.foo = o.foo 的返回值是目標函數的引用，因此調用位置是 foo() 而不是 p.foo() 或者 o.foo()。根據我們之前說過的，這裡會應用預設綁定

顯示綁定

在分析隱式綁定時，我們必須在一個對象內部包含一個指向函數的屬性，並通過這個屬性間接引用函數，從而把 this 間接(隱式)綁定到這個對象上。 那麼如果我們不想在對象內部包含函數引用，而想在某個對象上強制調用函數，該怎麼
做呢?

Javascript 中提供了 apply 、call 和 bind 方法可以讓我們實現

不同之處在於，call() 和 apply() 是立即執行函數，並且接受的參數的形式不同：

  • call(this, arg1, arg2, ...)
  • apply(this, [arg1, arg2, ...])

而 bind() 則是創建一個新的包裝函數，並且返回，而不是立刻執行

  • bind(this, arg1, arg2, ...)

看如下的例子：

  function foo(b) {
    console.log(this.a + '' + b);
  }
  var obj = {
    a: 2,
    foo: foo
  };
  var a = 1;
  foo('Gopal'); // 1Gopal
  obj.foo('Gopal'); // 2Gopal
  foo.call(obj, 'Gopal'); // 2Gopal
  foo.apply(obj, ['Gopal']); // 2Gopal
  let bar = foo.bind(obj, 'Gopal');
  bar(); // 2Gopal

被忽略的 this

如果你把 null 或者 undefined 作為 this 的綁定對象傳入 call、apply 或者 bind，這些值在調用時會被忽略，實際應用的是預設綁定規則

function foo() {
  console.log(this.a);
}
var a = 2;
foo.call(null); // 2

利用這個用法使用 apply(..) 來“展開”一個數組，並當作參數傳入一個函數。
類似地，bind(..) 可以對參數進行柯里化(預先設置一些參數)

  function foo(a, b) {
    console.log("a:" + a + ", b:" + b);
  }
  // 把數組“展開”成參數
  foo.apply(null, [2, 3]); // a:2, b:3
  // 使用 bind(..) 進行柯里化
  var bar = foo.bind(null, 2);
  bar(3); // a:2, b:3

new綁定

當我們使用構造函數 new 一個實例的時候，這個實例的 this 指向是什麼呢？

我們先來看下使用 new 來調用函數，或者說發生構造函數調用時，會執行什麼操作，如下：

  • 創建(或者說構造)一個全新的對象
  • 這個新對象會被執行[[原型]]連接，將對象（實例）的 __proto__ 和構造函數的 prototype 綁定
  • 這個新對象會綁定到函數調用的 this
  • 如果函數沒有返回其他對象，那麼new表達式中的函數調用會自動返回這個新對象

原理實現類似如下：

function create (ctr) {
    // 創建一個空對象
    let obj = new Object()
    // 鏈接到構造函數的原型對象中
    let Con = [].shift.call(arguments)
    obj.__proto__ = Con.prototype
    // 綁定this
    let result = Con.apply(obj, arguments);
    // 如果返回是一個對象，則直接返回這個對象，否則返回實例
    return typeof result === 'object'? result : obj;
}

註意：let result = Con.apply(obj, arguments); 實際上就是指的是新對象會綁定到函數調用的 this

  function Foo(a) {
    this.a = a;
  }
  var bar = new Foo(2);
  console.log(bar.a); // 2

特殊情況——箭頭函數

我們之前介紹的四條規則已經可以包含所有正常的函數。但是 ES6 中介紹了一種無法使用 這些規則的特殊函數類型：箭頭函數

箭頭函數不使用 this 的四種標準規則，而是根據定義時候的外層(函數或者全局)作用域來決 定 this。也就是說箭頭函數不會創建自己的 this,它只會從自己的作用域鏈的上一層繼承 this

function foo() {
  // 返回一個箭頭函數
  // this 繼承自 foo()
  return (a) => {
    console.log(this.a);
  }
};

var obj1 = {
  a: 2
};
var obj2 = {
  a: 3
};
var bar = foo.call(obj1);
bar.call(obj2); // 2, 不是 3 !

foo() 內部創建的箭頭函數會捕獲調用時 foo() 的 this。由於 foo() 的 this 綁定到 obj1， bar(引用箭頭函數)的 this 也會綁定到 obj1，箭頭函數的綁定無法被修改。(new 也不 行!)

總結——this 優先順序

判斷是否為箭頭函數，是則按照箭頭函數的規則

否則如果要判斷一個運行中函數的 this 綁定，就需要找到這個函數的直接調用位置。找到之後就可以順序應用下麵這四條規則來判斷 this 的綁定對象

  1. 由 new 調用?綁定到新創建的對象
  2. 由 call 或者 apply(或者 bind)調用?綁定到指定的對象
  3. 由上下文對象調用?綁定到那個上下文對象
  4. 預設:在嚴格模式下綁定到 undefined，否則綁定到全局對象

如下圖所示：

參考


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 大家都在用MySQL count(*)統計總數，到底有什麼問題？
    在日常開發工作中，我經常會遇到需要統計總數的場景，比如：統計訂單總數、統計用戶總數等。一般我們會使用MySQL 的count函數進行統計，但是隨著數據量逐漸增大，統計耗時也越來越長，最後竟然出現慢查詢的情況，這究竟是什麼原因呢？本篇文章帶你一下學習一下。 ...
  • ClickHouse(06)ClickHouse的數據表創建語句詳細解析
    當前伺服器上創建表(單節點) 創建新表具有幾種種語法形式，具體取決於用例。預設情況下，僅在當前伺服器上創建表。分散式DDL查詢作為子句實現，該子句另外描述。 語法形式 使用顯式架構 CREATE TABLE [IF NOT EXISTS] [db.]table_name [ON CLUSTER cl ...
  • 2022 IDC中國未來企業大獎優秀獎頒佈，華為雲資料庫助力德邦快遞獲獎
    摘要：華為雲資料庫助力德邦快遞打造的“基於數智融合的一站式物流供應鏈平臺”項目從500多個項目中脫穎而出，榮獲2022 IDC中國未來企業大獎優秀獎“未來智能領軍者”。 本文分享自華為雲社區《華為雲資料庫助力德邦快遞斬獲IDC中國未來企業大獎“未來智能領軍者”優秀獎》，作者： GaussDB 資料庫 ...
  • 實現一個簡單的Database1(譯文）
    “What I cannot create, I do not understand.” – Richard Feynman I’m building a clone of sqlite from scratch in C in order to understand, and I’m going ...
  • Android EGL 實踐
    一個沉浸感十足的游戲，其場景中的全局光照效果一定功不可沒。 動態漫反射全局光照（DDGI）帶來的光影變化，是細膩延展的視覺語言，讓場景中每種顏色都有了“五彩斑斕”的詮釋，場景佈局光影，物體關係立顯，環境溫度降臨，拓展了畫面信息傳達的層次，點睛之筆。 直接光渲染 VS 動態漫反射全局光照 細膩的光照視 ...
  • [通明境 · React架構]通俗地講React，優雅地理解React
    ⚠️1.1萬長文⚠️ React源碼並非洪水猛獸，知道方法，就可以很輕易地馴服它(=^▽^=)。文章基於最新的React源碼進行調試及閱讀，將以通俗地方式解讀React ...
  • 記錄--通過手寫，分析axios核心原理
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、axios簡介 axios是什麼？ Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。 axios有什麼特性？（不得不說面試被問到幾次） 從瀏覽器中創建 XMLHttpRequests 從 ...
  • FE寶典
    前端學科面試寶典 蔡威 [電子郵件地址] HTML5、CSS3...................................................................................................................... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類