首页 > 编程语言> > JavaScript 中的原型模式

JavaScript 中的原型模式

2023-07-21 19:03:44 作者：互联网

设计模式是指在开发软件解决方案时针对一组常见问题的通用可重用和可重复解决方案。设计模式不是要直接转换为源代码的已完成项目。但是，它是一个模板，可帮助开发人员了解在多个场景中使用不同解决方案解决不同问题的方法。

在编码时使用设计模式可以帮助您加快开发过程，因为它提供了经过验证的开发范例。在广泛的上下文中，有三种类型的设计模式：

最新的DZone参考卡

MySQL Essentials

创建设计模式：它包括类和对象创建模式，即抽象工厂、生成器、工厂方法、对象池、原型和单例。
结构设计模式：此设计模式完全与对象和类组合有关，并进一步分为适配器、桥接、复合、装饰器、立面、代理、蝇量级和私有类数据模式。
行为设计模式：它是专注于对象通信的设计模式。行为设计模式由不同的模式组成，例如命令、责任链、解释器、迭代器、记忆器、调解器、观察者、空对象、状态、模板方法、策略和访问者。

但是在今天的博客中，我们将介绍JavaScript中的原型设计模式。所以，让我们开始吧！

原型模式

原型是基于对象的创建设计模式。原型模式侧重于创建可用作构造函数创建的任何对象的蓝图的对象。它允许开发人员隐藏从客户端创建新实例的复杂性。在原型模式中，复制现有对象，而不是从头开始创建它。现有对象充当蓝图，并包含对象的状态。它还允许新复制的对象在需要时更改其状态，从而节省成本和开发时间。

当您创建的对象耗时、需要大量资源且成本高昂时，需要原型模式。从现有对象复制对象的最佳和简单方法是通过 clone（）方法和构造函数。

JavaScript 中的原型模式

现在我们已经概述了原型设计模式，让我们来看看它在 JavaScript 中的样子，以及如何在我们的代码中实现它。

正如我们所理解的，原型模式的核心目标是创建可用作构造函数创建的任何对象的蓝图或模板的对象。为了实现这一点，原型设计模式使用原型继承。此外，由于原生支持原型继承（对象可以使用 JavaScript 中的原型链访问原型继承），使用原型模式变得更加容易。

例如，我们可以创建一个原型方法 Car 来创建不同类型的 Car 对象，同时依次返回它们的引用，如下所示：

       //Prototype function syntax
// The Constructor (Part 1)
// An object must be defined with parameters
function Car(name) {
this.name = name;
}

        // Function Prototype (Part 2)

        // Add functionality and extend objects

        Car.prototype.showCarName = function () {

            //console.log('This is ' + this.name);

            return 'This is ' + this.name;

        }


// Calling Prototype based code
// Resembles traditional OOP styles
const carOne = new Car('SUV');
const carTwo = new Car('Sedan');
var car1 = carOne.showCarName();
var car2 = carTwo.showCarName()

console.log("Using Prototype pattern method - carOne: ", carOne) //returns objects own defined properties and methods
console.log("Using Prototype pattern method - carOne function length: ", Object.getOwnPropertyNames(carOne).length)
console.log("carOne Using Prototype pattern method type? : ", typeof carOne);// object

console.log("Using Prototype pattern method - carTwo: ", carTwo) //returns objects own defined properties and methods
console.log("Using Prototype pattern method - carTwo function length: ", Object.getOwnPropertyNames(carTwo).length)
console.log("carOne Using Prototype pattern method type? : ", typeof carTwo);// object

console.log("Using Prototype pattern - Object creation of carOne: " + car1);
        console.log("Using Prototype pattern - Object creation of carTwo: " + car2);

除了从 Car 原型方法返回引用之外，我们还创建了两个名为 carOne 和 carTwo 的不同对象，它们将调用原型模式构造函数 Car。当我们分别将名称传递给 SUV 和 Sedan（如 Sedan）等对象时，每当 Car 构造函数使用原型调用时，它都会返回新的 Car 实例。

JavaScript 原型模式的优点和缺点

JavaScript 原型模式的优点如下：

在运行时添加或删除产品：使用原型模式中的原型实例，可以在系统中实现具体类。它使系统对客户端来说更加灵活，因为他们可以在运行时添加或删除原型对象。
可重用性：在创建具有许多默认值的复杂类的实例时，可以使用原型模式，使开发人员能够专注于其他活动。
简单的新对象创建：在原型模式中，您只需调用clone（）方法即可创建对象，该方法易于阅读，并且还隐藏了对象创建的复杂性。
通过改变值和结构来指定新对象：在原型模式系统中使用对象组合，您可以为对象变量定义新行为，而无需定义新类。此外，在原型模式中，对象是从零件和子部分构建的，允许您实例化复杂的结构以获得更好的可重用性。
最小化子类：原型模式使您能够克隆原型对象，而不是要求工厂方法创建新对象。它降低了系统的类层次结构和复杂性。

记住 JavaScript 中原型模式的优点，让我们也来看看它的缺点：

开发人员无法在原型模型中看到具体类。
它的成本很高，并且还可以确定计算所需的迭代次数。
必须将克隆（）或其他复制方法合并到每个子类中。
有时，克隆现有类或对象会变得复杂。例如，可克隆接口约束所有类/实现以合并clone（）方法（即使某些类可能不需要它）。
当子类由不支持复制的对象组成时，实现 clone（）方法可能会造成复杂性。

在开始在系统中使用原型模型之前，请确保在创建 Web 应用程序系统时仅使用原型模式，该系统应独立于其产品的构建、组成和表示方式。可以使用原型模式的另一种情况是在运行时指定实例化的类。

您需要记住的其他要点是：

可以区分三类设计模式，即创建模式、结构模式和行为模式。
设计模式是帮助开发人员解决常见问题集的蓝图或模板。
原型模式是一种对象创建设计模式。
原型模式侧重于创建可用作构造函数创建的任何对象的蓝图的对象。
原型设计模式使用原型继承。

标签：模式,JavaScript
来源：