To commemorate that I haven't written a blog for 10 years, the first blog post will start with such an interesting trick-___-
In ES5, when we call a function, if the parameters to be passed are generated based on other functions or conditions, that is, when we are not sure how many parameters will be passed, what should we do without changing the original function?
(Of course, try to avoid the situation described in this article, such as changing the parameter to object or array, etc.)
Most people may know that using apply can solve this problem perfectly:
Like call, apply the first parameter will be used as the calling object of the function, that is, the pointer of this in the calling function is rewritten as the first parameter. If it is not the method of the object, you can ignore this and pass a null.
The difference is that the following parameters, apply puts all the parameters to be passed into the calling function in an array, and call is appended in sequence like the original function.
Since it is an array, it is controllable. Generating an array based on other functions or logical judgments can achieve the purpose of passing in dynamic number parameters.
But I encountered a headache. I had to pass in dynamic parameters when creating an object with new. It only took me once every few years:
If you are using ES6, with the rest parameter, none of the above problems are problematic. Note that adding three points before the array args is not a syntax error, but a rest parameter writing method provided by ES6. You can understand it as replacing...args with args array with characters after square brackets.
But is it really impossible to implement in ES5? After all, most ES6 is syntactic sugar, and you can use tools like babel to compile to ES5. With questions, let's use babel to compile and see what we get:
I was shocked when I saw the last line. Don't be afraid. Let's analyze this code. First, let’s dismember it and look at it in three steps:
1. There is no doubt that using concat to concatenate null with our parameters into an array, as the second parameter applied, that is, we get [null, 1, 2, 3];
2. Let's calculate apply. The first parameter Foo will replace Function to call the native bind method. The content of the second parameter array will be passed in as a bind parameter, that is, Foo.bind(null, 1, 2, 3);
3. The first parameter of the bind method is similar to apply and call, modify this pointer, and the subsequent parameters can implant the default preset leading argument value for the function. That is to say, when the bind is executed, we get a Foo class with three parameter values injected in the first set of brackets, which is called FooWithArgs for the time being;
Finally, when we new FooWithArgs(); , we don't need to pass in any parameters. Equivalent to new Foo(1, 2, 3);