Translator’s Note: This article is going to talk about the knowledge points in ECMAScript 6, if you don’t even understand ES5. I have to say, You are already very behind. CSS4, HTML6, and even ES7 ES8 have all started planning, hurry up, otherwise you will be eliminated!
Sometimes, we need to expand an array into multiple elements, and then use these elements as parameters for function calls. You can use Function.prototype.apply in JavaScript to implement this expansion operation , but It cannot be applied when executing a constructor. This article explains what the spreading operation is and how to perform the spreading operation while using the new operator.
1. Spreading
Unpacking means to provide the required parameters through an array in a function call or method call, or when executing a constructor. In Python, this operation is called unpacking . ECMAScript.next already has the (expand operator) spread operator (represented as a prefix ...) to perform this expansion operation. In current JavaScript, you can The same effect is achieved through the Function.prototype.apply method.
Translator's Note: In addition to being used in the position of actual parameters to expand an array, the expansion operator can also be used in the position of formal parameters to represent the remaining parameters. Please see the MDN document I translated Remaining Parameters
2. Expand function parameters
The Math.max() method returns the maximum value from 0 to several numeric type parameters. With the expansion operation symbol, you can directly use an array as a parameter:
Math.max(...[13, 7, 30])
This is equivalent to the following writing
Math.max(13, 7, 30)
In In current JavaScript, you can use apply().
> Math.max.apply(null, [13, 7, 30])
30
The function of the apply method is: use the following calling method:
func.apply(thisValue, [param1, param2, ...])
to replace this
thisValue.func(param1, param2, ...)
It should be noted that func is not necessarily a method belonging to thisValue. apply can make it temporarily possess this method.
3. Expand the parameters of the constructor
The Date constructor accepts several numerical type parameters and generates a Date object. Through the expansion operator, you can directly pass in an array.
new Date(...[2011, 11, 24]) // Christmas Eve 2011
However, this time we cannot use the apply method to implement the expand operation because it does not work with new:
> new Date.apply(null, [2011, 11, 24])
TypeError: function apply () { [native code] } is not a constructor
The new operator expects Date.apply to be a constructor. Even if you enclose this expression in parentheses, the fundamental problem still exists: apply executes a function call, it cannot pass parameters to the new operator.
3.1 Solution Step one. Let’s make the result correct first, wait a moment Then consider how to use an array to replace the separated parameters.
new (Date.bind(null, 2011, 11, 24))
We first use bind() to create a parameterless function (the parameters are already bound inside the bound function), and then call it using new, just like calling a normal constructor. bind function The signature is as follows:
func.bind(thisValue, arg1, arg2 , ...)
bind function converts the original function
func into a brand new function. The this value of this brand new function is always the parameter The value specified by thisValue, and its initial parameters include all parameters from arg1 to the end. When this new function is called, the newly added parameters will follow the existing ones bound by
bind The parameters are followed by . MDN has
more detailed information . Note that in the above example, the first parameter is
null, because the
Date function does not require a thisValue: When called as a constructor, the
new operator will overwrite the thisValue. specified through bind
Step 2.We want to pass the array to bind. So we use apply again to convert an array into expanded parameters and pass them to the bind function.
new (Function.prototype.bind .apply(
Date, [null].concat([2011, 11, 24])))
We call the apply method on the function Function.prototype.bind, with There are two parameters:
•The first parameter: the value of this is specified as Date, which is equivalent to the Date.bind(...) written above.
•The second parameter: The parameters passed to the bind method, null and the following array [2011, 11, 24] are connected to form a new array.
3.2 A library function
Mozilla suggests encapsulating the above work into a library method. The following code is slightly modified based on their suggestion:
if (!Function.prototype.construct) {
Function.prototype.construct = function(argArray) {
if (! Array.isArray(argArray)) {
throw new TypeError("Argument must be an array");
}
var constr = this;
var nullaryFunc = Function.prototype.bind.apply(
constr, [null].concat(argArray));
return new nullaryFunc();
};
}
Run it:
> Date.construct([2011, 11, 24])
Sat Dec 24 2011 00:00:00 GMT 0100 (CET)
3.3 A seemingly simpler solution
You can manually implement the operation of the new operator. For example:
var foo = new Foo("abc");
is actually equivalent to:
var foo = Object.create(Foo.prototype);
Foo.call(foo, "abc");
According to this principle, we can write a simple library method:
Function.prototype.construct = function(argArray) {
var constr = this;
var inst = Object.create(constr.prototype);
constr.apply(inst, argArray);
return inst;
};
Alas! Calling Date as an ordinary function is the same as calling it as a constructor: it will ignore the this value specified by the first parameter in the call() and apply() methods, and will always generate and return A new instance.
Translator's Note: The author misunderstood here. Calling Date as a normal function and calling it as a constructor are completely different. Without new, regardless of whether there are parameters or not, Date() will only return the string of the current time, that is (new Date()).toString()
> Date.construct([2011, 11, 24])
{}
Translator’s Note: In the built-in constructor, When calling constructors such as Array(), Function(), RegExp(), and Error(), it is almost the same whether adding new or not. For example, Array(10) also generates an array, but Number(), String(), Boolean () is different. Without adding new, they are type conversion functions, returning the original value. Adding new is a constructor, returning an object value.
>typeof Number("1")
"number"
>typeof new Number("1")
"object"
As you can see, when operating the Date() method, the construct() method we wrote does not work as expected, and there are some other The built-in constructor also behaves the same as Date. However, if you are operating a custom constructor in a library, this method can basically work normally (a small number of constructors return the object value you specify instead of returning the default value. The automatically generated instance this).
Translator's Note: As long as the return statement of a constructor returns an object value, it will overwrite the default this value. For example:
function Func1(){
this.value = "this"; return {}
}
function Func2(){
this.value = "this"; return 1}function Func3(){ this.value = "this";}>new Func1() // The returned {} is an object value, covering the default this.{}>new Func2() //The returned 1 is an original value, so the default this.{value: "this"}>new Func3( ) //There is no return statement, and undefined is returned by default, which is a primitive value, so the default this is still returned.{value:"this"}>new Func3 //When there are no parameters, the parentheses can be omitted.{value:"this "}
What are the definitions of arrays?
js string to array
Array initialization method
c array initialization method
How to find the maximum and minimum value of array elements in Java
How to remove the first few elements of an array in php
Summary of java basic knowledge
Zero-based Java self-study tutorial
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
