深入淺出 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 中提供了 applycallbind 方法可以讓我們實現

不同之處在於,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 的綁定對象傳入 callapply 或者 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 綁定到 obj1bar(引用箭頭函數)的 this 也會綁定到 obj1,箭頭函數的綁定無法被修改。(new 也不 行!)

總結——this 優先順序

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

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

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

如下圖所示:

參考


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

-Advertisement-
Play Games
更多相關文章
  • 在日常開發工作中,我經常會遇到需要統計總數的場景,比如:統計訂單總數、統計用戶總數等。一般我們會使用MySQL 的count函數進行統計,但是隨著數據量逐漸增大,統計耗時也越來越長,最後竟然出現慢查詢的情況,這究竟是什麼原因呢?本篇文章帶你一下學習一下。 ...
  • 當前伺服器上創建表(單節點) 創建新表具有幾種種語法形式,具體取決於用例。預設情況下,僅在當前伺服器上創建表。分散式DDL查詢作為子句實現,該子句另外描述。 語法形式 使用顯式架構 CREATE TABLE [IF NOT EXISTS] [db.]table_name [ON CLUSTER cl ...
  • 摘要:華為雲資料庫助力德邦快遞打造的“基於數智融合的一站式物流供應鏈平臺”項目從500多個項目中脫穎而出,榮獲2022 IDC中國未來企業大獎優秀獎“未來智能領軍者”。 本文分享自華為雲社區《華為雲資料庫助力德邦快遞斬獲IDC中國未來企業大獎“未來智能領軍者”優秀獎》,作者: GaussDB 資料庫 ...
  • “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 ...
  • 一個沉浸感十足的游戲,其場景中的全局光照效果一定功不可沒。 動態漫反射全局光照(DDGI)帶來的光影變化,是細膩延展的視覺語言,讓場景中每種顏色都有了“五彩斑斕”的詮釋,場景佈局光影,物體關係立顯,環境溫度降臨,拓展了畫面信息傳達的層次,點睛之筆。 直接光渲染 VS 動態漫反射全局光照 細膩的光照視 ...
  • ⚠️1.1萬長文⚠️ React源碼並非洪水猛獸,知道方法,就可以很輕易地馴服它(=^▽^=)。文章基於最新的React源碼進行調試及閱讀,將以通俗地方式解讀React ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、axios簡介 axios是什麼? Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。 axios有什麼特性?(不得不說面試被問到幾次) 從瀏覽器中創建 XMLHttpRequests 從 ...
  • 前端學科面試寶典 蔡威 [電子郵件地址] HTML5、CSS3...................................................................................................................... ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...