this指向原则透析：理解this的精髓，书写严谨代码

前端

2024-02-09 21:17:41

了解 this：JavaScript 中至关重要的指针

简介

this 是 JavaScript 中一个基础概念，理解其运作原理对于编写健壮的代码至关重要。this 指针决定了函数内部的 this 所指向的对象，这会影响代码的行为和数据的可访问性。

this 的绑定规则

JavaScript 中的 this 绑定遵循四条主要规则：

1. 默认绑定

在全局作用域或普通函数中，this 指向 window 对象（在严格模式下为 undefined）。

function sayHello() {
  console.log(this); // 输出：window 对象
}

2. 隐式绑定

在对象方法中，this 指向该方法所属的对象。

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

3. 显示绑定

可以使用 call()、apply() 和 bind() 方法显式指定 this 指向。

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // 输出：button 元素
});

4. 箭头函数

箭头函数没有自己的 this，而是继承外部函数的 this。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

this 指针示例

以下示例展示了 this 指针的不同绑定方式：

示例 1：默认绑定

function sayHello() {
  console.log(this); // 输出：window 对象
}

sayHello();

示例 2：隐式绑定

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

person.sayName();

示例 3：显示绑定

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // 输出：button 元素
});

button.click();

示例 4：箭头函数

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers); // 输出：[2, 4, 6, 8, 10]