Taking examples, explain the call, apply, and bind methods in JavaScript for your reference. The specific content is as follows
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function MAN(name, sex, age) { this.name = name; this.sex = sex; this.age = age; this.say = function(school,zhuanye) { console.log(this.name + " , " + this.sex + " , this year" + this.age+" year! Learn at "+school+"+zhuanye); } } function WOMAN(name, sex, age) { this.name = name; this.sex = sex; this.age = age; } var man=new MAN("Zhang San","Male",26); var woman=new WOMAN("Xiaohong","Female",18); man.say('Tsinghua University','Excavator'); man.say.call(woman,"Lanxiang Technical School","Electric Welding"); man.say.apply(woman,["New Oriental","Mars"]); man.say.bind(woman)("Deyun Club","Pop Music"); </script> </head> <body> </body></html>Why? What do call, apply, bind do? Why learn this?
It is generally used to specify this environment, and these problems usually occur before learning.
var a = { user:"Dream Chasing", fn:function(){ console.log(this.user); }}var b = a.fn;b(); //undefinedWhat's wrong with the user in object a but undefined? It is OK if we directly execute a.fn().
var a = { user:"Chasing Dreams", fn:function(){ console.log(this.user); }}a.fn(); //Chasing DreamsThe reason why this can be printed here is because this here points to function a, so why doesn't the above point to a? If we need to understand this pointing issue, please see the thorough understanding of this pointing in js, and there is no need to memorize this article.
Although this method can achieve our purpose, sometimes we have to save this object to another variable, so we can use the following method.
1. call()
var a = { user:"Catching Dreams", fn:function(){ console.log(this.user); //Catching Dreams}}var b = a.fn;b.call(a);By adding the first parameter to which environment to add b to, simply put this point to that object.
In addition to the first parameter, the call method can also add multiple parameters, as follows:
var a = { user:"Catching Dreams", fn:function(e,ee){ console.log(this.user); //Catching Dreams console.log(e+ee); //3 }}var b = a.fn;b.call(a,1,2);2. apply()
The apply method is somewhat similar to the call method, it can also change the pointing of this
var a = { user:"Catching Dreams", fn:function(){ console.log(this.user); //Catching Dreams}}var b = a.fn;b.apply(a);Similarly, apply can also have multiple parameters, but the difference is that the second parameter must be an array, as follows:
var a = { user:"Catching Dreams", fn:function(e,ee){ console.log(this.user); //Catching Dreams console.log(e+ee); //11 }}var b = a.fn;b.apply(a,[10,1]);or
var a = { user:"Catching Dreams", fn:function(e,ee){ console.log(this.user); //Catching Dreams console.log(e+ee); //520 }}var b = a.fn;var arr = [500,20];b.apply(a,arr);//Note that if the first parameter of call and apply is written as null, then this points to a window object var a = { user:"Dream Chasing", fn:function(){ console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…} }}var b = a.fn;b.apply(null);3. bind()
The bind method is somewhat different from the call and apply methods, but they can be used to change the direction of this.
Let’s talk about their differences first.
var a = { user:"Dream Chasing", fn:function(){ console.log(this.user); }}var b = a.fn;b.bind(a);We found that the code was not printed. Yes, this is the difference between bind and call and apply methods. In fact, the bind method returns a modified function.
var a = { user:"Dream Chasing", fn:function(){ console.log(this.user); }}var b = a.fn;var c = b.bind(a);console.log(c); //function() { [native code] }So let's execute function c to see if we can print out the user in object a
var a = { user:"Catching Dreams", fn:function(){ console.log(this.user); //Catching Dreams}}var b = a.fn;var c = b.bind(a);c();OK, bind can also have multiple parameters, and parameters can be added again when executing, but it should be noted that the parameters are carried out in the order of formal parameters.
var a = { user:"Catching Dreams", fn:function(e,d,f){ console.log(this.user); //Catching Dreams console.log(e,d,f); //10 1 2 }}var b = a.fn;var c = b.bind(a,10);c(1,2);Summary: call and apply both change this in the context and execute this function immediately. The bind method allows the corresponding function to be called whenever it wants, and add parameters when it is executed. This is their difference and choose to use it according to your actual situation.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.