谈谈call、apply和bind

首先说说call、apply和bind的作用吧：

它们的作用都是相同的，都是动态的修改当前函数内部环境对象this的指向。

call、apply和bind区别：

        相同点：

                作用相同，都是动态修改this指向；都不会修改原先函数的this指向。

        异同点：

1、执行方式不同：

        call和apply是改变后页面加载之后就立即执行，是同步代码。

        bind是异步代码，改变后不会立即执行；而是返回一个新的函数。

2、传参方式不同：

        call和bind传参是一个一个逐一传入，不能使用剩余参数的方式传参。

        apply可以使用数组的方式传入的，只要是数组方式就可以使用剩余参数的方式传入。

  <script>
    const arr = [1, 2, 3, 4, 5, 6];
    function fn(...b) {
      let a = b.reduce((sum, item) => sum += item, 0);
      console.log(this, b, a);
    };
    fn(...arr); //window
 
    const obj = {
      name: '张三',
    };
 
    fn.call(obj, 1, 2); //obj
  </script>

  <script>
    function fn(a, b) {
      console.log(this, a + b);
    };
    fn(1, 2); //window
 
    const obj = {
      name: '张三',
    };
 
    fn.apply(obj, [3, 4]); //obj
  </script>

 

 

  <script>
    function fn(a, b) {
      console.log(this, a + b);
    };
    fn(1, 2); //window
 
    const obj = {
      name: '张三',
    };
 
    let newfn = fn.bind(obj); //obj
    newfn(5, 6);
  </script>

3、修改this的性质不同：

        call、apply只是临时的修改一次，也就是call和apply方法的那一次；当再次调用原函数的时候，它的指向还是原来的指向。

  <script>
    function fn() {
      console.log(this);
    };
    fn(); //window
 
    const obj = {
      name: '张三',
    };
 
    fn.call(obj);
    fn.apply(obj);
    fn();
  </script>

        bind是永久修改函数this指向，但是它修改的不是原来的函数；而是返回一个修改过后新的函数，此函数的this永远被改变了，绑定了就修改不了。

  <script>
    function fn() {
      console.log(this);
    };
    fn(); //window
 
    const obj = {
      name: '张三',
    };
 
    let newfn = fn.bind(obj); //obj
    newfn();
    fn();
  </script>

应用 ==>

1、数组之间追加

  <script>
    let arr1= [12, 'foo', {name: 'joe'}, -2458];
    let arr2= ['Doe', 555, 100];
    Array.prototype.push.apply(arr1, arr2);
    // arr1值为 [12, 'foo', {name: 'joe'}, -2458, 'Doe', 555, 100]
  </script>

让array1 具备Array的push方法！

2、获取数组中的最大值和最小值 

  <script>
    let num = [5, 458, 120, -215];
    let maxNum = Math.max.apply(Math, num); // 458
    maxNum = Math.max.call(Math, 5, 458, 120, -215); // 458
  </script>

让numbers 具备Math的max方法（number 本身没有 max 方法，但是 Math 有，我们就可以借助 call 或者 apply 使用其方法）

3、验证是否是数组（前提是toString()方法没有被重写过）

  <script>
    functionIsArray(obj){
        returnObject.prototype.toString.call(obj) === "[object, Array]";
    }
  </script>

4、类（伪）数组 => 正真数组 具备数组方法 

  <script>
    let domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
  </script>

Javascript中存在一种名为伪数组的对象结构。比较特别的是 arguments 对象，还有像调用 getElementsByTagName，document.childNodes 之类的，它们返回NodeList对象都属于伪数组。不能应用 Array下的 push , pop 等方法。 

  <script>
    let obj = { x: 81 };
    let foo = {
        getX : function(){ return this.x };
    }; 
    console.log(foo.getX.bind(obj)()); // 81
    console.log(foo.getX.call(obj));   // 81
    console.log(foo.getX.apply(obj));  // 81
  </script>

bind() 回调函数被调用才执行，若立即执行函数，bind()() 多个括号；

call() apply() 立即执行函数马上执行。