扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >分析ES5和ES6的apply区别
  • 608

0
分享到

分析ES5和ES6的apply区别

2024-04-02 19:04:59 608人浏览 薄情痞子
摘要

目录概述函数签名可选参数非严格模式异常处理实际使用总结概述 众所周知， es6 新增了一个全局、内建、不可构造的Reflect对象，并提供了其下一系列可被拦截的操作方法。其中一个便是

概述

众所周知， 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)）。


(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参数传递不可调用的对象，如果补齐了第二、第三个参数，则抛出的异常描述与上述完全不同：

不过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以外的场景看到更多的使用案例，但相信在兼容性问题逐渐变得不是问题的时候，使用率会得到逐渐上升。

我们可以发现 ES6Reflect.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 会在前端世界中大放异彩！

以上就是分析ES5和ES6的apply区别的详细内容，更多关于ES5和ES6区别的资料请关注编程网其它相关文章！

--结束END--

本文标题: 分析ES5和ES6的apply区别

本文链接: https://lsjlt.com/news/125174.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 分析ES5和ES6的apply区别
    目录概述函数签名可选参数非严格模式异常处理实际使用总结概述 众所周知， ES6 新增了一个全局、内建、不可构造的Reflect对象，并提供了其下一系列可被拦截的操作方法。其中一个便是...
    99+
    2024-04-02
  • es6和es5有什么区别
    这篇文章主要介绍了es6和es5有什么区别，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 es6和es5的区别：...
    99+
    2024-04-02
  • es6和es5的示例分析
    什么是es6和es5，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。ES5是：strict模式、Array增加方法、Object方法；ES6是：...
    99+
    2024-04-02
  • ES5和Es6数组方法的区别
    本篇文章给大家分享的是有关ES5和Es6数组方法的区别，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。初衷： 在面试中，面试官经常问到说一下Es...
    99+
    2024-04-02
  • es5和es6的继承有哪些区别
    这篇“es5和es6的继承有哪些区别”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“es5和...
    99+
    2024-04-02
  • es5和es6作用域的区别有哪些
    本文小编为大家详细介绍“es5和es6作用域的区别有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“es5和es6作用域的区别有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识...
    99+
    2024-04-02
  • ES6 关键字 let 和 ES5 及关键字 var 的区别解析
    目录var 关键字let 关键字补充var 关键字 在 ES5 及以前，通过var在块级作用域中声明的变量，外边也可以访问。块级作用域就是一对{}的作用域；块级作用域可以是控制语句的...
    99+
    2024-04-02
  • es6继承和es5继承有什么区别
    这篇文章给大家分享的是有关es6继承和es5继承有什么区别的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 es5和es6继承的区别： ES5的继承是通...
    99+
    2024-04-02
  • es5函数和es6箭头函数有哪些区别
    本篇内容介绍了“es5函数和es6箭头函数有哪些区别”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！区别：1、写法不同，ES6箭头函数为“()...
    99+
    2023-07-04
  • es6和commonJs的区别解析
    目录一、export语句的区别：2. 加载方式不同：3.应用场景不同：4.对象引用不同：5. 循环依赖处理不同：总结：一、export语句的区别： ES6 和 Common...
    99+
    2023-03-21
    es6和commonJs区别 es6和commonJs区别
  • es6与es5的构造函数有哪些区别
    这篇文章主要介绍“es6与es5的构造函数有哪些区别”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“es6与es5的构造函数有哪些区别”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • es5和es6指的是什么
    本文小编为大家详细介绍“es5和es6指的是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“es5和es6指的是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。es5全称“ECMAScript 5”，是EC...
    99+
    2023-07-04
  • CommonJS与ES6 Module的使用区别分析
    目录前言1. CommonJS1.1 导出1.2 导入2. ES6 Module2.1 导出2.2 导入3. CommonJS 与 ES6 Module 的区别3.1 区别一3.2 ...
    99+
    2024-04-02
  • JS中call和apply的区别
    一、参数传递方式不同 call方法接受的是若干个参数列表，名列前茅个参数表示要改变上下文的对象，后面的参数表示要传递给函数的参数。 apply方法接收的是两个参数，名列前茅个参数表示要改变上下文的对象，第二个参数则是一个包含多个...
    99+
    2023-10-29
    区别 JS call
  • js中ES6继承和ES5继承之间的差别
    目录继承方式ES5prototype继承ES6class继承二者区别ES5prototype继承内部实现方式ES6class继承内部实现方式扩展继承方式 ES5 prototype ...
    99+
    2024-04-02
  • call()和apply()之间的区别是什么
    这篇文章主要介绍call()和apply()之间的区别是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 不同之处是： call（） 方法分别接受参数。 apply（） 方法...
    99+
    2024-04-02
  • es6和commonJs的区别有哪些
    这篇文章主要介绍了es6和commonJs的区别有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇es6和commonJs的区别有哪些文章都会有所收获，下面我们一起来看看吧。一、export语句的区别：ES6...
    99+
    2023-07-05
  • Document和Document.all区别分析
    Document是一个对象，表示整个HTML文档。它提供了对文档的操作和访问方法，比如获取元素、修改元素等。Document.all...
    99+
    2023-08-14
    Document
  • javascript中call和apply有哪些区别
    今天小编给大家分享一下javascript中call和apply有哪些区别的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收...
    99+
    2024-04-02
  • python中apply和transform有什么区别
    这篇文章将为大家详细讲解有关python中apply和transform有什么区别，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。python是什么意思Python是一种跨平台的、具有解释性、...
    99+
    2023-06-15
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作