探索 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
thismay not be the actual value seen by the method: if the method is a function in non-strict mode code,nullandundefinedwill 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 會在前端世界中大放異彩！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/166509.html
標籤：JavaScript