深入探讨 JavaScript 中的 new 和 this：释放面向对象编程的力量

JavaScript 是一种强大、灵活的语言，植根于函数式编程和面向对象编程 (OOP) 的功能。 JavaScript 中 OOP 的核心有两个关键概念：new 和 this。虽然这些关键字看起来很简单，但它们之间存在细微差别，即使对于经验丰富的开发人员来说也很难掌握。在这篇博文中，我们将深入探讨 JavaScript 中 new 和 this 的工作原理，通过示例和最佳实践分解它们的行为。

目录

JavaScript 中的 this 简介

从本质上讲，这是一个上下文相关的关键字，它引用调用函数的对象。与其他一些静态绑定 this 的语言不同，在 JavaScript 中，this 的值可以根据调用函数的方式和位置而改变。

简单来说：

• 全局范围：在全局上下文（或非严格模式）下，this 指的是全局对象（浏览器中的窗口，Node.js 中的全局）。
• 内部方法：在对象方法中，this 指的是拥有该方法的对象。
• 事件处理程序：在事件侦听器中，这通常指触发事件的元素。

我们将在博客后面通过示例探索这些上下文。

理解 JavaScript 中的 new

JavaScript 中的 new 关键字用于创建用户定义对象或内置对象（例如日期、数组等）的实例。当您将 new 与构造函数一起使用时，它会创建一个新对象并将 this 绑定到该对象，本质上将其链接到原型。

例如：

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const myCar = new Car("Tesla", "Model 3");
console.log(myCar); // { make: 'Tesla', model: 'Model 3' }

使用新的时：

1. 创建了一个新的空对象。
2. 构造函数中的 this 关键字被设置为引用这个新对象。
3. 该函数执行其代码并为其分配属性。
4. 该对象链接到构造函数的原型，从而实现继承。
5. 除非显式返回对象，否则函数将返回 this。

new 的幕后工作原理

让我们使用自定义函数来模拟 new 的行为：

function simulateNew(constructor, ...args) {
  const obj = {}; // Step 1: Create a new empty object
  Object.setPrototypeOf(obj, constructor.prototype); // Step 2: Link the object to the constructor's prototype
  const result = constructor.apply(obj, args); // Step 3: Bind this and execute the constructor
  return result instanceof Object ? result : obj; // Step 4: Return the object
}

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

const john = simulateNew(Person, "John Doe");
console.log(john.name); // John Doe

此函数遵循与 new 关键字相同的步骤，演示了幕后机制。

各种情况下的例子

1. 全球背景

在全局上下文（非严格模式）中，this 指的是全局对象（浏览器中的窗口）。

console.log(this === window); // true

function showThis() {
  console.log(this); // window
}

showThis();

在严格模式下（'use strict';），这在全局上下文中未定义：

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const myCar = new Car("Tesla", "Model 3");
console.log(myCar); // { make: 'Tesla', model: 'Model 3' }

1. 对象方法上下文

当在对象方法中使用 this 时，它指的是拥有该方法的对象。

function simulateNew(constructor, ...args) {
  const obj = {}; // Step 1: Create a new empty object
  Object.setPrototypeOf(obj, constructor.prototype); // Step 2: Link the object to the constructor's prototype
  const result = constructor.apply(obj, args); // Step 3: Bind this and execute the constructor
  return result instanceof Object ? result : obj; // Step 4: Return the object
}

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

const john = simulateNew(Person, "John Doe");
console.log(john.name); // John Doe

这里，this 指的是 person 对象，因为它是调用greet 方法的上下文。

1. 构造函数上下文

在构造函数中，this 指的是新创建的对象。

console.log(this === window); // true

function showThis() {
  console.log(this); // window
}

showThis();

1. 事件处理程序上下文 在事件处理程序中，这是指触发事件的 DOM 元素。

"use strict";

function showThis() {
  console.log(this); // undefined
}

showThis();

在事件监听器中使用箭头函数时，this 是词法绑定的并且不引用元素：

const person = {
  name: "Alice",
  greet() {
    console.log(this.name); // 'Alice'
  },
};

person.greet();

最佳实践和常见陷阱

1. 箭头函数和this：箭头函数不绑定自己的this；相反，它们从周围的词汇上下文继承了这一点。这在您想要维护对父作用域的引用的事件处理程序或回调等情况下非常有用。

function Animal(type) {
  this.type = type;
}

const dog = new Animal("Dog");
console.log(dog.type); // Dog

1. 使用 .call()、.apply() 和 .bind() 进行显式绑定：您可以使用这些方法手动控制 this 的值。例如：

const button = document.querySelector("button");

button.addEventListener("click", function () {
  console.log(this); // the button element
});

1. 避免在全局函数中使用它：在全局函数中避免使用它通常是一个很好的做法，因为它可能会导致意外的行为，尤其是在严格模式下。

2. 类语法：从 ES6 开始，使用类语法提供了一种更直观的方法来使用 this 和 new 定义构造函数。
   

button.addEventListener("click", () => {
  console.log(this); // refers to the outer scope (e.g., window)
});

结论

new 和 this 关键字在 JavaScript 的面向对象范例中发挥着关键作用，允许创建和管理对象及其行为。了解它在不同上下文中的工作原理以及 new 如何构造对象实例对于编写健壮、可扩展的 JavaScript 代码至关重要。通过掌握这些概念，您可以避免常见的陷阱并编写更清晰、更易于维护的代码。

不断实验和编写示例，以巩固您对这些核心 JavaScript 概念的理解！

喜欢阅读吗？如果您发现这篇文章富有洞察力或有帮助，请考虑给我买杯咖啡来支持我的工作。您的贡献有助于推动更多此类内容。单击此处请我喝杯虚拟咖啡。干杯！

以上是深入探讨 JavaScript 中的 new 和 this：释放面向对象编程的力量的详细内容。更多信息请关注PHP中文网其他相关文章！