JS中的call(),apply(),bind()方法

Posted 2020-11-30 我是豆子啊

call,apply和bind到底有何用？

改变函数的this对象的指向

相似之处

1.都是用来改变函数的this对象指向

2.第一个参数都是this要指向的对象

3.都可以利用后续参数传参

先看下面例子：

例1；

var name = "小王", age = 17;
var obj = {
      name:"小张",
      objAge:this.age,
      myFun:function(){
            console.log(this.name + "年龄" + this.age)
      }  
}    
obj.objAge;   //17
obj.myFun();  //小张年龄undefined　　

例2

var fav = "盲僧";
function shows(){
   console.log(this.fav)
}
shows();  //"盲僧"

比较一下这两者 this 的差别，第一个打印里面的 this 指向 obj，第二个全局声明的 shows() 函数 this 是 window ；　　

1.call,apply,bind都是用来重定义this这个对象的！

var name = "小王"，age = 17;
var obj = {
     name:"小张",
     objAge:this.age,
     myFun:function(){
         console.log(this.name + "年龄" + this.age)
     }
}  
var db = {
    name:"德玛",
    age:99
}  

obj.myFun.call(db);    //德玛年龄 99
obj.myFun.apply(db);   //德玛年龄 99
obj.myFun.bidn(db)();   //德玛年龄 99　

以上就是call,apply和bind的区别，call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()调用

那么call和apply的区别呢？

把上面例子稍微修改一下

var name = "小王"，age = 17;
var obj = {
     name:"小张",
     objAge:this.age,
     myFun:function(fm,t){
         console.log(this.name + "年龄" + this.age,"来自" + fm + "去往" + t)
     }
}  
var db = {
    name:"德玛",
    age:99
}  

obj.myFun.call(db,"成都","上海");    //德玛年龄 99，来自成都，去往上海
obj.myFun.apply(db,["成都","上海"]);   //德玛年龄 99，来自成都，去往上海
obj.myFun.bidn(db,"成都","上海")();   //德玛年龄 99　，来自成都，去往上海
obj.myFun.bind(db,["成都","上海"])();   //德玛年龄 99，来自成都，去往上海

obj.myFun.bind(db)("成都","上海"); //德玛年龄 99，来自成都，去往上海

微妙的差距！

从上面结果不难看出：call,bind,apply这三个函数的第一个参数都是this的指向对象，第二个参数差别就来了，

call的参数是直接放进去的，第二个第三个第n个参数全部都用都好分隔，直接放到后面 obj.myFun.call(db,‘成都‘, ... ,‘string‘ )。

apply的所有参数都必须放在一个数组里面传进去，obj.myFun.apply(db,[‘成都‘, ..., ‘string‘ ])。

当然，第三个参数不限定string类型，允许各种类型，包括函数，object 等等！

由于bind返回的仍然是一个函数，所以我们还可以在调用的时候再进行传参。