揭秘 JavaScript 中的神秘构造函数：从函数到原型，构建对象之谜

2023-11-06 02:14:58

构造函数：从函数到对象的桥梁

构造函数是 JavaScript 中用于创建对象的特殊函数，它通过关键词 new 来调用。当我们调用构造函数时，它将创建一个新对象，并将该对象的原型指向构造函数的 prototype 属性。

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

const person = new Person('John');

console.log(person.name); // 'John'

在这个例子中，我们定义了一个 Person 构造函数，它接受一个 name 参数并将其作为新创建对象的 name 属性。当我们使用 new 调用 Person 构造函数时，它将创建一个新的 Person 对象并将其分配给 person 变量。然后，我们可以访问 person 对象的 name 属性，并输出结果。

对象：构造函数的产物

对象是 JavaScript 中用来存储和组织数据的基本单位。对象由键值对组成，键是字符串，值可以是任何数据类型，包括其他对象、数组、函数等。

当我们使用构造函数创建对象时，构造函数的内部代码将在新创建的对象上执行，并将值赋给对象的属性。例如，在上面的例子中，Person 构造函数的代码将在 person 对象上执行，并将 name 属性设置为 'John'。

原型：对象的祖先

原型是 JavaScript 中用来实现继承的一种机制。每个对象都有一个原型对象，该对象包含该对象共享的属性和方法。当我们访问对象的属性或方法时，JavaScript 会首先在对象本身中查找，如果找不到，则会在对象的原型中查找。

构造函数的 prototype 属性指向该构造函数创建的所有对象的原型对象。这意味着所有由 Person 构造函数创建的对象都共享同一个原型对象，该对象包含 Person 构造函数的所有属性和方法。

原型链：追溯对象的祖先

原型链是 JavaScript 中用来查找对象属性和方法的机制。当我们访问对象的属性或方法时，JavaScript 会首先在对象本身中查找，如果找不到，则会在对象的原型中查找。如果仍然找不到，则会在对象的原型的原型中查找，以此类推，直到找到该属性或方法，或者到达原型链的末端。

原型链可以让我们轻松地访问和共享属性和方法，而无需将它们重复地定义在每个对象中。这使得 JavaScript 代码更加简洁和易于维护。

类：语法糖还是新概念？

ES6 引入了 class 关键字，它提供了一种新的语法来定义构造函数和对象。class 本质上仍然是构造函数，只是语法更加简洁和类似于其他面向对象编程语言。

class Person {
  constructor(name) {
    this.name = name;
  }

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

const person = new Person('John');

person.greet(); // 'Hello, my name is John'

在这个例子中，我们使用 class 关键字定义了一个 Person 类，它包含一个构造函数和一个 greet() 方法。当我们使用 new 关键字调用 Person 类时，它将创建一个新的 Person 对象并将其分配给 person 变量。然后，我们可以访问 person 对象的 name 属性和 greet() 方法。