探索 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 会在前端世界中大放异彩!

探索 Reflect.apply 与 Function.prototype.apply 的区别的更多相关文章

  1. Function.prototype.apply.call 理解分析

    首先需要了解apply,call的基本用法,其目的是改变调用方法中的this指向,将其指向为传入的对象,改变this的指向,两种方法接收参数的方式不同. 代码:console.log var cons ...

  2. javascript中 Function.prototype.apply()与Function.prototype.call() 对比详解

    Function.prototype.apply()|Function.prototype.call() apply()方法可以在使用一个指定的 this 值和一个参数数组(或类数组对象)的前提下调用 ...

  3. 关于Function.prototype.apply.call的一些补充

    宿主对象,在javascript中有三类对象,本地对象,内置对象和宿主对象.其他两类暂且不提,宿主对象是指什么呢(DOM BOM),控制台对象是文档对象模型的扩展,也被认为是宿主对象.那么,它们有什么 ...

  4. Function.prototype.apply.call

    我们先从一道简单的题目开始,前几天在git上看到的: 定义log方法,它可以代理console.log的方法.log(1,2,3)  =>  1 2 3 通常,你的答案会是这样的: functi ...

  5. Function.prototype.apply()

    文章地址:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply ...

  6. Function.prototype.call 和 Function.prototype.apply 的区别

    call和apply函数是function函数的基本属性,都可以用于更改函数对象和传递参数,是前端工程师常用的函数.具体使用方法请参考以下案列: 例如: 申明函数: var fn = function ...

  7. 箭头函数表达式和声名式函数表达式的区别以及 Function.prototype的bind, apply,call方法

    箭头函数不能用做构造函数 箭头函数没有arguments参数 箭头函数没有自己的this,是从作用域链上取this,是与箭头函数定义的位置有关的,与执行时谁调用无关,所以用call,apply,bin ...

  8. Function.prototype.call.apply作用详解

    关于call()和apply()基本用法可以参阅如下两篇文章: (1).call方法参阅JavaScript call()一章节. (2).apply方法参阅JavaScript apply()一章节 ...

  9. Function.prototype.call.apply()方法

    在看uncurrying化函数时候,碰到了Function.prototype.call.apply()的用法: 先说说uncurrying()函数: Function.prototype.uncur ...

随机推荐

  1. 又到了卸载Notepad++的时候了?

    逛开源中国(OSCHINA),无意中发现一贴<不用Notepad++,你还有这些更好的选择> 才发现,原来 Notepad++ 的作者侯今吾前几天又在 npp 的官网上发表了一篇个人政治意 ...

  2. 【Leetcode 做题学算法周刊】第二期

    首发于微信公众号<前端成长记>,写于 2019.11.05 背景 本文记录刷题过程中的整个思考过程,以供参考.主要内容涵盖: 题目分析设想 编写代码验证 查阅他人解法 思考总结 目录 20 ...

  3. Idea导入Web项目并发布到Tomcat

    Idea导入现有的Web项目并发布到Tomcat,发现Tomcat没有自动发布 问题: 导入一个Web项目时,idea并没有把他当成web,所以需要自己修改项目结构 1.导入项目 打开 File-&g ...

  4. Kruskal算法求最小生成树 笔记与思路整理

    整理一下前一段时间的最小生成树的算法.(其实是刚弄明白 Kruskal其实算是一种贪心算法.先将边按权值排序,每次选一条没选过的权值最小边加入树,若加入后成环就跳过. 先贴张图做个示例. (可视化均来 ...

  5. kettle计划任务

    在kettle中固定抽取数据,需要用到kichen命令,编好批处理脚本:bat C: cd C:\soft\kettle\data-integration kitchen /file C:\soft\ ...

  6. NOIP模拟 5

    考试的时候相当浮躁,而且脑子并不工作 T1看了几眼,觉得没思路,先skip T2一打眼,满足条件的最大值,二分!(然后就死了,根本没想有没有单调性) T3找了半天规律,一开始自己手模的K3都过不了样例 ...

  7. 程序员学点xx 之 Redis

    程序员学点xx 之 Redis 概述 其实程序员也要和操作系统打交道, 比如最常见的,部署自己电脑上的开发环境. 当然有时某些牛人, 觉得运维或基础部门的同事不够给力, 亲自上手部署服务器或线上环境, ...

  8. python学习之【第十六篇】:Python中的常用模块之OS模块、sys模块、random模块

    1. OS模块 OS模块是与操作系统交互的一个接口.内部提供了以下方法: os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname& ...

  9. 通俗易懂了解Vue的计算属性

    1.前言 之前在学习vue的过程中,一直没有搞明白计算属性是个怎么回事,以及为什么要有计算属性,使用计算属性有什么好处.今天花时间翻了翻官方文档,才搞清楚其中一二,现将学习心得总结记录如下. 2.为什 ...

  10. 当 Redis 发生高延迟时,到底发生了什么

    Redis 是一种内存数据库,将数据保存在内存中,读写效率要比传统的将数据保存在磁盘上的数据库要快很多.但是 Redis 也会发生延迟时,这是就需要我们对其产生原因有深刻的了解,以便于快速排查问题,解 ...