The first time I translated a technical article, I laughed at you!
Translated original text:
Function.apply and Function.call in JavaScript
The first paragraph is omitted.
Each JavaScript function has many attached methods, including toString(), call() and apply(). It sounds like you'll find it strange that a function might have its own methods, but remember that every function in JavaScript is an object. Take a look at this article and review the (refresher) JavaScript features. You may also want to know the difference between functions and methods in JavaScript. I think the description of "functions" and "methods" is just a habitual convention of JavaScript. Functions are based on themselves (for example: alert()), and methods are the attributes of an object inside the function (dictionary), and we call methods through objects. Each JavaScript object has a toString() method. The following is an example of the code. In a function object, we can use the toString() method.
function foo(){ alert('x');}alert(foo.toString());Because functions are objects, they have their own properties and methods. We can think of them as data. In this article, we only focus on the methods of two functions apply() and call().
Let's start with the following code:
var x = 10;function f(){ alert(this.x);}f();We define a global function f(). f() accesses the variable x through this keyword, but it should be noted that we cannot call this function through an instance of an object. What object does this point to? This will point to this global object. Our variable x is defined in this global object. The above code can run normally. The running result will display a dialog box, and 10 is displayed in the dialog box.
We can call call() and apply() through this. As the following example shows how to use call():
var x = 10;var o = { x : 15};function f(){ alert(this.x);}f();f.call(o);First, calling f() will display the dialog box of 10, because this point to the global object at this time. Then we call the call() method of the f function, the parameter passed in is o, and the run result shows the value of the x attribute in o 15. The call() method will use its first parameter as this pointer to the f function. That is, we will tell the runtime which object this in the f function points to.
This jump sounds a bit funny, and it's even anomaly for C++, Java, and C# programmers. These are all interesting parts of ECMAScript.
You can also pass parameters to the function through call():
var x = 10;var o = { x : 15};function f(){ alert(this.x);}f();f.call(o);apply() and call() are similar, except that apply() requires that the second parameter must be an array. This array will be passed as an argument to the target function.
var x = 10;var o = {x : 15};function f(message) { alert(message); alert(this.x);}f('invoking f');f.apply(o, ['invoking f through apply']);The apply() method is useful because we can create a function without caring about the parameters of the target method. This function can pass additional parameters to the method through the second array parameter of apply().
var o = {x : 15};function f1(message1) { alert(message1 + this.x);}function f2(message1, message2) { alert(message1 + (this.x * this.x) + message2);}function g(object, func, args) { func.apply(object, args);}g(o, f1, ['the value of x = ']);g(o, f2, ['the value of x squared = ', '. Wow!']);There is something wrong with this syntax. In order to call the apply() method, we force the objective function to use the parameters in the array. Fortunately, there is a way to make this syntax easier. Before this, we must first introduce one: parameter identifier.
In JavaScript, each function actually has a variable-length parameter list. This means that even if a function has only one parameter, we can pass 5 parameters to it. The following code will not have any errors, and the result shows "H".
function f(message) { alert(message);}f('H', 'e', 'l', 'l', 'o');In f(), if we don't want to accept other parameters, we can use the keyword arguments. arguments represent an argument object, which has an attribute representing length similar to an array.
function f(message) { // The value of message is the same as arguments[0] for(var i = 1; i < arguments.length; i++){ message += arguments[i]; } alert(message);}// The result shows "Hello"f('H', 'e', 'l', 'l', 'o');You should know that strictly speaking, arguments are not an array. arguments have a length attribute, but there are no split, push, and pop methods. In the previous g() function, we can copy the required parameters from arguments, form an array, and then pass this array to apply().
var o = {x : 15};function f(message1, message2) { alert(message1 + ( this.x * this.x) + message2);}function g(object, func) { // arguments[0] = object // arguments[1] = func var args = []; for(var i = 2; i < arguments.length; i++) { args.push(arguments[i]); } func.apply(object, args);}g(o, f, 'The value of x squared = ', '. Wow!');When we call g(), we can pass additional arguments as parameters instead of stuffing the arguments into an array.