?? Blog home page: Sour dog blog??
?? Welcome to?? give the thumbs-up?? Collect messages??
?? Love front-end learning and look forward to communicating together!
?? The author's level is very limited. If you find an error, please let me know. Thank you!??
?? If you have any questions, please send me a private letter??

?? Change the call, apply and bind methods pointed to by this

• ?? What are call, apply and bind
• ?? Similarities and differences of call, apply and bind usage
• ? Application of call and apply

?? What are call, apply and bind

It is A method on the prototype chain of Function object. Its main Function is to change the context of Function execution (change the direction of this), and hand over the method of object B to object A for execution, which is executed immediately.

Then why do you want to change this point of the function? Take an example in life. For example, you (object A) want to light A cigarette (event) at work, but you don't have A lighter (method), and you don't want to sneak out to buy it, so you lend A lighter (method) to your colleague (object B) to light A cigarette (event).

The same is true in the program. Object a has a method a, and object B also needs method a for some reason. So, do you want to add method a to object B or borrow method a from object a? Of course, it borrows object a, which not only meets the requirements, but also reduces the occupation of memory.

?? Similarities and differences of call, apply and bind usage

Similarities:

1. The called object must be a Function object;

2. The first parameter is an object. The caller's this will point to this object. If not, it defaults to the global object window.

   var age = '17';
   var name = 'Xiao Ming'
   let A = {
       setInfo(){
           console.log('I' + this.name + 'this year' + this.age + 'year')
       }
   }
   let B={
       age:37,
       name:'Lao Wang'
   }
   A.setInfo();//I'm undefined years old
   A.setInfo.call();//Xiao Ming is 17 years old
   A.setInfo.apply();//Xiao Ming is 17 years old
   A.setInfo.bind()();//Xiao Ming is 17 years old
   A.setInfo.call(B);//My old Wang is 37 years old
   A.setInfo.apply(B);//My old Wang is 37 years old
   A.setInfo.bind(B)();//My old Wang is 37 years old
   

difference:

1. The second parameter is different. call and bind receive a parameter list, but apply is different. They receive an array containing multiple parameters;

2. The execution returns are different. call and apply return the value of the calling object after execution, and bind returns the function that needs to be called again.

   let A = {
       setInfo(province,city){
           console.log('I' + this.name + 'this year' + this.age + 'year,come from'+province+'province'+city+'city')
       }
   }
   let B={
       age:37,
       name:'Lao Wang'
   }
   A.setInfo.call(B,'Sichuan','Chengdu');//My old Wang is 37 years old and comes from Chengdu, Sichuan Province
   A.setInfo.apply(B,['Sichuan','Chengdu']);//My old Wang is 37 years old and comes from Chengdu, Sichuan Province
   A.setInfo.bind(B,'Sichuan','Chengdu')();//My old Wang is 37 years old and comes from Chengdu, Sichuan Province
   

Application of call and apply

1. Call the parent constructor to implement inheritance

   function Personal(name,age){
       this.name=name;
       this.age=age;
       this.setInfo=function(){
           console.log('I' + this.name + 'this year' + this.age + 'year')
       }
   }
   const A=new Personal('Xiao Ming','12');
   function FromTo(name,age,province,city){
       Personal.call(this, name,age)
       this.province=province;
       this.city=city;
       this.setAddress=function(){
       	console.log('I' + this.name + 'this year' + this.age + 'year,come from'+province+'province'+city+'city')
       }
   }
   const B=new FromTo('Lao Wang','37','Sichuan','Chengdu');
   A.setInfo();//Xiao Ming is 12 years old
   B.setInfo();//My old Wang is 37 years old
   B.setAddress();//My old Wang is 37 years old and comes from Chengdu, Sichuan Province
   

2. Skillfully use the characteristics of the second parameter of apply to calculate the maximum and minimum values after merging the arrays

   let array1=[1,3,2,5,9,6];
   let array2=[11,10,16,24,20];
   Array.prototype.push.apply(array1,array2);
   console.log(array1)// [1, 3, 2, 5, 9, 6, 11, 10, 16, 24, 20]
   console.log(Math.max.apply(null,array1))//24
   console.log(Math.min.apply(null,array1))//1
   

3. Skillfully use apply to create an array with a length of 20 and each value of undefined

   Array.apply(null, { length: 20 })

Equivalent to that in ES6

Array.from({ length: 20 })