探索 Reflect.apply 與 Function.prototype.apply 的區別
探索 Reflect.apply 與 Function.prototype.apply 的區別
眾所周知, ES6 新增了一個全域性、內建、不可構造的 Reflect
物件,並提供了其下一系列可被攔截的操作方法。其中一個便是 Reflect.apply()
了。下面探究下它與傳統 ES5 的 Function.prototype.apply()
之間有什麼異同。
函式簽名
MDN 上兩者的函式簽名分別如下:
Reflect.apply(target, thisArgument, argumentsList)
function.apply(thisArg, [argsArray])
而 TypeScript 定義的函式簽名則分別如下:
declare namespace Reflect {
function apply(target: Function, thisArgument: any, argumentsList: ArrayLike<any>): any;
}
interface Function {
apply(this: Function, thisArg: any, argArray?: any): any;
}
它們都接受一個提供給被呼叫函式的 this 引數和一個引數陣列(或一個類陣列物件, array-like object )。
可選引數
可以最直觀看到的是, function.apply()
null
、 undefined
值。而由於 function.apply()
只有兩個引數,所以實踐中連第一個引數也可以一起不傳,原理上可以在實現中獲得 undefined
值。
(function () { console.log('test1') }).apply() // test1 (function () { console.log('test2') }).apply(undefined, []) // test2 (function () { console.log('test3') }).apply(undefined, {}) // test3 (function (text) { console.log(text) }).apply(undefined, ['test4']) // test4
而 Reflect.apply()
則要求所有引數都必傳,如果希望不傳引數給被呼叫的函式,則必須填一個空陣列或者空的類陣列物件(純 JavaScript 下空物件也可以,若是 TypeScript 則需帶上 length: 0
的鍵值對以通過型別檢查)。
Reflect.apply(function () { console.log('test1') }, undefined)
// Thrown:
// TypeError: CreateListFromArrayLike called on non-object
Reflect.apply(function () { console.log('test2') }, undefined, [])
// test2
Reflect.apply(function () { console.log('test3') }, undefined, {})
// test3
Reflect.apply(function (text) { console.log(text) }, undefined, ['test4'])
// test4
非嚴格模式
由文件可知, function.apply()
在非嚴格模式下 thisArg
引數變現會有所不同,若它的值是 null
或 undefined
,則會被自動替換為全域性物件(瀏覽器下為 window
),而基本資料型別值則會被自動包裝(如字面量 1
的包裝值等價於 Number(1)
)。
Note that
this
may not be the actual value seen by the method: if the method is a function in non-strict mode code,null
andundefined
will be replaced with the global object, and primitive values will be boxed. This argument is not optional
(function () { console.log(this) }).apply(null)
// Window {...}
(function () { console.log(this) }).apply(1)
// Number { [[PrimitiveValue]]: 1 }
(function () { console.log(this) }).apply(true)
// Boolean { [[PrimitiveValue]]: true }
'use strict';
(function () { console.log(this) }).apply(null)
// null
(function () { console.log(this) }).apply(1)
// 1
(function () { console.log(this) }).apply(true)
// true
但經過測試,發現上述該非嚴格模式下的行為對於 Reflect.apply()
也是有效的,只是 MDN 文件沒有同樣寫明這一點。
異常處理
Reflect.apply
可視作對 Function.prototype.apply
的封裝,一些異常判斷是一樣的。如傳遞的目標函式 target
實際上不可呼叫、不是一個函式等等,都會觸發異常。但異常的表現卻可能是不一樣的。
如我們向 target
引數傳遞一個物件而非函式,應當觸發異常。
而 Function.prototype.apply()
丟擲的異常語義不明,直譯是 .call
不是一個函式,但如果我們傳遞一個正確可呼叫的函式物件,則不會報錯,讓人迷惑 Function.prototype.apply
下到底有沒有 call
屬性?
Function.prototype.apply.call()
// Thrown:
// TypeError: Function.prototype.apply.call is not a function
Function.prototype.apply.call(console)
// Thrown:
// TypeError: Function.prototype.apply.call is not a function
Function.prototype.apply.call(console.log)
///- 輸出為空,符合預期
Function.prototype.apply()
丟擲的異常具有歧義,同樣是給 target
引數傳遞不可呼叫的物件,如果補齊了第二、第三個引數,則丟擲的異常描述與上述完全不同:
Function.prototype.apply.call(console, null, [])
// Thrown:
// TypeError: Function.prototype.apply was called on #<Object>, which is a object and not a function
Function.prototype.apply.call([], null, [])
// Thrown:
// TypeError: Function.prototype.apply was called on [object Array], which is a object and not a function
Function.prototype.apply.call('', null, [])
// Thrown:
// TypeError: Function.prototype.apply was called on , which is a string and not a function
不過 Reflect.apply()
對於只傳遞一個不可呼叫物件的異常,是與 Function.prototype.apply()
全引數的異常是一樣的:
Reflect.apply(console)
// Thrown:
// TypeError: Function.prototype.apply was called on #<Object>, which is a object and not a function
而如果傳遞了正確可呼叫的函式,才會去校驗第三個引數陣列的引數;這也說明 Reflect.apply()
的引數校驗是有順序的:
Reflect.apply(console.log)
// Thrown:
// TypeError: CreateListFromArrayLike called on non-object
實際使用
雖然目前沒有在 Proxy
以外的場景看到更多的使用案例,但相信在相容性問題逐漸變得不是問題的時候,使用率會得到逐漸上升。
我們可以發現 ES6 Reflect.apply()
的形式相較於傳統 ES5 的用法,會顯得更直觀、易讀了,讓人更容易看出,一行程式碼希望使用哪個函式,執行預期的行為。
// ES5
Function.prototype.apply.call(<Function>, undefined, [...])
<Function>.apply(undefined, [...])
// ES6
Reflect.apply(<Function>, undefined, [...])
我們選擇常用的 Object.prototype.toString
比較看看:
Object.prototype.toString.apply(/ /)
// '[object RegExp]'
Reflect.apply(Object.prototype.toString, / /, [])
// '[object RegExp]'
可能有人會不同意,這不是寫得更長、更麻煩了嗎?關於這點,見仁見智,對於單一函式的重複呼叫,確實是打的程式碼更多了;對於需要靈活使用的場景,會更符合函式式的風格,只需指定函式物件、傳遞引數,即可獲得預期的結果。
但是對於這個案例來說,可能還會有一點小問題:每次呼叫都需要建立一個新的空陣列!儘管現在多數裝置效能足夠好,程式設計師不需額外考慮這點損耗,但是對於高效能、引擎又沒有優化的場景,先建立一個可重複使用的空陣列可能會更好:
const EmptyArgs = []
function getType(obj) {
return Reflect.apply(
Object.prototype.toString,
obj,
EmptyArgs
)
}
另一個呼叫 String.fromCharCode()
的場景可以做程式碼中字串的混淆:
Reflect.apply(
String.fromCharCode,
undefined,
[104, 101, 108, 108,
111, 32, 119, 111,
114, 108, 100, 33]
)
// 'hello world!'
對於可傳多個引數的函式如 Math.max()
等可能會更有用,如:
const arr = [1, 1, 2, 3, 5, 8]
Reflect.apply(Math.max, undefined, arr)
// 8
Function.prototype.apply.call(Math.max, undefined, arr)
// 8
Math.max.apply(undefined, arr)
// 8
但由於語言標準規範沒有指定最大引數個數,如果傳入太大的陣列的話也可能報超過棧大小的錯誤。這個大小因平臺和引擎而異,如 PC 端 node.js 可以達到很大的大小,而手機端的 JSC 可能就會限制到 65536 等。
const arr = new Array(Math.floor(2**18)).fill(0)
// [
// 0, 0, 0, 0,
// ... 262140 more items
// ]
Reflect.apply(Math.max, null, arr)
// Thrown:
// RangeError: Maximum call stack size exceeded
總結
ES6 新標準提供的 Reflect.apply()
更規整易用,它有如下特點:
- 直觀易讀,將被呼叫函式放在引數中,貼近函式式風格;
- 異常處理具有一致性,無歧義;
- 所有引數必傳,編譯期錯誤檢查和型別推斷更友好。
如今 Vue.js 3 也在其響應式系統中大量使用 Proxy 和 Reflect 了,期待不久的將來 Reflect 會在前端世界中大放異彩