Home  >  Article  >  Web Front-end  >  How to play around: call and apply_javascript techniques

How to play around: call and apply_javascript techniques

WBOY
WBOYOriginal
2016-05-16 16:49:041145browse

In ECMAScript v3, these two methods are defined for the Function prototype. The functions of these two methods are the same: using these two methods, you can call functions just like calling other object methods. This sentence is from the book I copied it above, at least I didn’t understand what it meant.
The following is simple and easy to understand, let’s look at the code first:

Copy code The code is as follows:

function Introduce(name,age)
{
Document.write("My name is " name ".I am " age);
}
var p=new People();
Introduce.call(p,"Windking",20) ;

Let’s talk about the above code. After using call, Introduce becomes the method of p. Do you understand? Using the call method, the above code is equivalent to this code:

Copy code The code is as follows:

function People(name,age)
{
this.name=name;
this.age=age;
this.Introduce=function(){
document.write("My name is " name ".I am " age);
};
}

Do you understand the meaning? apply has the same effect.
Okay, let’s talk about grammar first regardless of how this method can be used in practice.
call accepts at least one parameter. The first parameter of call refers to the object you need. For example, in the above example, the Introduce method hopes that it can be called by object p, then use p as the first parameter of call. parameters. The remaining number of parameters is arbitrary and serves as parameters for the Introduce method. The order is in the order in which the Introduce parameters are declared. For example, Introduce.call(p,"Windking",20), if Introduce is an instance method of p, then it will be like this: p.Introduce("Windking",20). Do you understand? Remember, the order of parameters passed in must be consistent with the order in which the parameters are declared in the function.
After understanding call, the apply method is easy to understand. The only difference between apply and call is that call accepts at least one parameter, while apply only accepts two parameters. The first parameter is the same as call, and the second parameter is a parameter with A collection of subscripts, for example, Introduce.call(p,"Windking",20) can be rewritten as Introduce.apply(p,["Windking",20]). Do you understand this time?
So what are the uses of these two methods? If we just want to implement the above function, wouldn't it be better to implement Introduce as People's method?

I summarize the application into two items:

1. Sharing method. Let’s look at the code first:

Copy code The code is as follows:

function Introduce(name,age)
{
         document.write("My name is " name ".I am " age);
}

This is a self-introduction method. Now suppose we have a boy class and a girl class (I am just here for demonstration, in practice, I will use a People parent class), because their Introduce They are all the same, so we can share this method.

Copy code The code is as follows:

function Boy()
{
this .BoyIntroduce=function(){
Introduce.call(this,name,age);
};
}

Similarly, it is the same in Girl. In this case, we can avoid writing code. In fact, this is a bit far-fetched, because we can also write it as:

Copy code The code is as follows:

function Boy()
{
this .BoyIntroduce=function(){
     Introduce(name,age);
}
}

But at this time, if we use Apply, it will look much simpler:

Copy code The code is as follows:

function Boy()
{
this .BoyIntroduce=function(){
Introduce.apply(this,arguments);
};
}

Isn’t it much simpler? If there are many parameters, then there is no need to write such a dense series of parameters!

2. Cross-domain calls

Look at a simple example (just for demonstration, no value):

Copy code The code is as follows:

function Boy(name,age)
{
this.BoyIntroduce=function(){
document.write("My name is " name ".I am " age);
}
}
function Girl(name,age)
{

}

This is a Boy and a Girl class, and then we write the following code:

var b=new Boy("Windking",20);
b.BoyIntroduce();

No objection to this. Suppose one day a girl wants to introduce herself and just uses it occasionally, then I don't need to modify the Girl class, because other girls are shy and don't like to introduce themselves. Then I can do this at this time.

var g=new Girl("Xuan",22);
Introduce.call(g,"Xuan",22);

3. The real use - inheritance

Okay, the above are all trivial and unrefined. The following is the most widely used application of call and apply, which is used for structural inheritance.

Statement:
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