对js里call和apply的理解

对于js里的apply和call的用法一直都不清晰，只停留在改变this的指向上，在查阅了资料后发现有些说的也比较模糊,但是有些也让我受益良多，便写下自己的理解。

首先来看一段非常简单的代码

function add (a, b) {
  console.log(a + b)
}

function sub (a, b) {
  console.log(a - b)
}
add.call(sub, 5, 5)

这段非常简单的代码可能一些人认为应该是5+5=10，但是也有人觉得你call了sub，那就应该用sub里的就是5-5=0。
其实它相当于add(5, 5)，结果当然是10。
那肯定就有 人问那call有啥用啊，那肯定是有用的

apply和call的作用：

1.改变this指向

  var name = '张三';
  var obj = { name: '掘金'};
  function show() {
      console.log(this.name);
  }
  show()                // 张三
  show.call(obj);       // 掘金

从这个例子输出juejin可以看出:

• show(),此时this指向全局window，所以输出全局的name：张三
• show.call(obj),得到的是掘金，所以show.call(obj)这句话就很明显得是把show的this指向了obj，这里的this.name就相当于obj.name。

2.调用其他对象的属性或方法

  function add(a, b)
  {
    sub.call(this)
    console.log(a + b + this.c);
  }
  function sub()
  {
    this.c = 3;
  }
  add(1, 1);

在这段代码中，add拿到了sub里的c，是因为sub.call(this)这句话，相当于让sub对象代替this对象，所以add继承了sub所有的属性和方法。

3.执行函数

function show() {
  console.log('掘金');
}
show.call();            // 掘金

此时可知道apply和call都会让函数自动执行

apply和call的区别

• apply 方法传入两个参数：一个是作为函数上下文的对象，另外一个是作为函数参数所组成的数组。

var obj = { name : '掘金'}
function show(a, b){
    console.log(a + ' ' + this.name + ' ' + b);
}

show.apply(obj, ['A', 'B']);    // A 掘金 B

• call 方法第一个参数也是作为函数上下文的对象，但是后面传入的是一个参数列表，而不是单个数组。

var obj = { name : '掘金'}
function show(a, b){
    console.log(a + ' ' + this.name + ' ' + b);
}

show.apply(obj, 'A', 'B');    // A 掘金 B