詳解JS中 call 方法的實現

来源:https://www.cnblogs.com/huaweiyun/archive/2022/09/26/16729971.html
-Advertisement-
Play Games

摘要:本文將全面的,詳細解析call方法的實現原理 本文分享自華為雲社區《關於 JavaScript 中 call 方法的實現,附帶詳細解析!》,作者:CoderBin。 本文將全面的,詳細解析call方法的實現原理,並手寫出自己的call方法,相信看完本文的小伙伴都能從中有所收穫。 call 方法 ...


摘要:本文將全面的,詳細解析call方法的實現原理

本文分享自華為雲社區《關於 JavaScript 中 call 方法的實現,附帶詳細解析!》,作者:CoderBin。

本文將全面的,詳細解析call方法的實現原理,並手寫出自己的call方法,相信看完本文的小伙伴都能從中有所收穫。

call 方法的實現

1.函數作用

調用函數,可傳入參數,改變this指向

2.總體步驟

  1. 邊界判斷(this,context)
  2. 將調用的函數設置為對象(傳入的context)的方法(改變this指向)
  3. 調用函數,得到返回值,並返回

3. 詳細步驟

1. 邊界判斷

  • 判斷當前 this 是否為一個函數,否則返回錯誤消息
  • 判斷傳入的 context 參數是否存在,存在則使用 Object() 轉換為對象賦給 context,否則將 window 賦值給 context

2. 將調用的函數設置為對象(傳入的context)的方法(改變this指向)
3. 調用函數,得到返回值,並返回

  • 調用函數,得到結果
  • 刪除 context 身上的 fn 函數
  • 返回結果

4. 代碼實現

/**
 * !實現 binCall() 方法
 * @param {*} context 綁定的對象
 * @param  {...any} args 剩餘參數
 * @returns 
 */
Function.prototype.binCall = function(context, ...args) {
 if (typeof this !== 'function') console.error('type Error'); // 1
  context = (context!==null && context!==undefined) ? Object(context) : window
 context.fn = this // 2
 const result = context.fn(...args) // 3
 delete context.fn;
 return result
}

5. 測試代碼

// 測試
function sum(num1, num2) {
  console.log('sum 被執行', this);
 return num1 + num2
}
// 原生的 call() 方法
console.log(sum.call({name: 'bin'},1,2));
// 自定義的 binCall() 方法
console.log(sum.binCall({name: 'bin'},1,2));

經過原生的call方法和手寫的binCall方法測試,我們手動實現的binCall方法也能實現原生call方法的功能

6. 細節解析

  1. this 指向的就是調用 binCall() 的那個函數(隱式綁定);
  2. 傳入的 context 參數表示:將 this 的指向改為這個參數;
  3. 改變 this 指向其實就是在 context 上添加一個臨時的方法,值為 this;
  4. 調用 context.fn() 時,就已經改變了 this 的指向,同時得使用展開運算符傳入參數
  5. delete context.fn 刪除那個臨時方法是因為已經不需要用了

7. 核心原理

通過在傳入的對象上,臨時新增一個方法,這個方法的值是當前 binCall 的調用者。然後 context.fn(...argArray) 調用這個函數,通過隱式綁定的方式改變了 this 的指向,最後得到結果並返回。

 

點擊關註,第一時間瞭解華為雲新鮮技術~


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

-Advertisement-
Play Games
更多相關文章
  • 摘要:本文主要介紹 Presto 如何更好的利用 Hudi 的數據佈局、索引信息來加速點查性能。 本文分享自華為雲社區《華為雲基於 Apache Hudi 極致查詢優化的探索實踐!》,作者:FI_mengtao。 背景 湖倉一體(LakeHouse)是一種新的開放式架構,它結合了數據湖和數據倉庫的最 ...
  • 雲端分析是針對 CocoaPods 依賴管理雲端化的優化方案。對大量重覆的 iOS 工程構建任務進行了收斂和資源復用,在保證正確性的前提下達到了加速依賴管理速率的目的,實現了 Pod install 分析階段提速 60% 以上的能力。 ...
  • 華為帳號自擬形象上線啦!用戶只需一張照片,即可輕鬆創建屬於自己的華為帳號自擬形象,還能對形象進行個性化裝扮,DIY髮型、服裝、配飾等。點擊“手機設置 > 華為帳號 > 自擬形象 ”即刻擁有手機中的另一個你。 華為帳號自擬形象提供數個預置虛擬形象供用戶直接使用,用戶也能夠通過拍攝/上傳照片,一鍵生成照 ...
  • 模塊 HTML 網頁中,瀏覽器通過<script>標簽載入 JavaScript 腳本。 <!-- 頁面內嵌的腳本 --> <script type="application/javascript"> // module code </script> <!-- 外部腳本 --> <script ty ...
  • Vue2動態添加路由 點擊打開視頻講解更加詳細 場景: 一般結合VueX和localstorage一起使用 router.addRoutes vue-router4後 已廢棄:使用 router.addRoute() 代替。 vue-router4版本前也可用 函數簽名: router.addRou ...
  • #概述 webpack的使用中我們會遇到各種各樣的插件、loader。 webpack的功力主要體現在能理解各個插件、loader的數量上。理解的越多功力越深 loader是什麼呢? #背景 瞭解loader前,我們在來看個問題,有了前面的基礎我們還是用個簡單的樣例來說明 由於一切都是模塊,我們想用 ...
  • Vue 響應式數據 什麼是響應式數據:數據變了,視圖能更新,反之視圖更新,數據要不要更新,不歸響應式數據管。 Vue 在內部實現了一個最核心的defineReactive方法,藉助了Object.defineProperty,核心就是劫持屬性(只會劫持已經存在的屬性),把所有的屬性,重新的添加了 g ...
  • ###1. 後端配置 新建一個CrosConfig.java文件(配置類),允許任意請求發送 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Confi ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...