面試官問:能否模擬實現JS的call和apply方法
其中模擬bind
方法時是使用的call
和apply
修改this
指向。但面試官可能問:能否不用call
和apply
來實現呢。意思也就是需要模擬實現call
和apply
的了。
附上之前寫文章寫過的一段話:已經有很多模擬實現call
和apply
的文章,為什麼自己還要寫一遍呢。學習就好比是座大山,人們沿著不同的路登山,分享著自己看到的風景。你不一定能看到別人看到的風景,體會到別人的心情。只有自己去登山,才能看到不一樣的風景,體會才更加深刻。
先通過MDN
認識下call
和apply
JavaScript%2FReference%2FGlobal_Objects%2FFunction%2Fcall" rel="nofollow,noindex">MDN 文件:Function.prototype.call()
語法
fun.call(thisArg, arg1, arg2, ...) 複製程式碼
thisArg
在fun
函式執行時指定的this
值。需要注意的是,指定的this
值並不一定是該函式執行時真正的this
值,如果這個函式處於非嚴格模式
下,則指定為null
和undefined
的this
值會自動指向全域性物件(瀏覽器中就是window
物件),同時值為原始值(數字,字串,布林值)的this
會指向該原始值的自動包裝物件。
arg1, arg2, ...
指定的引數列表
返回值
返回值是你呼叫的方法的返回值,若該方法沒有返回值,則返回undefined
。
JavaScript%2FReference%2FGlobal_Objects%2FFunction%2Fapply" rel="nofollow,noindex">MDN 文件:Function.prototype.apply()
func.apply(thisArg, [argsArray]) 複製程式碼
thisArg
可選的。在func
函式執行時使用的this
值。請注意,this
可能不是該方法看到的實際值:如果這個函式處於非嚴格模式
下,則指定為null
或undefined
時會自動替換為指向全域性物件,原始值會被包裝。
argsArray
可選的。一個數組或者類陣列物件,其中的陣列元素將作為單獨的引數傳給func
函式。如果該引數的值為null
或undefined
,則表示不需要傳入任何引數。從ECMAScript 5
開始可以使用類陣列物件。
返回值
呼叫有指定this值和引數的函式的結果。 直接先看例子1
call
和apply
的異同
相同點:
1、call
和apply
的第一個引數thisArg
,都是func
執行時指定的this
。而且,this
可能不是該方法看到的實際值:如果這個函式處於非嚴格模式
下,則指定為null
或undefined
時會自動替換為指向全域性物件,原始值會被包裝。
2、都可以只傳遞一個引數。
不同點:apply
只接收兩個引數,第二個引數可以是陣列也可以是類陣列,其實也可以是物件,後續的引數忽略不計。call
接收第二個及以後一系列的引數。
看兩個簡單例子1和2**:
// 例子1:瀏覽器環境 非嚴格模式下 var doSth = function(a, b){ console.log(this); console.log([a, b]); } doSth.apply(null, [1, 2]); // this是window// [1, 2] doSth.apply(0, [1, 2]); // this 是 Number(0) // [1, 2] doSth.apply(true); // this 是 Boolean(true) // [undefined, undefined] doSth.call(undefined, 1, 2); // this 是 window // [1, 2] doSth.call('0', 1, {a: 1}); // this 是 String('0') // [1, {a: 1}] 複製程式碼
// 例子2:瀏覽器環境 嚴格模式下 'use strict'; var doSth2 = function(a, b){ console.log(this); console.log([a, b]); } doSth2.call(0, 1, 2); // this 是 0 // [1, 2] doSth2.apply('1'); // this 是 '1' // [undefined, undefined] doSth2.apply(null, [1, 2]); // this 是 null // [1, 2] 複製程式碼
typeof
有7
種類型(undefined number string boolean symbol object function
),筆者都驗證了一遍:
更加驗證了相同點第一點,嚴格模式下,函式的this
值就是call
和apply
的第一個引數thisArg
,非嚴格模式下,thisArg
值被指定為null
或undefined
時this
值會自動替換為指向全域性物件,原始值則會被自動包裝,也就是new Object()
。
重新認識了call
和apply
會發現:
它們作用都是一樣的,改變函式裡的this
指向為第一個引數thisArg
,如果明確有多少引數,那可以用call
,不明確則可以使用apply
。也就是說完全可以不使用call
,而使用apply
代替。
也就是說,我們只需要模擬實現apply
,call
可以根據引數個數都放在一個數組中,給到apply
即可。
模擬實現apply
既然準備模擬實現apply
,那先得看看ES5
規範。
ES5規範 英文版
,
ES5規範 中文版
。apply
的規範下一個就是call
的規範,可以點選開啟新標籤頁去檢視,這裡摘抄一部分。
Function.prototype.apply (thisArg, argArray)
當以thisArg
和argArray
為引數在一個func
物件上呼叫apply
方法,採用如下步驟:
1.如果IsCallable(func)
是false
, 則丟擲一個TypeError
異常。
2.如果argArray
是null
或undefined
, 則返回提供thisArg
作為this
值並以空引數列表呼叫func
的[[Call]]
內部方法的結果。
3.返回提供thisArg
作為this
值並以空引數列表呼叫func
的[[Call]]
內部方法的結果。
4.如果Type(argArray)
不是Object
, 則丟擲一個TypeError
異常。
5~8 略
9.提供thisArg
作為this
值並以argList
作為引數列表,呼叫func
的[[Call]]
內部方法,返回結果。
apply
方法的length
屬性是2
。
在外面傳入的thisArg
值會修改併成為this
值。thisArg
是undefined
或null
時它會被替換成全域性物件,所有其他值會被應用ToObject
並將結果作為this
值,這是第三版引入的更改。
結合上文和規範,如何將函式裡的this
指向第一個引數thisArg
呢,這是一個問題。
這時候請出例子3
:
// 瀏覽器環境 非嚴格模式下 var doSth = function(a, b){ console.log(this); console.log(this.name); console.log([a, b]); } var student = { name: '軒轅Rowboat', doSth: doSth, }; student.doSth(1, 2); // this === student // true // '軒轅Rowboat' // [1, 2] doSth.apply(student, [1, 2]); // this === student // true // '軒轅Rowboat' // [1, 2] 複製程式碼
可以得出結論1
:在物件student
上加一個函式doSth
,再執行這個函式,這個函式裡的this
就指向了這個物件。那也就是可以在thisArg
上新增呼叫函式,執行後刪除這個函式即可。
知道這些後,我們試著容易實現第一版本:
// 瀏覽器環境 非嚴格模式 function getGlobalObject(){ return this; } Function.prototype.applyFn = function apply(thisArg, argsArray){ // `apply` 方法的 `length` 屬性是 `2`。 // 1.如果 `IsCallable(func)` 是 `false`, 則丟擲一個 `TypeError` 異常。 if(typeof this !== 'function'){ throw new TypeError(this + ' is not a function'); } // 2.如果 argArray 是 null 或 undefined, 則 // 返回提供 thisArg 作為 this 值並以空引數列表呼叫 func 的 [[Call]] 內部方法的結果。 if(typeof argsArray === 'undefined' || argsArray === null){ argsArray = []; } // 3.如果 Type(argArray) 不是 Object, 則丟擲一個 TypeError 異常 . if(argsArray !== new Object(argsArray)){ throw new TypeError('CreateListFromArrayLike called on non-object'); } if(typeof thisArg === 'undefined' || thisArg === null){ // 在外面傳入的 thisArg 值會修改併成為 this 值。 // ES3: thisArg 是 undefined 或 null 時它會被替換成全域性物件 瀏覽器裡是window thisArg = getGlobalObject(); } // ES3: 所有其他值會被應用 ToObject 並將結果作為 this 值,這是第三版引入的更改。 thisArg = new Object(thisArg); var __fn = '__fn'; thisArg[__fn] = this; // 9.提供 thisArg 作為 this 值並以 argList 作為引數列表,呼叫 func 的 [[Call]] 內部方法,返回結果 var result = thisArg[__fn](...argsArray); delete thisArg[__fn]; return result; }; 複製程式碼
實現第一版後,很容易找出兩個問題:
-
1.
__fn
同名覆蓋問題,thisArg
物件上有__fn
,那就被覆蓋瞭然後被刪除了。
針對問題1解決方案一:採用ES6
Sybmol()
獨一無二的。可以本來就是模擬ES3
的方法。如果面試官不允許用呢。
解決方案二:自己用Math.random()
模擬實現獨一無二的key
。面試時可以直接用生成時間戳即可。
// 生成UUID 通用唯一識別碼 // 大概生成 這樣一串 '18efca2d-6e25-42bf-a636-30b8f9f2de09' function generateUUID(){ var i, random; var uuid = ''; for (i = 0; i < 32; i++) { random = Math.random() * 16 | 0; if (i === 8 || i === 12 || i === 16 || i === 20) { uuid += '-'; } uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)) .toString(16); } return uuid; } // 簡單實現 // '__' + new Date().getTime(); 複製程式碼
如果這個key
萬一這物件中還是有,為了保險起見,可以做一次快取操作。比如如下程式碼:
var student = { name: '軒轅Rowboat', doSth: 'doSth', }; var originalVal = student.doSth; var hasOriginalVal = student.hasOwnProperty('doSth'); student.doSth = function(){}; delete student.doSth; // 如果沒有,`originalVal`則為undefined,直接賦值新增了一個undefined,這是不對的,所以需判斷一下。 if(hasOriginalVal){ student.doSth = originalVal; } console.log('student:', student); // { name: '軒轅Rowboat', doSth: 'doSth' } 複製程式碼
-
2.使用了
ES6
擴充套件符...
解決方案一:採用eval
來執行函式。
eval
把字串解析成程式碼執行。
語法
eval(string) 複製程式碼
引數
string
表示JavaScript
表示式,語句或一系列語句的字串。表示式可以包含變數以及已存在物件的屬性。
返回值
執行指定程式碼之後的返回值。如果返回值為空,返回undefined
解決方案二:但萬一面試官不允許用eval
呢,畢竟eval
是魔鬼。可以採用new Function()
來生成執行函式。MDN 文件:Function
語法
new Function ([arg1[, arg2[, ...argN]],] functionBody) 複製程式碼
引數
arg1, arg2, ... argN
被函式使用的引數的名稱必須是合法命名的。引數名稱是一個有效的JavaScript
識別符號的字串,或者一個用逗號分隔的有效字串的列表;例如“×”
,“theValue”
,或“A,B”
。
functionBody
一個含有包括函式定義的JavaScript
語句的字串。
接下來看兩個例子:
簡單例子: var sum = new Function('a', 'b', 'return a + b'); console.log(sum(2, 6)); 複製程式碼
// 稍微複雜點的例子: var student = { name: '軒轅Rowboat', doSth: function(argsArray){ console.log(argsArray); console.log(this.name); } }; // var result = student.doSth(['Rowboat', 18]); // 用new Function()生成函式並執行返回結果 var result = new Function('return arguments[0][arguments[1]](arguments[2][0], arguments[2][1])')(student, 'doSth', ['Rowboat', 18]); // 個數不定 // 所以可以寫一個函式生成函式程式碼: function generateFunctionCode(argsArrayLength){ var code = 'return arguments[0][arguments[1]]('; for(var i = 0; i < argsLength; i++){ if(i > 0){ code += ','; } code += 'arguments[2][' + i + ']'; } code += ')'; // return arguments[0][arguments[1]](arg1, arg2, arg3...) return code; } 複製程式碼
你可能不知道在ES3、ES5
中undefined
是能修改的
可能大部分人不知道。ES5
中雖然在全域性作用域下不能修改,但在區域性作用域中也是能修改的,不信可以複製以下測試程式碼在控制檯執行下。雖然一般情況下是不會的去修改它。
function test(){ var undefined = 3; console.log(undefined); // chrome下也是 3 } test(); 複製程式碼
所以判斷一個變數a
是不是undefined
,更嚴謹的方案是typeof a === 'undefined'
或者a === void 0;
這裡面用的是void
,void
的作用是計算表示式,始終返回undefined
,也可以這樣寫void(0)
。
更多可以檢視韓子遲
的這篇文章:為什麼用「void 0」代替「undefined」
解決了這幾個問題,比較容易實現如下程式碼。
使用new Function()
模擬實現的apply
// 瀏覽器環境 非嚴格模式 function getGlobalObject(){ return this; } function generateFunctionCode(argsArrayLength){ var code = 'return arguments[0][arguments[1]]('; for(var i = 0; i < argsArrayLength; i++){ if(i > 0){ code += ','; } code += 'arguments[2][' + i + ']'; } code += ')'; // return arguments[0][arguments[1]](arg1, arg2, arg3...) return code; } Function.prototype.applyFn = function apply(thisArg, argsArray){ // `apply` 方法的 `length` 屬性是 `2`。 // 1.如果 `IsCallable(func)` 是 `false`, 則丟擲一個 `TypeError` 異常。 if(typeof this !== 'function'){ throw new TypeError(this + ' is not a function'); } // 2.如果 argArray 是 null 或 undefined, 則 // 返回提供 thisArg 作為 this 值並以空引數列表呼叫 func 的 [[Call]] 內部方法的結果。 if(typeof argsArray === 'undefined' || argsArray === null){ argsArray = []; } // 3.如果 Type(argArray) 不是 Object, 則丟擲一個 TypeError 異常 . if(argsArray !== new Object(argsArray)){ throw new TypeError('CreateListFromArrayLike called on non-object'); } if(typeof thisArg === 'undefined' || thisArg === null){ // 在外面傳入的 thisArg 值會修改併成為 this 值。 // ES3: thisArg 是 undefined 或 null 時它會被替換成全域性物件 瀏覽器裡是window thisArg = getGlobalObject(); } // ES3: 所有其他值會被應用 ToObject 並將結果作為 this 值,這是第三版引入的更改。 thisArg = new Object(thisArg); var __fn = '__' + new Date().getTime(); // 萬一還是有 先儲存一份,刪除後,再恢復該值 var originalVal = thisArg[__fn]; // 是否有原始值 var hasOriginalVal = thisArg.hasOwnProperty(__fn); thisArg[__fn] = this; // 9.提供 `thisArg` 作為 `this` 值並以 `argList` 作為引數列表,呼叫 `func` 的 `[[Call]]` 內部方法,返回結果。 // ES6版 // var result = thisArg[__fn](...args); var code = generateFunctionCode(argsArray.length); var result = (new Function(code))(thisArg, __fn, argsArray); delete thisArg[__fn]; if(hasOriginalVal){ thisArg[__fn] = originalVal; } return result; }; 複製程式碼
利用模擬實現的apply
模擬實現call
Function.prototype.callFn = function call(thisArg){ var argsArray = []; var argumentsLength = arguments.length; for(var i = 0; i < argumentsLength - 1; i++){ // argsArray.push(arguments[i + 1]); argsArray[i] = arguments[i + 1]; } console.log('argsArray:', argsArray); return this.applyFn(thisArg, argsArray); } // 測試例子 var doSth = function (name, age){ var type = Object.prototype.toString.call(this); console.log(typeof doSth); console.log(this === firstArg); console.log('type:', type); console.log('this:', this); console.log('args:', [name, age], arguments); return 'this--'; }; var name = 'window'; var student = { name: '軒轅Rowboat', age: 18, doSth: 'doSth', __fn: 'doSth', }; var firstArg = student; var result = doSth.applyFn(firstArg, [1, {name: 'Rowboat'}]); var result2 = doSth.callFn(firstArg, 1, {name: 'Rowboat'}); console.log('result:', result); console.log('result2:', result2); 複製程式碼
細心的你會發現註釋了這一句argsArray.push(arguments[i + 1]);
,事實上push
方法,內部也有一層迴圈。所以理論上不使用push
效能會更好些。面試官也可能根據這點來問時間複雜度和空間複雜度的問題。
// 看看V8引擎中的具體實現: function ArrayPush() { var n = TO_UINT32( this.length );// 被push的物件的length var m = %_ArgumentsLength();// push的引數個數 for (var i = 0; i < m; i++) { this[ i + n ] = %_Arguments( i );// 複製元素(1) } this.length = n + m;// 修正length屬性的值(2) return this.length; }; 複製程式碼
行文至此,就基本結束了,你可能還發現就是寫的非嚴格模式下,thisArg
原始值會包裝成物件,新增函式並執行,再刪除。而嚴格模式下還是原始值這個沒有實現,而且萬一這個物件是凍結物件呢,Object.freeze({})
,是無法在這個物件上新增屬性的。所以這個方法只能算是非嚴格模式下的簡版實現。最後來總結一下。
總結
通過MDN
認識call
和apply
,閱讀ES5
規範,到模擬實現apply
,再實現call
。
就是使用在物件上新增呼叫apply
的函式執行,這時的呼叫函式的this
就指向了這個thisArg
,再返回結果。引出了ES6 Symbol
,ES6
的擴充套件符...
、eval
、new Function()
,嚴格模式等。
事實上,現實業務場景不需要去模擬實現call
和apply
,畢竟是ES3
就提供的方法。但面試官可以通過這個面試題考察候選人很多基礎知識。如:call
、apply
的使用。ES6 Symbol
,ES6
的擴充套件符...
,eval
,new Function()
,嚴格模式,甚至時間複雜度和空間複雜度等。
讀者發現有不妥或可改善之處,歡迎指出。另外覺得寫得不錯,可以點個贊,也是對筆者的一種支援。
// 最終版版 刪除註釋版,詳細註釋看文章 // 瀏覽器環境 非嚴格模式 function getGlobalObject(){ return this; } function generateFunctionCode(argsArrayLength){ var code = 'return arguments[0][arguments[1]]('; for(var i = 0; i < argsArrayLength; i++){ if(i > 0){ code += ','; } code += 'arguments[2][' + i + ']'; } code += ')'; return code; } Function.prototype.applyFn = function apply(thisArg, argsArray){ if(typeof this !== 'function'){ throw new TypeError(this + ' is not a function'); } if(typeof argsArray === 'undefined' || argsArray === null){ argsArray = []; } if(argsArray !== new Object(argsArray)){ throw new TypeError('CreateListFromArrayLike called on non-object'); } if(typeof thisArg === 'undefined' || thisArg === null){ thisArg = getGlobalObject(); } thisArg = new Object(thisArg); var __fn = '__' + new Date().getTime(); var originalVal = thisArg[__fn]; var hasOriginalVal = thisArg.hasOwnProperty(__fn); thisArg[__fn] = this; var code = generateFunctionCode(argsArray.length); var result = (new Function(code))(thisArg, __fn, argsArray); delete thisArg[__fn]; if(hasOriginalVal){ thisArg[__fn] = originalVal; } return result; }; Function.prototype.callFn = function call(thisArg){ var argsArray = []; var argumentsLength = arguments.length; for(var i = 0; i < argumentsLength - 1; i++){ argsArray[i] = arguments[i + 1]; } return this.applyFn(thisArg, argsArray); } 複製程式碼