JavaScript原型模式：实现对象共享属性和方法！

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

摘要：

🌸 在JavaScript中，原型模式是一种基于原型的对象创建方式。通过使用原型，我们可以实现对象之间的共享属性和方法，从而提高代码的复用性和效率。

本文将介绍JavaScript原型模式的基本概念和使用方法。掌握原型模式，让你的JavaScript开发更加高效和简洁。🎭

引言：

🌿 JavaScript作为一种基于原型的编程语言，原型模式是其核心特性之一。原型模式允许我们通过原型来共享属性和方法，而不是在每个对象实例中单独定义它们。这种方式可以大大提高代码的复用性和效率。本文将带你探索JavaScript原型模式的魅力。🌟

正文：

1. 原型简介：🌱

在JavaScript中，每个对象都有一个原型（prototype），原型是一个普通的对象，它包含了一系列的属性和方法。

当我们创建一个新的对象实例时，这个实例会继承原型的属性和方法。

示例代码：

function Person() {}
Person.prototype.name = 'Alice';
Person.prototype.age = 25;
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
const person1 = new Person();
person1.greet(); // Hello, my name is Alice and I am 25 years old.
1
2
3
4
5
6
7
8

在上面的示例中，Person.prototype是Person函数的原型对象，它包含了一个name属性和一个greet方法。所有Person实例都会继承这个原型对象的属性和方法。

2. 原型链：💧

当我们访问一个对象的属性或方法时，如果这个对象本身没有这个属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到匹配的属性或方法为止。
示例代码：

function Person() {}
Person.prototype.name = 'Alice';
const person1 = new Person();
console.log(person1.name); // Alice
1
2
3
4

在上面的示例中，person1实例没有name属性，但是它继承了Person.prototype中的name属性。

3. 原型模式的优缺点：🌼

原型模式是一种创建型设计模式，它通过使用原型对象来避免创建新的实例对象，从而实现对象的复用。

原型模式有以下几个优点：

• 提高代码复用性：通过原型共享属性和方法，可以避免在每个实例中重复定义它们。
• 动态扩展对象：可以在运行时动态地添加属性和方法到原型中，从而扩展所有实例。
• 节省内存：不需要为每个实例单独分配内存，只需要为一个原型分配内存。

原型模式的缺点如下：

1. 原型对象的属性共享：原型对象的属性是共享的，即所有实例对象都会共享原型对象的属性。当一个实例对象修改原型对象的属性时，其他实例对象也会受到影响。

2. 原型对象的属性访问性能：原型对象的属性访问速度较慢，因为需要先从原型对象中查找属性，如果找不到再从实例对象中查找。

3. 构造函数的丢失：在使用原型模式时，构造函数的作用被削弱，因为实例对象的属性和方法都是从原型对象中复制而来的。这可能会导致构造函数变得不再必要，从而影响代码的可读性和可维护性。

4. 原型链问题：在原型模式中，原型对象和实例对象之间存在原型链关系，这可能会导致一些难以排查的bug。例如，当原型对象中的某个方法使用了实例对象的属性时，可能会导致意外的行为。

在使用原型模式时，需要注意以上缺点，并根据实际需求和项目规模来选择合适的实现方式。

总结：🌟

本文介绍了JavaScript中原型模式的基本概念和使用方法。通过使用原型，我们可以实现对象之间的共享属性和方法，从而提高代码的复用性和效率。掌握原型模式，让你的JavaScript开发更加高效和简洁。🎉

参考资料：

1. JavaScript Prototype Pattern
2. Prototype-based Inheritance