call,apply,bind的使用和区别

111 阅读1分钟

这三个函数存在的意义:改变函数运行时的this指向

    let obj = {name:'tony'};

    function Child(name) {
      this.name = name;
      }
    Child.prototype = {
      constructor:Child,
      showName:function(){
        console.log(this.name);
      }
    }
    var child = new Child('张三')
    child.showName();  //张三

   //call,apply,bind的使用
   child.showName.call(obj);   //tony
   child.showName.apply(obj);  //tony

   let bind = child.showName.bind(obj);//返回一个函数
   bind();  //tony

bind

bind方法是先把fn的this改变为我们想要的结果,并且把对应的参数值准备好,以后要用到了,直接执行即可,也就是说bind同样可以改变this的指向,但是和apply,call不同就是不会马上执行

bind方法在ie6~8不兼容

区别

三个函数的作用差不多,为什么会存在3个呢,因为还是有差别的

  1. call,apply与bind的区别

call和apply改变了函数的this上下文之后便执行该函数,而bind则是返回改变了上下文之后的函数

  1. call,apply的区别

她两之间的区别就在于参数的区别,call和apply的第一个参数都是要改变上下文的对象,而call从第二个参数开始以参数列表的形式展现,apply则是把除了改变上下文对象的参数放在一个数组里面作为它的第二个参数

let arr1 = [1, 2, 19, 6];
console.log(Math.max.call(null, 1,2,19,6)); // 19
console.log(Math.max.call(null, arr1)); // NaN
console.log(Math.max.apply(null, arr1)); //  19 直接可以用arr1传递进去