精辟解析JavaScript函数this，从call、apply、bind入手探究用法差异

2023-11-24 16:29:31

在JavaScript函数的使用中，this扮演着至关重要的角色，它决定了函数执行时所处的上下文环境，影响着函数内部代码对变量、属性以及其他对象的访问权限。为了灵活地控制函数的执行上下文，JavaScript提供了call、apply、bind三种函数调用方式，允许开发者在不同对象上调用同一个函数，实现代码复用和增强灵活性。

1. this关键字初探：函数执行上下文环境的基石

1.1 何为this关键字？

在JavaScript中，this关键字是一个特殊的变量，它指向函数执行时所处的上下文对象。this关键字的作用范围仅限于函数内部，在函数执行期间，this始终指向调用该函数的对象。理解this关键字的关键在于明确函数的调用方式，不同方式决定了this所指向的对象。

1.2 函数的四种调用方式

普通函数调用 ：当以普通方式调用函数时，this指向window对象（在浏览器环境下）或global对象（在Node.js环境下）。

function greet() {
  console.log(this); // 输出：Window {window: Window, self: Window, document: HTMLDocument, name: '', location: Location, ...}
}

greet();

方法调用 ：当函数作为对象的方法被调用时，this指向调用该方法的对象。

const person = {
  name: 'John',
  greet: function() {
    console.log(this.name); // 输出：John
  }
};

person.greet();

构造函数调用 ：当使用new关键字调用函数时，this指向新创建的对象。

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

const person1 = new Person('John');
console.log(person1.name); // 输出：John

隐式调用 ：当作为事件处理函数或回调函数被调用时，this可能指向window对象、调用它的元素或其他对象，这取决于具体情况。

document.getElementById('button').addEventListener('click', function() {
  console.log(this); // 输出：HTMLButtonElement {…}
});

2. call、apply、bind方法详解：函数调用方式的灵活操控

为了在不同的对象上调用同一个函数，JavaScript提供了call、apply、bind三种函数调用方式。这些方法允许开发者指定函数的执行上下文，从而实现代码复用和增强灵活性。

2.1 call方法

call方法允许开发者在指定的对象上调用函数，并将该对象作为函数的this值。

const person = {
  name: 'John'
};

function greet() {
  console.log(this.name);
}

greet.call(person); // 输出：John

在上面的示例中，greet函数原本没有定义this关键字，但通过call方法，我们可以指定person对象作为函数的this值，从而在person对象上调用greet函数，并访问其name属性。

2.2 apply方法

apply方法与call方法相似，但参数传递方式有所不同。apply方法接受一个数组作为参数，该数组包含要传递给函数的参数。

const person = {
  name: 'John'
};

function greet(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

greet.apply(person, ['Hello']); // 输出：Hello, John!