JS高階編程技巧--柯理化函數

来源:https://www.cnblogs.com/ronaldo9ph/archive/2020/02/13/12303333.html

首先看一段代碼: let obj = { x: 100 }; function fn(y) { this.x += y; console.log(this); } 現在有一個需求:在1秒後,執行函數fn,並讓其this指向obj。 如果寫成 setTimeout(fn, 1000); 這麼寫的話,f ...


首先看一段代碼:

let obj = {
    x: 100
};

function fn(y) {
    this.x += y;
    console.log(this);
}

 

現在有一個需求:在1秒後,執行函數fn,並讓其this指向obj。

如果寫成

setTimeout(fn, 1000);

這麼寫的話,fn函數中的this是指向window的,而且也沒有傳遞參數。

 

如果寫成

setTimeout(fn(200), 1000);

這麼寫的話,this指向依然是window,而且相當於立即執行fn函數,並把結果賦給定時器1秒後再執行,這樣肯定不行。

 

如果寫成

setTimeout(fn.call(obj,200), 1000);

這麼寫的話,用call或apply雖然改變了this指向,但都是函數立即執行並把返回結果賦給了定時器,依然無法完成需求。

 

如果寫成

setTimeout(function() {
    fn.call(obj, 200);
}, 1000);

這麼寫的話,用一個匿名函數包起來,等到1秒後執行匿名函數裡邊的代碼,這樣便可以完成上述需求。

從中我們可以看出,在某一個階段之後執行某些代碼,我們需要預先把this指向、參數等預先準備好,這種預先處理的思想即柯理化思想。

即,柯理化函數的思想:利用閉包的機制,把一些內容事先存儲和處理了,等到後期需要的時候拿來用即可。
 

當然,這個需求如果用bind寫的話,也能實現
setTimeout(fn.bind(obj,200), 1000);
因為bind不會立即執行函數,而且可以預先存儲一些內容,和柯理化函數的思想相似,但問題是bind不相容IE8及以下,那麼為了通用,我們可以自己封裝一個bind方法,從而實現這種需求。
 
/*
* bind:預先處理內容
*   @params
*     func:要執行的函數
*      context:需要改變的this指向
*      args:給函數傳遞的參數
*   @return
*         返回一個代理函數
*/
 function bind(func, context, ...args) {
    return function proxy() {
        func.call(context, ...args); //call和apply相容低版本IE
    };
 }

 

完成最開始的需求

setTimeout(bind(fn, obj, 200), 1000);

 

理解了這種思想,有助於我們更好的閱讀別人的代碼,如redux源碼中很多都用到了這種方式或思想,以後更有助於我們自己寫一些插件、組件等。

 
 

 


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

更多相關文章
  • css原理:1.優先原則=>後解析的內容會覆蓋之前解析的內容(所謂解析就是讀取的css樣式)2.繼承原則=>嵌套裡面的標簽擁有外部標簽的某些樣式,子元素可以繼承父元素的屬性 1》優先原則針對選擇器:a.同一個選擇器從上往下讀取執行css樣式 b.同一類選擇器從上往下執行 c.不同類型的選擇器優先順序,... ...
  • 在移動端做了個導航,長這樣 原來結構是用的span <span class="menu_icon"> <img src="img/icon_1.png"> <p>導航</p> </span> 綁定用的是jquery的.click $('.menu_icon').click(function () { ...
  • css是什麼?不需要瞭解太多文字類介紹,記住css是層疊樣式表,HTML是頁面結構,css負責頁面樣式,javascrt負責靜態頁面的交互。CSS能夠對網頁中元素位置的排版進行像素級精確控制,擁有對網頁對象和模型樣式編輯的能力。詳情參考css百度百科瞭解其發展歷史,語言特點與語言基礎等,也是有好處的... ...
  • 轉自:貓貓小屋--js獲取url後參數信息 摘要: 下文講述javascript中使用js代碼獲取url地址後面的參數值的方法分享,如下所示; 實現思路: 使用正則表達式對參數值進行匹配,獲取參數後的相關值 例: 獲取url:http://www.maomao365.com?name=test123 ...
  • 項目創建完成,啟動正常,接下來就是項目打包了。將測試Demo打包成exe桌面應用,點擊exe文件,運行項目。 書接上文,創建項目有三種方式 Git拷貝、直接創建;通過electron社群提供的命令行工具(CLI) electron-forge 創建項目,看起來對應的項目打包方式也應該有三種才對,但其 ...
  • 在經歷了Jsp實訓的慘痛教訓後,特意花了點時間學習Ajax,學完後自我感覺良好,於是寫瞭如下一個小框架: 1 /** 2 * frameAjax 3 * 4 * 參數: 5 * paramsObj: Json 6 * required params: 7 * type:請求參數類型(String) ...
  • 概念 ​ 什麼是模塊, 一個模塊是一塊具有獨立功能的代碼, 可以是一個函數, 一個對象,甚至是一個字元串或數字,通常存儲為一個單獨的j s文件。 為什麼需要模塊化? 過去,j s很難編寫大型應用, 因為有以下兩個問題: 1. 全局變數污染 2. 難以管理的依賴關係 這兩個問題導致j s無法進行精細的 ...
  • 報錯: gyp verb check python checking for Python executable "python2" in the PATH gyp verb check python checking for Python executable "python" in the PA ...
一周排行
  • 最近由於疫情緊張,遂在家辦公,在領導的帶領下,學習了一下.Net Core MVC。 一,構建web應用 1.選擇c#-所有平臺-web 找到ASP.NET Core web應用程式 2.項目命名之後轉至如下界面:選擇Web應用程式(模型視圖控制器)。 Ok點擊創建,這個項目的基本框架就生成了。 二 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7792973.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講結構型設計模式的第六個模式--享元模式,先從名字上來看,“享元”可以這樣理解--共用“單元”。單元是什麼呢?舉例說明:對於圖形而言就 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7814004.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講結構型設計模式的第七個模式,也是結構型設計模式中的最後一個模式--代理模式。先從名字上來看,“代理”可以理解為“代替”,代替“主人” ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7837716.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第一個模式--模板方法模式,先從名字上來看。“模板方法”理解為有一個方法的名字叫“模板方法”,也可以換個理解方法: ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7873322.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第二個模式--命令模式,又稱為行動(Action)模式或交易(Transaction)模式,先從名字上來看。“命令模 ...
  • 前面幾章介紹了處理適量適中的圖形內容的最佳方法。通過使用幾何圖形、圖畫和路徑,可以降低2D圖形的開銷。即使正在使用複雜的具有分層效果的組合形狀和漸變畫刷,這種方法也仍然能夠正常得很好。 然而,這樣設計不適合需要渲染大量圖形元素的繪圖密集型應用程式。例如繪圖程式、演示粒子碰撞的物理模型程式或橫向卷軸形 ...
  • Dubbo的服務暴露是一個重要的特性,瞭解其機制很重要。之前有很多人寫了有關的源代碼分析,在本文中不再重新分析。官方文檔中的一篇寫的就很好,本文主要是有關內容進行補充與總結。 傳送門: "服務導出" 為什麼要服務暴露 服務暴露分為遠程暴露和本地暴露。在遠程服務暴露中會將服務信息上傳到註冊中心。這時客 ...
  • 在上一篇文章 Dubbo之服務暴露分析 中介紹了當遠程暴露時,如果有註冊中心,需要在服務暴露後再將服務註冊到註冊中心。該篇將介紹該功能的有關步驟。 註冊的起點 在 方法包含了服務導出,註冊,以及數據訂閱等邏輯。其中服務註冊先調用 方法。 可以看出,服務註冊主要包括兩部分, 獲取註冊中心實例 和 向註 ...
  • 從今天開始,將會逐步介紹關於DUbbo的有關知識。首先先簡單介紹一下DUbbo的整體概述。 概述 Dubbo是SOA(面向服務架構)服務治理方案的核心框架。用於分散式調用,其重點在於分散式的治理。 簡單的來說,可以把它分為四個角色。服務提供方(Provider)、服務消費方(Consumer)、註冊 ...
  • [TOC] python是數據分析的主要工具,它包含的數據結構和數據處理工具的設計讓python在數據分析領域變得十分快捷。它以NumPy為基礎,並對於需要類似 for迴圈 的大量數據處理的問題有非常快捷的數組處理函數。 但是pandas最擅長的領域還是在處理表格型二維以上不同數據類型數據。 基本導 ...
x