摘要:新開一個坑,起名為,自己造一些小輪子。之前貌似在知乎上看到一個問題是說如何使用實現(xiàn)它原生的和方法,今天我來實現(xiàn)一番。但是,這樣等于說只給傳了一個數(shù)組參數(shù),并不能達到目的。同理來實現(xiàn)參考資料深入之和的模擬實現(xiàn)
新開一個坑,起名為【build your xxx】,自己造一些小輪子。
工作中不要重復(fù)造輪子,但是以學(xué)習(xí)的目的去造輪子卻意義重大。
之前貌似在知乎上看到一個問題是說如何使用JavaScript實現(xiàn)它原生的call和apply方法,今天我來實現(xiàn)一番。
首先看看call是干什么的,從MDN上扒一張圖:
舉個例子
function showName(gender, age){ console.log(this.name, " ", gender, " ", age) } var obj = { name: "亞古" } showName.call(obj, "female", 22)// 亞古 female 22
梳理思路
可以看出來Func.call(obj, arg1, arg2...)實現(xiàn)了這么幾件事:
以obj.Func的方式調(diào)用
把參數(shù)arg1, arg2 ...傳遞給Func
不對obj和Func造成副作用
實現(xiàn)
Function.prototype.Zcall = function (othis) { othis.fn = this; othis.fn(); } showName.Zcall(obj) // 亞古 undefined undefined
第一個步驟已經(jīng)實現(xiàn)了,但是很明顯的是這樣子會對傳入的othis造成副作用,即給othis對象無緣無故添加了一個方法,所以:
Function.prototype.Zcall = function (othis) { othis.fn = this; othis.fn(); delete othis.fn; }
副作用已經(jīng)消除了,接下來就是參數(shù)的問題,這里有個問題是參數(shù)個數(shù)是不定的,貌似可以使用一個數(shù)組來arr保存住arguments里面的參數(shù),然后再執(zhí)行othis.fn(arr)。但是,這樣等于說只給fn傳了一個數(shù)組參數(shù),并不能達到目的。此時問題轉(zhuǎn)化為我們?nèi)绾螌崿F(xiàn)像 othis.fn(arguments[0], arguments[1], arguments[2] ...) 這樣的語句呢?
此時可以想起一個不怎么常用的方法eval
簡單的說就是可以把字符串解析為JavaScript語句來執(zhí)行。
借助eval,改寫Zcall方法:
Function.prototype.Zcall = function (othis) { othis.fn = this; let args = []; for(let i = 1, len = arguments.length;i < len;i++) { args.push("arguments[" + i + "]"); } // othis.fn(); eval("othis.fn(" + args + ")"); delete othis.fn; }
其實就是用args把arguments用字符串的方式保存住,然后在eval方法中再把字符串重新解析為語句。
apply同理來實現(xiàn)apply:
Function.prototype.Zapply = function (othis) { othis.fn = this; let argsArr = arguments[1]; if (!arguments[1]) { let args = []; for(let i = 0, len = arguments[1].length;i < len;i++) { args.push("arguments[1][" + i + "]"); } eval("othis.fn(" + args + ")"); }else{ othis.fn(); } delete othis.fn; }
參考資料:
MDN-eval
MDN-apply
JavaScript深入之call和apply的模擬實現(xiàn)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/107898.html
今天來實現(xiàn)JavaScript的bind函數(shù)。首先看MDN的bind函數(shù)描述: 從上面可以看出來,var A = B.bind(this)函數(shù)其實干了這幾件事情: 返回一個函數(shù),且這個函數(shù)后面運行時的this就是bind(this)傳入的this 接收參數(shù),這些參數(shù)(如果有的話)作為bind()的第二個參數(shù)跟在this(或其他對象)后面,之后它們會被插入到目標函數(shù)的參數(shù)列表的開始位置,傳遞給綁定...
閱讀 2938·2023-04-26 02:22
閱讀 2292·2021-11-17 09:33
閱讀 3144·2021-09-22 16:06
閱讀 1078·2021-09-22 15:54
閱讀 3541·2019-08-29 13:44
閱讀 1921·2019-08-29 12:37
閱讀 1327·2019-08-26 14:04
閱讀 1920·2019-08-26 11:57