call,apply,bind的区别

Posted 2020-12-17 94Lucky

这三个属性非常强大，vue，react等一些框架的内部结构，使用他们改变this的指向。

我先说这三个属性的区别，在用代码详细解释。

1. call:改变this指向，函数执行 ， 参数写在参数写在第二位开始的参数部分，this指向第一个参数
2. apply:改变this指向，函数执行，参数写在第二位的数组中
3. bind:改变this指向,函数不执行，返回一个新函数

call

function fn1(a,b){
   this.a++;
   b++;
   console.log(this.a+b);
}
var obj={a:1}
fn1.call(obj,3,5);   //8   this.a指的是obj的a属性   且函数执行了

apply

function fn1(a,b){
   this.a++;
   b++;
   console.log(this.a+b);
}
var obj={a:1}
fn1.apply(obj,[3,5]);  //8   this.a指的是obj的a属性  b是数组中第二个元素 且函数执行了

bind

 function fn(a,b){
   this.a=a;
   this.b=b;
   console.log(a+b);
   return this;
}
 var obj=fn.call({},3,5);
 var obj1=fn.apply({},[3,5]);
 var obj2=fn.bind({})(3,5);
 var obj3=fn.bind({})   //一样的函数    说明不执行，返回一样的新函数
 console.log(obj,obj1,obj2); // {a: 3, b: 5} {a: 3, b: 5} {a: 3, b: 5}