this指向終極解決方案（附帶手寫綁定函數）

来源:https://www.cnblogs.com/chscript/archive/2022/12/22/16994956.html
-Advertisement-
Play Games

this指向 this定義 this用於指定對當前對象的引用。 this的兩種綁定方式 為什麼說是兩種？在《你不知道的JavaScript（上捲）》一書中共提到了四種綁定方式。如下： 預設綁定 隱式綁定 顯式綁定 new綁定 實際上這四種綁定方式有兩種方式重覆了（隱式綁定和new綁定）。我們在學習過 ...


目錄

this指向

this定義

this用於指定對當前對象的引用。

this的兩種綁定方式

為什麼說是兩種？在《你不知道的JavaScript（上捲）》一書中共提到了四種綁定方式。如下：

  1. 預設綁定

  2. 隱式綁定

  3. 顯式綁定

  4. new綁定

實際上這四種綁定方式有兩種方式重覆了（隱式綁定和new綁定）。我們在學習過程中應帶有辯證思維去看待問題。基於獺子細緻的分析與總結，實際上this的綁定可以認為只存在兩種方式：預設綁定和顯式綁定。分析如下：

預設綁定

在嚴格模式下，全局作用域的this對象會變為undefined。在非嚴格模式的普通函數若不作為對象方法，它的this綁定都會自動綁定到window全局對象上，即預設綁定。

顯式綁定

函數可以使用call/apply/bind等方法綁定this對象。這種方式屬於強制綁定措施，this的指向是可預見的（即綁定誰就指向誰），我們重點談談他們的用法。

基本格式：函數名稱.call(要綁定的對象, 參數列表)

call：接受一個參數列表。會立即執行。

apply：接受數組形式的參數。會立即執行。

bind：接受一個參數列表。返回原函數拷貝，不會立即執行。

若需應用，一般可以這樣思考：我們想要函數的this值指向哪個對象？

let a = { name: '小紅' }
function getName() {
    console.log(this.name)
}
getName() // 這裡預設綁定全局對象
getName.call(a) // 顯式綁定對象a

new綁定（具有顯式綁定效果）

我們來看看new關鍵字的執行過程：

  1. 創建一個新的空對象
  2. 將構造函數的原型賦給新創建對象（實例）的隱式原型
  3. 利用顯式綁定將構造函數的this綁定到新創建對象併為其添加屬性
  4. 返回這個對象

很顯然，這裡的this的指向同樣是可預見的。

基於上面的執行過程，我們可以手寫實現一下（面試題）：

function myNew(fn, ...args) { // 構造函數作為參數
    let obj = {}
    obj.__proto__ = fn.prototype
    fn.apply(obj, args)
    return obj
}

一步一行代碼，是不是很簡潔。

註意：我們可以理解為new的過程應用了顯式綁定

隱式綁定（具有顯式綁定效果）

關於隱式綁定，這裡提一下書里被翻譯過的作者原話：

另一條需要考慮的規則是調用位置是否有上下文對象

其實隱式綁定也可以理解為它應用了顯式綁定。比如我們在利用模板字面量創建對象的時候，普通函數作為對象方法擁有與顯式綁定同樣的效果，可以理解為已經執行了顯式綁定這一過程。即函數會綁定對應的實例對象。如下：

let a = {
    x: 10,
    y: function () {    // 作為對象方法，存在顯示綁定效果。
        console.log(this)
    }
}
a.y()
// 輸出結果：a { x: 10 y: f } 即函數內部的this指向被綁定的實例對象

this綁定優先順序

順序：顯式綁定 > 預設綁定

註意：箭頭函數本身沒有this，不會應用以上規則

函數的this指向

關於this指向，我們會更多的關註函數內部的this指向。一般而言會考察以下兩種類型的題目：

  • 自定義對象內部函數的this指向
  • 全局對象下函數的this指向

可以利用以下準則去解決this指向問題。實際上我們只需處理這兩種函數：

  1. 對於非嚴格模式下的普通函數會有兩個情況：

    1.1 作為對象方法，this會綁定對象（執行new綁定過程）。

    1.2 不作為對象方法，在非嚴格模式下this預設綁定window。

  2. 箭頭函數沒有this。它只會繼承最近一層普通函數或全局作用域的this。

註意：call/apply/bind方法不能改變箭頭函數的this指向，因為箭頭函數本身沒有this。

我們儘量一次性解決所有this指向問題。首先設計這樣兩個結構，如下：

// 普通函數結構
function a(){}          // 普通函數聲明
setTimeout(function(){})// 內置函數
(function(){})()        // 立即執行函數
return function(){}     // 匿名函數
// 箭頭函數結構
let a = ()=>{}          // 箭頭函數聲明
setTimeout(()=>{})      // 內置函數
(()=>{})()              // 立即執行函數
return ()=>{}           // 匿名函數

利用上面的結構。分析第一種情況。如下：

let obj = {
    fun: function () { // 這裡是普通函數

        console.log(this) // 普通作為對象方法定義。內部this指向obj

        // 以下普通函數都不作為對象方法定義，this全部指向window
        function a() { console.log(this) }; a();      // 普通函數聲明執行
        setTimeout(function () { console.log(this) });// 內置函數
        (function () { console.log(this) })();        // 立即執行函數
        return function () { console.log(this) };     // 匿名函數  

    },
    arr: () => { // 這裡是箭頭函數

        console.log(this) // 箭頭函數的this俺規則繼承全局作用域指向window

        // 以下普通函數都不作為對象方法定義，this全部指向window
        function a() { console.log(this) }; a();      // 普通函數聲明執行
        setTimeout(function () { console.log(this) });// 內置函數
        (function () { console.log(this) })();        // 立即執行函數
        return function () { console.log(this) };     // 匿名函數  

    }
}
obj.fun()() // 會執行普通函數內部的所有普通函數和返回的匿名函數
obj.arr()() // 會執行箭頭函數內部的所有普通函數和返回的匿名函數

輸出結果：第一個this為obj對象，後面九個this全是window對象

接下來分析第二種情況。如下：

let obj = {
    fun: function () { // 這裡是普通函數

        console.log(this) // 普通作為對象方法定義。this指向obj

        // 以下是箭頭函數，它的this按規則繼承最近一次普通函數即全部指向obj
        let a = () => { console.log(this) }; a();// 箭頭函數聲明
        setTimeout(() => { console.log(this) }); // 內置函數
        (() => { console.log(this) })();         // 立即執行函數
        return () => { console.log(this) };      // 匿名函數

    },
    arr: () => { // 這裡是箭頭函數

        console.log(this) // 箭頭函數的this俺規則繼承全局作用域指向window

        // 以下是都是箭頭函數，它的this按規則繼承全局作用域全部指向window
        let a = () => { console.log(this) }; a();// 箭頭函數聲明
        setTimeout(() => { console.log(this) }); // 內置函數
        (() => { console.log(this) })();         // 立即執行函數
        return () => { console.log(this) };      // 匿名函數
    }
}
obj.fun()() // 會執行普通函數內部的所有箭頭函數和返回的匿名函數
obj.arr()() // 會執行箭頭函數內部的所有箭頭函數和返回的匿名函數

輸出結果：前五個this都是obj對象，後面五個this都是window對象

分析第三種情況。如下：

// 箭頭函數和普通函數放在全局中聲明，全部指向window
function fun() { console.log(this) }; fun();  // 普通函數聲明執行
setTimeout(function () { console.log(this) });// 內置函數
(function () { console.log(this) })();        // 立即執行函數

let arr = () => { console.log(this) }; arr(); // 箭頭函數聲明
setTimeout(() => { console.log(this) });      // 內置函數
(() => { console.log(this) })();              // 立即執行函數

輸出結果：六個this全是window對象

總結解題的關鍵點：首先判斷是箭頭函數還是普通函數。箭頭函數只會按規則繼承this指向。普通函數則要分兩種情況：作為對象方法和不作為對象方法：作為對象方法this會綁定到對象上，不作為對象方法this則綁定到window（非嚴格模式）。

補充說明：普通函數作為對象方法實際上已經執行了new綁定（可以看上面的手寫new過程）。因此普通函數作為對象方法，它的this會指向對象。

this綁定丟失的情況

函數別名（作為參數被傳遞或調用）：例如obj.foo或手寫Promise中的resolve方法。我們可以理解為他是一個已經定義好的函數。它的this指向具體要看他在哪裡使用，而且要分清楚它是普通函數還是箭頭函數。

obj.foo // 是一個函數
// 等價於下麵我們定義好的普通函數或箭頭，如下
let foo = function{}{ console.log(this) }
let foo = ()=>{ console.log(this) }

補充說明：實際上this丟失只有這一種情況

手寫call、apply和bind

前置知識：ES6 剩餘參數、Function.prototype原型方法定義，在調用時每個function可通過隱式原型（原型鏈）找到此方法。

Function.prototype.myCall = function (obj, ...args) {
    obj = obj === null || obj === undefined ? window : obj;
    return (() => {
        obj.method = this; //作為臨時方法傳遞給對象
        obj.method(...args);
        delete obj.method;
    })();
}

call和apply區別，apply的接受參數為數組形式。

Function.prototype.myApply = function (obj, ...args) {
    obj = obj === null || obj === undefined ? window : obj;
    return (() => {
        obj.method = this; //作為臨時方法傳遞給對象
        obj.method(...args[0]);
        delete obj.method;
    })();
}

普通版：bind方法是硬綁定。返回值為原函數的拷貝，其this值不可再修改。

Function.prototype.myBind = function (obj, ...args1) {
    obj = obj === null || obj === undefined ? window : obj;
    return (...args2) => {
        this.apply(obj, args1.concat(args2));
    };
}

進階版：bind方法可支持new關鍵字

Function.prototype.myNewBind = function (obj, ...args1) { // 函數 1
    obj = obj === null || obj === undefined ? window : obj;
    let self = this;
    let fn = function (...args2) { // 函數 2
        return self.apply(this instanceof fn ? this : obj, args1.concat(args2));
    };
    fn.prototype = Object.create(self.prototype); // 維持其原型
    fn.prototype.constructor = fn
    return fn;
}

過程解析：

  1. 為什麼要維持原形？

原生函數中bind在執行new操作時會保留其所綁定函數的原型，我們希望在執行new關鍵字後myNewBind函數也能擁有同樣的效果。若沒有進行維持原型這一步操作，我們的new操作效果其實是把返回的函數 2 作為構造函數操作去生成實例，會丟失之前所綁定函數的原型，無法實現繼承。

  1. 為什麼使用instanceof？

判斷當前對象是否為返回的構造函數所生成的實例對象。若是則認為執行了new關鍵字操作，返回的構造函數內部需要this代表新的實例對象，而不是舊的obj對象。

  1. 為什麼要使用Object.create()？

我們希望返回的函數也有自己的獨立原型。直接將一個構造函數原型賦給另一個構造函數原型會使兩個原型對象的數據捆綁（引用值特點）在一起，即需要保持原型對象數據的獨立性。

Object.create()的運行過程手寫如下：

function createObject(obj) { // 參數為原型對象
    let temp = function () { };
    temp.prototype = obj;
    return new temp();
}

參考

你不知道的JavaScript （上捲）


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

-Advertisement-
Play Games
更多相關文章
  • JWT(生成Token令牌)
    .NetCore配置使用 什麼是JWT(詳情在面試.md中有) JWT是目前最流行的跨域身份驗證解決方案,JWT的原則是在伺服器身份驗證之後,會返回一個Json數據,,之後,當用戶與伺服器通信的時候,客戶在請求中發揮Json對象,伺服器會根據這個json對象來判斷用戶的身份,.為了防止用戶篡改信息, ...
  • .Net執行SQL/存儲過程之易用輕量工具
    支持.Net/.Net Core/.Net Framework，可以部署在Docker, Windows, Linux, Mac。 由於該工具近來被廣東省數個公司2B項目採用，且表現穩定，得到良好驗證，故在此推薦出來。 此工具在IDataAccess介面中提供。 IDataAccess所在的命名空間 ...
  • Linux下“減速”查看日誌的方法
    說明 基於微服務項目，產生的的多項目倉庫管理腳本。可直接保存 shell 腳本後酌情修改後試用 目錄結構 xxxx Xxx1Api/ Xxx2Api/ git_clone_api.sh git_branch_dev.sh git_pull_all.sh git_status.sh api-build ...
  • 華為雲解鎖雲原生資料庫發展新動能
    摘要：如流水般源源不斷的數據都存放在哪裡？雲原生資料庫到底是什麼？企業基於雲原生資料庫如何隨取隨用，實現從 “上好雲” 到 “用好雲” 的跨越發展？ 本文分享自華為雲社區《探秘・雲新知丨華為雲解鎖雲原生資料庫發展新動能》，作者：華為雲頭條 。 伴隨數字化轉型步入 “深水區”，企業的業務需求迭代迅速， ...
  • Clickhouse表引擎探究-ReplacingMergeTree
    作者：耿巨集宇 1 表引擎簡述 1.1 官方描述 MergeTree 系列的引擎被設計用於插入極大量的數據到一張表當中。數據可以以數據片段的形式一個接著一個的快速寫入，數據片段在後臺按照一定的規則進行合併。相比在插入時不斷修改（重寫）已存儲的數據，這種策略會高效很多。 ReplacingMergeTr ...
  • 使用Keepalived工具實現集群節點的高可用
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 作者：蟹黃瓜子 文章來源：社區投稿 1.前言 在集群當中離不開的一個詞就是是高可用，用本文來簡單聊聊Keepalived是什麼、Keepalived如何 ...
  • GreatSQL MGR 使用 IPv6 連接
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 作者：王權富貴 文章來源：社區原創 1.概述 本文基於 GreatSQL 8.0.25-16 ，以下測試均使用此版本。 MySQL支持IPv6，創建用戶 ...
  • MySQL-執行計劃
    上官網看執行計劃文檔釋義，移步 此部分在MySQL官方文檔中的結構屬於優化(Optimization)-理解查詢執行計劃(Understanding the Query Execution Plan)。 此部分一共包括5個部分內容： 1，使用explain優化查詢 2，explain輸出內容釋義 3 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類