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，注1var 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()方法