12.call和apply的用法

一些应该掌握的知识点

• this是JS中的一个关键字，它代表函数运行时自动生成的一个内部对象，且只能在函数内部使用

  • 一个this案例展示this的普通用法
    “` JavaScript
    var sample = {
    x: ‘sample’,
    show: function () {
    console.log(this.x);
    }
    }

    show(); //控制台显示sample
    “`

  • 假设有函数sample，可知sample.call()等同于sample();

  • call和apply都用于指定this的指向，也可以理解为指定this的指向

    • 一个call案例展示call的普通用法
      

      var a = {
          x: 'A',
          show: function () {
                    console.log(this);
          }
      }
      a.show(); //此时this指向对象a，控制台显示x的值为字符串"A"
      var c = a.show; //把对象a中的show属性(也是show函数)赋予变量c，注1
      var b = {
           x: 'B'
      }
      a.show.call(b); //此时this指向对象b，控制台显示x的值为字符串"B"
      c(); //由注1可知，此时this指向window，因此控制台显示对象window

• call可用于借助他人之手来办事

  • 一个阿妈请阿爸教训不听话的儿子的案例

    function Mom () {
        Dad.call(this); //阿妈请阿爸教训不听话的儿子
    }
    function Dad () {
        this.teachSon1 = '儿子大哭'; //教育手段
        this.teachSon2 = '儿子大叫';
    }
    function Son () {
        Mom.call(this);
        this.getTeach = function () { //不听话的儿子能被教育
            this.reaction1 = this.teachSon1;
            this.reaction2 = this.teachSon2;
        }
        this.show = function () { //展示不听话的儿子被教育的反应
            this.getTeach();
            console.log(this.reaction1, this.reaction2);
        }
    }
    var son = new Son();
    son.show(); //控制台显示儿子大哭、儿子大叫

  • 由上例可看出这种call的使用方式也是一种继承

• call和apply的区别和传参用法

  • call和apply不仅可以用来指定this的指向，还可以用来传参数，
  • call和apply两者本质作用相同，区别仅仅是后面所传的参数形式不同
  • 一个案例阐述call和apply的传参用法和区别
    

    var A = {
        tag: 'Object A',
        show: function (x, y) {
            console.log(x, y, this.tag);
        }
    }
    var B = {
        tag: 'Object B'
    }
    A.show.call(null, 1, 2); /* 用.call方式指定this的指向
                                同时传参数，由于call中首参
                                为null，所以此时this的指向
                                为对象window，控制台显示
                                1, 2, undefined */
    A.show.call(B, 1, 2); /* 由于call中首参为B，所以此时
                            this的指向为对象B，控制台
                            显示1, 2, Object B*/
    A.show.apply(A, [1, 2]); /* apply与call的区别是，
                                apply用于传参时所传参数
                                用数组来传, 控制台显示
                                1, 2, Object A*/

  
  
  
  
  

关于call和apply用法的一篇博客参考：ITye uule:JS中的call()和apply()方法