JavaScript this：深入理解默认绑定、隐式绑定和显式绑定

前端

2023-10-26 22:52:00

JavaScript this 绑定概述

在 JavaScript 中，this 指向当前执行代码的对象，即当前的作用域。理解 this 的绑定机制对于理解 JavaScript 中的面向对象编程至关重要。

JavaScript this 的绑定类型

默认绑定

默认绑定是 this 绑定最基本的形式。默认情况下，在全局作用域中，this 指向 window 对象。在函数中，如果没有明确指定 this 的绑定对象，则 this 指向 window 对象。

隐式绑定

隐式绑定是指 this 的绑定对象由函数的调用方式决定。当一个函数被一个对象调用时，this 指向该对象。例如：

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // 输出: Hello, my name is John.

显式绑定

显式绑定是指使用 call()、apply() 或 bind() 方法明确指定 this 的绑定对象。例如：

const person = {
  name: 'John'
};

function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet.call(person); // 输出: Hello, my name is John.
greet.apply(person); // 输出: Hello, my name is John.
const boundGreet = greet.bind(person);
boundGreet(); // 输出: Hello, my name is John.

JavaScript this 绑定练习题

在以下代码中，this 指向什么对象？

function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // 调用方式一
const person = {
  name: 'John'
};
person.greet = greet;
person.greet(); // 调用方式二

在以下代码中，this 指向什么对象？

const button = document.getElementById('my-button');

button.addEventListener('click', function() {
  console.log(`The button with the id ${this.id} was clicked.`);
});

在以下代码中，this 指向什么对象？

const person = {
  name: 'John',
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}.`);
    }, 1000);
  }
};

person.greet();