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

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返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。  

 

 

 

 

 

 

 

 

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

上一篇:在vue-cli3中使用axios获取本地json


下一篇:Lexical declaration cannot appear in a single-statement context