javascript中的apply和call方法

作用

用于改变函数内部this的指向。

示例

函数默认规则：谁调用函数，this就指向谁。

window.name = 'I am window';

var getName = function(){
    console.log(this.name);
};
    
getName();
// getName在全局环境下调用，getName前面其实暗藏了window。
// 所以调用者就是window。
// 输出：window

借助call或apply可以改变这种默认行为

window.name = 'I am window';

var getName = function(){
    console.log(this.name);
};

getName.apply({ name: 'I am apply' });
// I am apply

getName.call({ name: 'I am call' });
// I am call

应用场景

修正事件回调中的this

<div id="btn">...</div>

const btn = document.getElementById('btn');
btn.addEventListener('click', function () {
    console.log(this.id);
    // btn
})

上面的this.id为btn，符合我们的预期。

下面引入一个新的情况，我们需要在调用一个额外的函数：

function func() {
  console.log(this.id);
}

const btn = document.getElementById('btn');
btn.addEventListener('click', function () {
  func();
  // undefined
})

这时，this的指向就不是btn了，而是window。

这种情况就可以用apply或者call来处理。

function func() {
  console.log(this.id);
}

const btn = document.getElementById('btn');
btn.addEventListener('click', function () {
  func.apply(this);
  // btn
})

利用apply或call来实现继承

function A(name) {
  this.name = name;
}

function B() {
  // 将A的name属性挂到B上了
  A.apply(this, arguments);
}