Use apply and bind in JS to pass in a dynamic number of parameters to a function or class_javascript skills

To commemorate 10 years of not blogging, let’s start my first blog post with such an interesting tip -___-

In ES5, when we call a function, if the parameters to be passed in are generated based on other functions or conditions, that is to say, when it is not sure how many parameters will be passed in, the original function will not be changed. What should we do next?

(Of course, if you can avoid the situation described in this article, try to avoid it, such as changing the parameters to object or array, etc.)

Most people may know that applying can perfectly solve this problem:

Apply, like call, will use the first parameter as the calling object of the function, that is, the this pointer in the calling function is rewritten as the first parameter. If it is not an object method, you can ignore this and pass in a null. Can.

The difference lies in the following parameters. apply puts all the parameters to be passed into the calling function in an array, and call appends them 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 a dynamic number of parameters.

But I encountered a headache. I have to pass in dynamic parameters when creating an object with new. This is a problem I only encounter once every few years:

If you are using ES6 and have the rest parameter, none of the above problems will be a problem. Note that adding three dots in front of the array args is not a syntax error, but the rest parameter writing method provided by ES6. You can understand it as replacing...args with the characters after removing the square brackets in the args array.

But is there really no way to achieve it in ES5? After all, most of ES6 is syntactic sugar and can be compiled into ES5 using tools like babel. If you have any questions, let’s compile it with babel and see what we get:

You were shocked when you saw the last line, don’t be afraid, let us analyze this code. First, let’s dissect it and look at it in three steps:

1. There is no doubt that using concat to connect null and our parameters into an array, as the second parameter of apply, we get [null, 1, 2, 3];

2. Let us 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 the parameter of bind, that is, Foo.bind(null, 1 , 2, 3);

3. The first parameter of the bind method is similar to apply and call. It modifies the this pointer, and the subsequent parameters can implant the default preset leading argument value for the function, that is to say, after bind is executed Within the first set of parentheses we get a Foo class that has three parameter values ​​injected into it, let’s call it FooWithArgs;

Finally, when we new FooWithArgs();, we don’t need to pass in any parameters. Equivalent to new Foo(1, 2, 3);