Analyze the difference between ES5 and ES6 apply

Overview

As we all know, ES6 adds a global, built-in, non-constructible Reflect object and provides a series of interceptable operation methods. One of them is Reflect.apply(). Let's explore the similarities and differences between it and the traditional ES5 Function.prototype.apply().

Function signature

The function signatures of the two on MDN are as follows:

Reflect.apply(target, thisArgument, argumentsList)
function.apply(thisArg, [argsArray])

The function signatures defined by TypeScript are as follows:

declare namespace Reflect {
    function apply(target: Function, thisArgument: any, argumentsList: ArrayLike<any>): any;
}
interface Function {
    apply(this: Function, thisArg: any, argArray?: any): any;
}

They all accept a this parameter and an array of parameters (or an array-like object) to be provided to the called function.

Optional parameters

The most intuitive thing to see is that the second parameter "parameter array" passed to the function by function.apply() is optional. When there is no need to pass parameters to the called function, you can not pass them or pass null or undefined values. Since function.apply() has only two parameters, in practice, even the first parameter can be omitted, and in principle an undefined value can be obtained in the implementation.

(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() requires that all parameters must be passed. If you do not want to pass any parameters to the called function, you must fill in an empty array or an empty array-like object (empty objects are also acceptable in pure JavaScript, but if it is TypeScript, you must bring a key-value pair with length: 0 to pass type checking).

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

Non-strict mode

According to the documentation, the thisArg parameter of function.apply() is different in non-strict mode. If its value is null or undefined, it will be automatically replaced by the global object (window in the browser), and basic data type values ​​will be automatically wrapped (such as the wrapped value of the literal 1 is equivalent to 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

However, after testing, it was found that the above behavior in non-strict mode is also valid for Reflect.apply(), but the MDN document does not state this.

Exception handling

Reflect.apply can be regarded as an encapsulation of Function.prototype.apply, and some exception judgments are the same. If the passed target function target is actually not callable, is not a function, etc., an exception will be triggered. But the abnormal manifestations may be different.

If we pass an object instead of a function to the target parameter, an exception should be raised.

The semantics of the exception thrown by Function.prototype.apply() are unclear. The literal translation is that .call is not a function. However, if we pass a correct and callable function object, no error will be reported. This makes people confused as to whether there is a call attribute under Function.prototype.apply?

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)
///- The output is empty, as expected

The exception thrown by Function.prototype.apply() is ambiguous. It also passes a non-callable object to the target parameter. If the second and third parameters are filled, the exception description thrown is completely different from the above:

However, the exception for Reflect.apply() passing only a non-callable object is the same as the exception for Function.prototype.apply() with all parameters:

Reflect.apply(console)
// Thrown:
// TypeError: Function.prototype.apply was called on #<Object>, which is a object and not a function

If a correct callable function is passed, the parameters of the third parameter array will be checked; this also shows that the parameter checking of Reflect.apply() is sequential:

Reflect.apply(console.log)
// Thrown:
// TypeError: CreateListFromArrayLike called on non-object

Practical Use

Although we have not seen more use cases outside of Proxy, I believe that when compatibility issues gradually become less of a problem, the usage rate will gradually increase.

We can find that the form of ES6Reflect.apply() is more intuitive and readable than the traditional ES5 usage, making it easier to see which function a line of code wants to use and perform the expected behavior.

// ES5
Function.prototype.apply.call(<Function>, undefined, [...])
<Function>.apply(undefined, [...])
// ES6
Reflect.apply(<Function>, undefined, [...])

Let's choose the commonly used Object.prototype.toString for comparison:

Object.prototype.toString.apply(/ /)
// '[object RegExp]'
Reflect.apply(Object.prototype.toString, //, [])
// '[object RegExp]'

Some people may disagree, isn’t this longer and more troublesome to write? Opinions vary on this point. Repeated calls to a single function do require more code. For scenarios that require flexible use, it is more in line with the functional style. You only need to specify the function object and pass parameters to get the expected results.

But for this case, there may be a small problem: a new empty array needs to be created for each call! Although the performance of most devices is good enough now, programmers do not need to consider this loss, but for high-performance and unoptimized engine scenarios, it may be better to create a reusable empty array first:

const EmptyArgs = []

function getType(obj) {
    return Reflect.apply(
        Object.prototype.toString,
        obj,
        EmptyArgs
    )
}

Another scenario where String.fromCharCode() is called can be used to confuse strings in code:

Reflect.apply(
    String.fromCharCode,
    undefined,
    [104, 101, 108, 108,
     111, 32, 119, 111,
     114, 108, 100, 33]
)
// 'hello world!'

It may be more useful for functions that can pass multiple parameters, such as Math.max(), such as:

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

However, since the language standard does not specify the maximum number of parameters, if an array that is too large is passed in, an error may be reported that the stack size exceeds the limit. This size varies depending on the platform and engine. For example, node.js on PC can reach a very large size, while jsC on mobile phones may be limited to 65536, etc.

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

Summarize

Reflect.apply() provided by the new ES6 standard is more regular and easy to use. It has the following features:

1. Intuitive and easy to read, the called function is placed in the parameter, close to the functional style;

2. Exception handling is consistent and unambiguous;

3. All parameters must be passed, and compile-time error checking and type inference are more friendly.

Nowadays, vue.js 3 also makes extensive use of Proxy and Reflect in its responsive system. I hope Reflect will shine in the front-end world in the near future!

The above is the detailed analysis of the differences between apply in ES5 and ES6. For more information about the differences between ES5 and ES6, please pay attention to other related articles on 123WORDPRESS.COM!