探索 Reflect.apply 與 Function.prototype.apply 的區別

来源:https://www.cnblogs.com/BlackStorm/archive/2019/12/03/11975502.html

探索 Reflect.apply 與 Function.prototype.apply 的區別 眾所周知, ES6 新增了一個全局、內建、不可構造的 對象,並提供了其下一系列可被攔截的操作方法。其中一個便是 了。下麵探究下它與傳統 ES5 的 之間有什麼異同。 函數簽名 MDN 上兩者的函數簽名分別 ...


探索 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() 給函數的第二個傳參「參數數組」是可選的,當不需要傳遞參數給被調用的函數時,可以不傳或傳遞 nullundefined 值。而由於 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 參數變現會有所不同,若它的值是 nullundefined ,則會被自動替換為全局對象(瀏覽器下為 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 and undefined 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() 更規整易用,它有如下特點:

  1. 直觀易讀,將被調用函數放在參數中,貼近函數式風格;
  2. 異常處理具有一致性,無歧義;
  3. 所有參數必傳,編譯期錯誤檢查和類型推斷更友好。

如今 Vue.js 3 也在其響應式系統中大量使用 Proxy 和 Reflect 了,期待不久的將來 Reflect 會在前端世界中大放異彩!


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

更多相關文章
  • switch功能:簡單條件判斷,比if判斷標簽少些不等於相同功能,視個人習慣而用。 ...
  • 實例方法 >必須要通過new的方式創建的對象(實例對象)來調用的方法 靜態方法 >直接通過大寫的構造函數的名字調用的方法(直接通過大寫的對象名字調用的) 字元串的常用屬性: .length >字元串的長度 var str = "12345"; console.log(str.length); .ch ...
  • 1、是否合法IP地址 export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); }else { const reg = /^(\d{1,2} ...
  • 導言 在一個風和日麗的一天,看完了瘋狂HTML 5+CSS 3+JavaScript講義,跟著做了書里最後一章的俄羅斯方塊小游戲,並做了一些改進,作為自己前端學習的第一站。 游戲效果: 製作思路 因為書里的俄羅斯方塊比較普通,太常規了,不是很好看,所以我在網上找了上面那張圖片,打算照著它來做。(請無 ...
  • 話不多說,先上圖 背景: 微信聊天,經常會遇見視頻發不了,嗯,還有聊天不方便的問題,於是我就自己買了伺服器,部署了一套可以直接在微信打開的網頁進行聊天,這樣只需要發送個url給朋友,就能聊天了! 由於自己無聊弄著玩的,代碼比較粗糙,各位多指正! 1、首先安裝SignalR,這步我就不做過多說明瞭 安 ...
  • String >是一個對象 字元串可以看成是字元組成的數組, 但是js中沒有字元類型 字元是一個一個的, 在別的語言中字元用一對單引號括起來 在js中字元串可以使用單引號也可以使用雙引號 因為字元串可以看成是數組, 所以, 可以通過for迴圈進行遍歷 字元串特性: 不可變性, 字元串的值是不能改變 ...
  • 常見 Uncaught TypeError: Cannot read property 'trim' of undefined 報錯原因及解決方案 ...
  • 格式化後的指定格式的日期和時間,封裝一個函數 function getDate() { var dt = new Date(); var year = dt.getFullYear(); var month = dt.getMonth(); var date = dt.getDate(); var ...
一周排行
  • 本文將介紹如何在.NET Core3環境下使用MVVM框架Prism的使用區域管理器對於View的管理 一.區域管理器 我們在之前的Prism系列構建了一個標準式Prism項目,這篇文章將會講解之前項目中用到的利用區域管理器更好的對我們的View進行管理,同樣的我們來看看官方給出的模型圖: 現在我們 ...
  • 前言: gRPC預設是ProtoFirst的,即先寫 proto文件,再生成代碼,需要人工維護proto,生成的代碼也不友好,所以出現了gRPC CodeFirst,下麵來說說我們是怎麼實現gRPC CodeFirst 目錄: 實現和WCF一樣的CodeFirst (1). 實現gRPC CodeF ...
  • [toc] 1.背景 接上篇文章 "深入淺出C 結構體——封裝乙太網心跳包的結構為例" ,使用結構體性能不佳,而且也說明瞭原因。本篇文章詳細描述了以類來封裝網路心跳包的優缺點,結果大大提升瞭解析性能。 2.用類來封裝乙太網心跳包的優缺點 2.1.優點 + 可以在類里直接new byte[],即直接實 ...
  • VS2013如何轉成VS2010且不會出現此項目與Visual Studio的當前版本不相容的報錯 解決方法: 1.用記事本打開解決方案文件“解決方案名.sln”,然後修改最上面兩行為如下代碼:Microsoft Visual Studio Solution File, Format Version ...
  • 傳遞數據至部分視圖: 在ps.cshtml中get到上面高亮的參數: ...
  • 三、C#數據類型 3.1.變數 聲明->賦值->使用 作用域:變數作用域為包含它的大括弧內 3.2.常量 1)const 數據類型 常量名稱 = 常量值 聲明常量時一定要賦值 2)@作用 輸出轉義字元 @"Hello World\n" 讓字元串換行 關鍵字用作標識符 @namespace @clas ...
  • 四、C#表達式與運算符 4.1.表達式 操作數+運算符 4.2.數學運算符 var++ 先用後加 ++var 先加後用 4.3.賦值運算符 略 4.4.關係運算符 結果只會是bool類型 1)對象的不同 數值類型比較兩個數的大小 字元類比較Unicode編碼大小,'A'=65 'a'=97 '0'= ...
  • 下麵的靜態代碼中: 現在想把箭頭所指的值,改為動態。 根據不同條件,它將有可能是1,或是3或是2或是5等。 ...
  • 使用Xaml+C#,使WPF/UWP運行在Linux和Mac上 ...
  • 前言 C 的lambda和Linq可以說是一大亮點,C 的Lambda無處不在,Linq在數據查詢上也有著舉足輕重的地位。 那麼什麼是Linq呢,Linq是 (語言集成查詢)的縮寫,可以對本地對象 集合 或者遠程數據源進行結構化的查詢操作。 那什麼又是Lambda呢?嗯,簡單來講就是匿名函數,我們不 ...
x