说一说call apply bind的作用和区别?| 面试题

93 阅读2分钟

说一说call apply bind的作用和区别?

要点: bind改变this指向不直接调用、call和apply改变this指向直接调用、apply接收第二个参数为数组 、call用于对象的继承 、伪数组转换成真数组、apply用于找出数组中的最大值和最小值以及数组合并、bind用于vue或者react框架中改变函数的this指向

答:

call、apply、bind的作用都是改变函数运行时的this指向。

bind和call、apply在使用上有所不同,bind在改变this指向的时候,返回一个改变执行上下文的函数,不会立即执行函数,而是需要调用该函数的时候再调用即可,但是call和apply在改变this指向的同时执行了该函数。

bind只接收一个参数,就是this指向的执行上文。 call、apply接收多个参数,第一个参数都是this指向的执行上文,后面的参数都是作为改变this指向的函数的参数。但是call和apply参数的格式不同,call是一个参数对应一个原函数的参数,但是apply第二个参数是数组,数组中每个元素代表函数接收的参数,数组有几个元素函数就接收几个元素。


call的应用场景: 对象的继承,在子构造函数这种调用父构造函数,但是改变this指向,就可以继承父的属性

    function superClass () { 
            this.a = 1; 
            this.print = function () { 
                console.log(this.a); 
        } 
   } 
  function subClass () { 
          superClass.call(this); // 执行superClass,并将superClass方法中的this指向subClass 
          this.print(); 
      } 
      subClass();

借用Array原型链上的slice方法,把伪数组转换成真数组

let domNodes = Array.prototype.slice.call(document.getElementsByTagName("div"));

apply的应用场景: Math.max,获取数组中最大、最小的一项 let max = Math.max.apply(null, array); let min = Math.min.apply(null, array);

实现两个数组合并

    let arr1 = [1, 2, 3]; 
    let arr2 = [4, 5, 6]; 
    Array.prototype.push.apply(arr1, arr2); 
    console.log(arr1); // [1, 2, 3, 4, 5, 6]

bind的应用场景 在vue或者react框架中,使用bind将定义的方法中的this指向当前类


call apply bind三个方法都可以用来改变函数的this指向,具体区别如下:\

1、fn.call (newThis,params) call函数的第一个参数是this的新指向,后面依次传入函数fn要用到的参数。会立即执行fn函数。

2、fn.apply (newThis,paramsArr) apply函数的第一个参数是this的新指向,第二个参数是fn要用到的参数数组,会立即执行fn函数。

3、fn.bind (newThis,params) bind函数的第一个参数是this的新指向,后面的参数可以直接传递,也可以按数组的形式传入。  不会立即执行fn函数,且只能改变一次fn函数的指向,后续再用bind更改无效。返回的是已经更改this指向的新fn