What is the difference between call and apply in javascript

WBOY
Release: 2022-01-28 15:24:24
Original
2408 people have browsed it

In JavaScript, the call() method and the apply() method have the same function. The difference lies in the way of receiving parameters. When using the call() method, the parameters passed to the function must be listed one by one. Use When apply(), the parameter array is passed to the function.

What is the difference between call and apply in javascript

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What is the difference between call and apply in javascript

The call() method calls a function with a specified this value and separately provided parameters (list of parameters).

Note: The function of this method is similar to the apply() method. The only difference is that the call() method accepts a list of several parameters, while the apply() method accepts a list containing multiple parameters. array.

Syntax

fun.call(thisObj[, arg1[, arg2[, ...]]])
Copy after login

Definition: Call a method of an object to replace the current object with another object.

Description:

The call method can be used to call a method instead of another object. The call method changes the object context of a function from the initial context to the new object specified by thisObj.

If the thisObj parameter is not provided, the Global object is used as thisObj.

Parameters

ThisObj

The this value specified when the fun function is running. It should be noted that the specified this value is not necessarily the real this value when the function is executed. If the function is in non-strict mode, the

specified as null and undefined will automatically point to the global value. Object (window object in browsers), and this whose value is a primitive value (number, string, Boolean value) will point to the automatic wrapping object of the primitive value.

  arg1, arg2, ...

  Specified parameter list.

Return value

The return result includes the specified this value and parameters.

apply()

apply() method calls a function with a specified this value and provided as an array (or array-like object) parameter.

Syntax

fun.apply(thisObj, [argsArray])
Copy after login

Definition: Apply a method of an object to replace the current object with another object.

Description:

If argsArray is not a valid array or is not an arguments object, a TypeError will be caused.

  If neither argArray nor thisObj is provided, the Global object will be used as thisObj and no parameters can be passed.

Parameters

ThisObj

The this value specified when the fun function is running. It should be noted that the specified this value is not necessarily the real this value when the function is executed. If the function is in non-strict mode, the specified

will automatically point to the global object when it is null or undefined ( It is the window object in the browser), and this whose value is a primitive value (number, string, Boolean value) will point to the automatic wrapping object of the primitive value.

 argsArray

  An array or array-like object, the array elements of which will be passed to the fun function as separate parameters. If the value of this parameter is null or undefined, it means that no parameters need to be passed in. Starting from ECMAScript 5

, it is possible to use array-like objects.

Summary

Both have the same effect, they both bind obj (i.e. this) to thisObj. At this time, thisObj has the properties and methods of obj. In other words, thisObj "inherits" the properties and methods of obj.

The only difference is that apply accepts array parameters and call accepts continuous parameters.

The call() method and the apply() method have the same function. Their difference lies in the way they receive parameters. For call(), the first parameter is the value of this which does not change. What changes is that the remaining parameters are passed directly to the function. (When using the call() method, the parameters passed to the function must be listed one by one. When using apply(), the parameter array is passed to the function) The following code explains:

function add(c, d){
    return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 
Copy after login

Both call and apply It exists to change the context when a certain function is running. In other words, it is to change the pointer of this inside the function body. Because JavaScript functions have the concepts of "definition context" and "runtime context" and "context can be changed".

The functions of the two are exactly the same, but the way of accepting parameters is different. For example, there is a function fun defined as follows:

var fun = function(arg1, arg2) {};
Copy after login

can be called through fun.call(this, arg1, arg2); or fun.apply(this, [arg1, arg2]);. Among them, this is the context you want to specify, which can be any JavaScript object (everything in JavaScript is an object). call needs to pass the parameters in order, while apply puts the parameters in an array.

In JavaScript, the number of parameters of a function is not fixed, so in terms of applicable conditions, when your parameters clearly know the number, use call, and when you are not sure, use apply, and then push the parameters Pass it into the array. When the number of parameters is uncertain, all parameters can be traversed inside the function through the arguments array.

Related recommendations: javascript learning tutorial

The above is the detailed content of What is the difference between call and apply in javascript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template