代码原型链上坠落，手撕JS的构造函数模式

2023-12-09 21:03:57

代码原型链上的跳跃：构造函数模式

在探索构造函数模式之前，我们先来回顾一下工厂模式。工厂模式通过一个工厂函数来创建对象，工厂函数负责根据不同的参数创建不同的对象。这种模式虽然简单易用，但存在两个问题：

工厂函数创建的对象类型无法被识别。
工厂函数创建的对象之间无法共享属性和方法。

为了解决这些问题，JavaScript中诞生了构造函数模式。构造函数模式通过一个构造函数来创建对象，构造函数负责创建对象并初始化对象的属性和方法。

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

const person1 = new Person('John', 25);
const person2 = new Person('Mary', 30);

上面的代码中，Person是一个构造函数，它接收两个参数：name和age。当我们使用new调用Person构造函数时，就会创建一个新的Person对象。这个对象具有name和age两个属性，分别存储着传入构造函数的参数值。

构造函数模式具有以下优点：

构造函数创建的对象类型可以被识别。通过instanceof运算符，我们可以判断出一个对象是否是由某个构造函数创建的。
构造函数创建的对象之间可以共享属性和方法。这是因为所有由同一个构造函数创建的对象都具有相同的prototype属性，该属性指向构造函数的prototype对象。prototype对象存储着构造函数的属性和方法，这些属性和方法可以被所有由该构造函数创建的对象共享。

构造函数模式与原型链

原型链是JavaScript中一个重要的概念。每个对象都有一个prototype属性，该属性指向另一个对象。这个对象被称为该对象的原型对象。原型对象也具有一个prototype属性，指向另一个对象，以此类推。

当我们访问一个对象的属性或方法时，JavaScript会首先在该对象中查找。如果找不到，则会沿着原型链向上查找，直到找到该属性或方法。

构造函数模式创建的对象的prototype属性指向构造函数的prototype对象。这意味着构造函数创建的对象可以继承构造函数prototype对象中的属性和方法。

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

person1.sayHello(); // Hello, my name is John
person2.sayHello(); // Hello, my name is Mary