深扒js的this指向，彻底弄明白！

2023-09-09 12:37:18

在 JavaScript 中驾驭 this 深入理解其作用域和绑定

作为一名 JavaScript 开发人员，了解 this 至关重要。它定义了当前执行上下文中 this 关键字所引用的对象。本文将深入探讨 this 关键字在 JavaScript 中的各种执行上下文，并说明如何显式绑定 this 指向。

执行上下文

JavaScript 代码在不同的执行上下文中运行，包括：

全局执行上下文： 当代码在全局作用域中执行时，this 指向全局对象（window）。
函数执行上下文： 在函数内部，this 指向函数对象。
方法执行上下文： 在对象方法中，this 指向调用方法的对象实例。

特殊情况

箭头函数： 箭头函数没有自己的 this 指向，它继承其父级作用域的 this 指向。
new 运算符： 使用 new 运算符创建对象时，this 指向新创建的对象。

示例：

全局执行上下文：

console.log(this); // 输出：window

函数执行上下文：

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

const person = new Person();
person.greet(); // 输出：Hello, my name is John

方法执行上下文：

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

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

箭头函数：

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

    arrowFunction(); // 输出：Hello, my name is John
  },
};

person.greet();

new 运算符：

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

const person = new Person();
person.greet(); // 输出：Hello, my name is John

显式绑定

有时，显式绑定 this 指向是必要的。可以使用 call、apply 或 bind 方法实现。

call 方法： 显式绑定 this 指向到指定的对象。
apply 方法： 与 call 方法类似，但允许将参数作为数组传递。
bind 方法： 创建一个新函数，其 this 指向已绑定到指定的对象。

示例：

call 方法：

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

const person = {
  name: "John",
};

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

apply 方法：

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

const person = {
  name: "John",
};

greet.apply(person, ["Jane"]); // 输出：Hello, my name is Jane

bind 方法：

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

const person = {
  name: "John",
};

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