this不奇怪，原来也可以搞的这么明白！

2023-11-07 02:04:15

this 指向：JavaScript 中关键的上下文对象

在 JavaScript 的世界中，this 扮演着至关重要的角色，因为它决定了函数内部this 所引用的对象。深入了解 this 指向对于成为一名合格的前端开发人员至关重要，因为它可以让你编写出更强大、更可维护的代码。

1. 认识 this 指向

this 是一个特殊的 JavaScript 关键字，它指向当前执行代码的上下文对象。不同的上下文对象作为 this 指向，会影响函数内部代码的执行结果。

2. this 指向的常见情况

this 指向可以是多种类型的对象，包括：

全局作用域： 在全局作用域中，this 指向 window 对象。
函数作用域： 如果函数不是作为构造函数或方法调用，this 指向 window 对象。
方法作用域： 如果函数作为对象的方法调用，this 指向调用该方法的对象。
构造函数作用域： 如果函数作为构造函数调用（使用 new 关键字），this 指向新创建的对象。
箭头函数作用域： 箭头函数的 this 指向与外层函数的 this 相同。

代码示例：

// 全局作用域
console.log(this); // window

// 函数作用域
function foo() {
  console.log(this); // window
}
foo();

// 方法作用域
const obj = {
  name: '张三',
  sayName() {
    console.log(this.name); // 张三
  }
};
obj.sayName();

// 构造函数作用域
function Person(name) {
  this.name = name;
}
const person = new Person('张三');
console.log(person.name); // 张三

// 箭头函数作用域
const obj = {
  name: '张三',
  sayName: () => {
    console.log(this.name); // 张三
  }
};
obj.sayName();

3. this 指向的特殊情况

除了常见的 this 指向情况外，还有一些特殊情况：

call()、apply() 和 bind() 方法： 这些方法可以改变函数的 this 指向。
new 运算符： 使用 new 运算符调用函数会创建一个新对象，并将此新对象作为函数的 this 指向。

代码示例：

// call() 方法
const obj = {
  name: '张三',
  sayName() {
    console.log(this.name);
  }
};
const anotherObj = {
  name: '李四'
};
obj.sayName.call(anotherObj); // 李四

// new 运算符
function Person(name) {
  this.name = name;
}
const person = new Person('张三');
console.log(person.name); // 张三