追溯 JavaScript 原型链：从构造函数到原型模式

2024-01-29 13:31:11

追溯 JavaScript 原型链：深入剖析对象的继承机制

构造函数模式：对象的蓝图

在 JavaScript 的世界中，构造函数就像创建对象的蓝图。它们允许我们使用自定义的模板来生成具有特定属性和行为的新对象。构造函数的语法类似于普通函数，但名字通常以大写字母开头，以表明它们是用于创建对象的。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello! My name is ${this.name} and I am ${this.age} years old.`);
  };
}

上面的示例定义了一个 Person 构造函数，它接受两个参数：name 和 age。内部的代码使用 this 将这些参数分配给新创建对象的新属性。

原型模式：共享属性和方法

原型模式允许我们通过共享一个原型对象来创建对象，该对象包含所有这些对象共享的属性和方法。每个从原型对象创建的对象都继承了其属性和方法，从而实现了代码复用和性能提升。

JavaScript 中的每个对象都包含一个内部的 proto 属性，指向其原型对象。原型对象本身也是一个 JavaScript 对象，它可以包含自己的属性和方法。所有 JavaScript 对象都继承自 Object.prototype，它包含 Object 的默认方法，例如 toString() 和 valueOf()。

const person1 = new Person('John', 25);
console.log(person1.name); // 'John'
console.log(person1.__proto__ === Person.prototype); // true

上面的示例创建了一个新的 Person 对象 person1，并展示了它继承了 Person.prototype 的属性和方法。

原型链：沿着继承关系探索

原型链是一个连接对象及其原型对象的有序列表。当我们访问一个对象的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到该属性或方法。如果在当前对象的原型链中找不到，JavaScript 会继续向上查找，直到到达 Object.prototype，这是所有对象的最终原型。

console.log(person1.hasOwnProperty('name')); // true
console.log(person1.hasOwnProperty('greet')); // true
console.log(person1.hasOwnProperty('toString')); // false