JS Call and apply

In the case of an example, what is the use of bind, call, and apply on a half-occasion?
The "one object A" method is referred to by "another object B" (Please note ReferencesThe meaning of the distinction called); The This scope within the method of "object A" does not point to "object A", and this time you use this. An error occurs when an XX item invokes a property of object A.

Give an example;

var aHello = {    name : "hello",    showName : function(){        console.log(this.name);        //console.log(this.tagName);    }}document.querySelector(‘a‘).onclick = aHello.showName;

This time because the "Object Ahello" method ShowName by "Object Document.queryselector (' a ')" References, so this in showname does not point to "Ahello", pointing to "Object Document.queryselector (' a ')", you can remove the comment to verify.

But our demand is that when you click a, the name of the Ahello is displayed.

What should we do at this time?

Method One: In the onclick when the use of anonymous functions, anonymous functions and then Call theThe method of object Ahello ";
Such as:

var aHello = {    name : "hello",    showName : function(){        console.log(this.name);    }}document.querySelector(‘a‘).onclick = function(){    aHello.showName();}

Ok! Happy to solve the problem;

However, it is not too much to think. Let's derive the second method and then say the difference between bind and call and apply;

Method Two: Because References, the onclick changes the direction of this in the "Object Ahello" ShowName. So we have to be in " Reference "The ShowName method is re-bound to the new point;
Such as:

var aHello = {    name : "hello",    showName : function(){        console.log(this.name);    }}document.querySelector(‘a‘).onclick = aHello.showName.bind(aHello);

Well! On the tall, don't write too much code.

Next talk about the difference between bind and apply, call;
First of all, these methods belong to "prototype prototype" method.

The teacher may not have heard of the "reference" and "call" so with a temporary and permanent concept to explain, do technology, it is best not to listen to the teacher's ...



Also used in the previous example (casually cite the main distinction between the difference, we do not criticize);

var aHello = {    name : "hello",    setYourAge : function(name,age){       console.log(name);       console.log(age);    }}document.querySelector(‘a‘).onclick = aHello.setYourAge.call(aHello,‘王佳欣‘,25);

This time you can see the open page, the browser console will immediately output "Wang Jiaxin", "25";
Then, when you click again, not at all, then output; OK, this is the meaning of "call";
Call and apply are the meanings of calling object methods, which means that the following 3 lines of code are actually implemented in the same way;

aHello.setYourAge.call(aHello,‘王佳欣‘,25);aHello.setYourAge.apply(aHello,[‘王佳欣‘,25]);aHello.setYourAge(‘王佳欣‘,25);

Now that you can call directly, why do you want to invoke and apply the method? the difference between call, apply, and bindBar;

var aHello = {    name : "hello",    setYourAge : function(name,age){       console.log(name);       console.log(age);    }}document.querySelector(‘a‘).onclick = aHello.setYourAge.bind(aHello,‘王佳欣‘,25);

The role of BIND is "reference", this time you open the browser console will not have output. After you click on the a tag, there will be output, point once, output once.
To be rude, this is the difference between "calling" and "referencing" immediately.

As we said above, the following three innings code implementations are the same. So what does call and apply do?

aHello.setYourAge.call(aHello,‘王佳欣‘,25);aHello.setYourAge.apply(aHello,[‘王佳欣‘,25]);aHello.setYourAge(‘王佳欣‘,25);

What's the role of call and apply?
Do you have such a need in development (I always like to use demand as a portal)
We often do some common objects in our project that are used to deal with some of our common processes. For example: General validation methods; (Note: Many people prefer to use inherited base classes as an example ...). I can't think of a good succession example, just use the General class example! )

/*通用验证对象*/var validator = {    validateName : function(){         console.log(this.name);    },    validateAge  : function(){         console.log(this.age)    }    //.....}

As you can see in our "Universal Object Validator", there is no attribute defined (name, age).

This time, for example, we have two objects that need to be validated;

/*对象kobe*/var kobe = {    name : ‘kobe bryant‘,    age  : -1}/*对象 allen*/ var allen = {    name : ‘allen iverson‘,    age  : 10}

Then we need to call or apply when we invoke validation.
Such as:

var isKobeAgeValid = validator.call(kobe);var isAllenAgeValid = validator.call(allen);

Amount Almost done ..... Reprinted from Wang Jiaxin
Links: http://www.zhihu.com/question/20289071/answer/93261557
Source: Know
Copyright belongs to the author, please contact the author for authorization.

JS Call and apply