浅谈关于js利器 call() ,apply() ,bind()三个方法的使用以及作用

call() , apply() , bind() 这三个方法在js中尤为重要,尤其是在编写js源码的时候,那三个方法到底有什么用呢?

① call 方法

1. call 能够改变this的指向

2. 还可以传递参数

3. 可以运行函数

var a={
     
            name : "小明" ,
            age : 18,
            sex : "男",
            fn : function(){
     
                console.log(this.name+"调用fn方法成功");
            },
            ft : function(names, days){
     
                console.log("我叫"+ names+",我在"+ days+"的时候"+"调用ft方法成功");
            }
        }
         var b = a.fn;  
         b();//this.name 不能输出 因为 调用时this指向的是window 但是因为window里面有name属性所以输出没有报错
         b.call(a); //改变this指向 让this指向a  
        //call前面是调用的对象 里面参数是需要改变为this所指向的对象
        var c = a.ft;
        c.call(a,"小红","吃饭"); //传其他参数

这三个输出分别为:
① 调用fn方法成功
② 小明调用fn方法成功
③ 我叫小红,我在吃饭的时候调用ft方法成功

第一次将a.fn 方法赋值给 b 的时候,并没有执行,所以没执行只拿函数,此时this指向的是window,所以不能输出小明。
第二次使用call改变this指向,将this指向a,因此可以拿到他的name属性。
第三次 说明call还可以传参数。

② apply 方法

1. call 能够改变this的指向

2. 还可以传递参数

3. 可以运行函数

var a={
     
            name : "小明" ,
            age : 18,
            sex : "男",
            fn : function(){
     
                console.log(this.name+"调用fn方法成功");
            },
            ft : function(names, days){
     
                console.log("我叫"+ names+",我在"+ days+"的时候"+"调用ft方法成功");
            }
        }
        var b = a.fn ;
        b(); //this.name 不能输出 因为 调用时this指向的是window  但是因为window里面有name属性 所以输出没有报错
        b.apply(a);  //改变this指向 让this指向a
        //apply前面是调用的对象 里面参数是需要改变为this所指向的对象
        var c = a.ft;
        c.apply(a, ["小花","化妆"]); //传其他参数

三个输出分别为:
① 调用fn方法成功
② 小明调用fn方法成功
③ 我叫小花,我在化妆的时候调用ft方法成功
apply和call有着异曲同工之秒,但是在传参数的时候,call传递的是普通参数,而apply传递的是数组,在接收的时候可以设置和数组长度一样多的形参来分别接收。

③ bind 方法

1.可以改变this指向

2.可以传递参数

3.不可以执行函数,但是会返回一个新函数

 var a={
     
            name : "小明" ,
            age : 18,
            sex : "男",
            fn : function(){
     
                console.log(this.name+"调用fn方法成功");
            },
            ft : function(names, days){
     
                console.log("我叫"+ names+",我在"+ days+"的时候"+"调用ft方法成功");
            }
        }
        var b = a.ft ; // 此时this指向window
        var c=b.bind(a,"翠花","现在"); //bind将this指向了a,而且传递了两个参数,并且返回一个新函数。
        c(); //输出 我叫翠花,我在现在的时候调用ft方法成功

bind函数有多种调用方法,
b.bind(a,“小强”,“今天”)();
b.bind(a,“熊大”)(“刚刚”);
b.bind(a)(“熊二”,“刚才”);
这些方法都可以调用bind方法并且进行传参。
它与 call方法 apply方法 不同在于,bind能返回一个新函数。

你可能感兴趣的:(js,javascript,js,前端)