About the introduction of call(), apply(), bind() in javascript, preliminary

First of all, you need to know that these three methods have the same effect, that is, to change the point of this

Secondly, for the call and apply methods, you must know that these two methods are not inherited methods

Let's take a look at how the three are used first, and finally summarize:

1. The usage of call Function name. Call (specified this point, parameter)

(Note: The parameters must be listed one by one, one by one (num1, num2, num3,...) will be shown later as examples, just remember this first)

Please consider the following example first and then see the result:

The first example of using the call method:

(1) Before using the call method:

 var obj = {
           name:"小李",
           objage:19,
           myfun:function(){
               console.log(this.name)
           }
       }
       function test(name,age){
            //该测试是在非严格模式下进行的
            console.log("修改前this的指向为=> " );
            console.log(this)
       }
       test();//在非严格模式下默认绑定为window对象,

The results in the browser console are as follows:

(2). After use: ((the parameter of this. object can not be passed), the reason is that the this of the object is already known, so of course its properties are also known)

var obj = {
           name:"小李",
           objage:19,
           myfun:function(){
               console.log(this.name)
           }
       }    
  
       function test(name,age){
            console.log(this.name + " " + this.objage);

            console.log("修改后this的指向为=> " );

            console.log(this)
       }

       test.call(obj,obj.name,obj.objage)

The results in the browser console are as follows:

 

 The second introduction to the call method, that is, why should I list them one by one

Not much to say, the above example:

(1) Do not list them one by one:

var obj = {
           name:"小李",
           objage:19,
           myfun:function(){
               console.log(this.name)
           }
        } 
        function test(age1,age2){
        console.log(age1);
           console.log(age2);//undefined
            console.log(age1 +""+ age2);//19,20undefined
            console.log("修改后this的指向为=> " );
            console.log(this)
        }
        let array = [19,20];
        test.call(obj,[19,20]);

 

(2) List them one by one:

var obj = {
           name:"小李",
           objage:19,
           myfun:function(){
               console.log(this.name)
           }
        } 
        function test(age1,age2){
        console.log(age1);//19
           console.log(age2);//20
            console.log(age1 +""+ age2);//1920
            console.log("修改后this的指向为=> " );
            console.log(this)
        }
        test.call(obj,19,20);

 

2. Usage of apply Function name.apply (specified this point, parameter)

Note: The parameter here is an array of parameters, (it can be an instance of Array or an argument object)

(1) If the apply method is not used, the result is the same as if the call method is not used, so I will not repeat the explanation here.

(2). Use the apply method

(1) Passing parameters is listed one by one:

var obj = {
           name:"小李",
           objage:19,
           myfun:function(){
               console.log(this.name)
           }
        } 
        function test(age1,age2){
        console.log(age1);
           console.log(age2);
            console.log(age1 +""+ age2);
            console.log("修改后this的指向为=> " );
            console.log(this)
        }
        test.apply(obj,19,20);

The results are as follows: (error reported)

(2) Pass as an array:

var obj = {
           name:"小李",
           objage:19,
           myfun:function(){
               console.log(this.name)
           }
        } 
        function test(age1,age2){
        console.log(age1);
           console.log(age2);
            console.log(age1 +""+ age2);
            console.log("修改后this的指向为=> " );
            console.log(this)
        }
        test.apply(obj,[19,20]);

The results are as follows:

 

Summary: First summarize these two methods,

First of all: The two methods are not very different. The difference lies in their different ways of passing parameters. If you don't pass parameters to the function, it doesn't matter which method you use. 

Secondly: they can be used to expand the scope of the function's survival, which is to change the execution environment of the function.

3. The usage of bind  

This method will create an instance of the function, and its this value will be bound to the value passed to the bind() function.

 

Guess you like

Origin blog.csdn.net/L_Z_jay/article/details/109142450