JavaScript 中的构造函数

一个一个地创建对象很慢。如果你需要十个具有相同属性的学生,你会浪费时间重复编写相同的代码。

JavaScript 通过构造函数 (Constructor Functions) 解决了这个问题。

把构造函数想象成一个蓝图。房子的蓝图并不是房子本身,但你可以用它来建造许多房子。

工作原理:

构造函数是一个特殊的函数。你使用 new 关键字来通过它创建对象。

示例:

function Student(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
}

const student1 = new Student("John", 21, "Chennai");
const student2 = new Student("David", 22, "Madurai");

为什么要使用它?

  • 节省时间。
  • 防止代码重复。
  • 为你的数据创建标准结构。

this 的作用:

在构造函数内部,this 关键字指的是你正在创建的新对象。

如果一位老师说“我的教室”,那么“我的”这个词就指向那位特定的老师。在代码中,this.name 指向你刚刚创建的特定对象的名称。

使用 new 时会发生什么?

当你运行 const emp = new Employee("John", 50000) 时,会发生四个步骤:

  1. JavaScript 创建一个空对象。
  2. this 关键字指向该新对象。
  3. 属性被添加到该对象中。
  4. 将该对象返回给你。

添加动作:

对象不仅仅可以持有数据,还可以执行动作。在编程中,这些动作被称为“方法” (methods)。

示例:

function Laptop(brand, ram) {
    this.brand = brand;
    this.ram = ram;
    this.showDetails = function() {
        console.log(this.brand, this.ram);
    };
}

Laptop 对象现在既持有数据,又持有一个用于显示这些数据的函数。

最佳实践:

  • 构造函数首字母始终大写。使用 Student 而不是 student。这会提醒其他开发者使用 new 关键字。
  • 始终使用 new 关键字。如果你忘记了它,该函数会像普通函数一样运行,从而导致代码出错。

对比:

对象字面量 (Object Literals):

  • 适用于单个对象。
  • 简单且快速。
  • 没有蓝图。

构造函数 (Constructor Functions):

  • 适用于多个对象。
  • 可复用且有组织。
  • 使用蓝图方法。

来源:https://www.w3schools.com/js/js_object_constructors.asp 来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor 全文:https://dev.to/annapoo/constructor-in-javascript-4nbm