The Apply and call functions in JavaScript are detailed _jquery

Source: Internet
Author: User

The first translation of technical articles, laughed!

Translation of the original:

Function.apply and Function.call in JavaScript

The first paragraph is slightly.

Each JavaScript function has a number of subordinate (attached) methods, including ToString (), call (), and apply (). It sounds as if you would be surprised that a function might have its own method, but remember that every function in JavaScript is an object. Take a look at this article and review (refresher) JavaScript features. You might also want to know the difference between functions and methods in JavaScript. I think the description of "function" and "method" is just a custom convention of JavaScript. Functions are based on themselves (for example, alert ()), and the method is the property of an object within the function (dictionary), and we invoke the method through the object. Each JavaScript object has a ToString () method, and the following code illustrates that we can use the ToString () method in a Function object.

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 focus only on the methods of two functions apply () and call ().

Let's start with the following code:

var x = ten;
function f () {
 alert (this.x);
}
f ();

We have defined a global function f (). F () accesses the variable x through the This keyword, but it is important to note that we cannot invoke 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 works correctly, and the results of the Operation display a dialog box with 10 displayed in the dialog box.

We can invoke call () and apply () through this. As the following example shows how to use Call ():

var x = ten;
var o = {x:15};
function f () {
 alert (this.x);
}
f ();
F.call (o);

The first call to F () will display the dialog box for 10, because this time it points to a global object. Then we invoke the call () method of the F function, and the incoming argument is O, and the result shows the value of the X property in O 15. The call () method uses its first argument as the this pointer to the F function. That is, we'll tell the runtime, which object the F function is pointing to.

This jump sounds funny, even for C + +, Java, and C # programmers. These are all interesting parts of the ECMAScript.

You can also pass parameters to a function by call ():

var x = ten;
var o = {x:15};
function f () {
 alert (this.x);
}
f ();
F.call (o);

Apply () is similar to call (), but apply () requires that the second argument must be an array. This array is passed as a parameter to the target function.

var x = ten;
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 having to care about the parameters of the target method. This function can pass the additional argument to the method by using 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. To invoke the Apply () method, we force the target function to use the parameters in the array. Fortunately, there is a way to make this syntax simpler. Before that, we have to introduce one: the argument identifier.

In JavaScript, each function actually has a variable-length argument list. This means that even if a function has only one argument, we can pass 5 arguments to it. The following code does not have an error, and the result is "H".

function f (message) {
 alert (message);
}
F (' H ', ' e ', ' l ', ' l ', ' o ');

In F (), if we do not want to accept other parameters, we can use the keyword arguments. Arguments represents a parameter object that has a property that represents a length that is similar to an array.

The function f (message) {
 //message value and Arguments[0] is the same for
 (var i = 1; i < arguments.length; i++) {message
  + a Rguments[i];
 }
 alert (message);
}
The results show "Hello"
f (' H ', ' e ', ' l ', ' l ', ' o ');

You should know, strictly speaking, that arguments is not an array. Arguments has a length attribute, but no split, push, pop methods. In the previous G () function, we can copy the required parameters from the arguments, form an array, and then pass the 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 the stuffing to an array.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.