JavaScript中的原型模式

当你需要创建的对象很耗时，需要密集的资源，并且很昂贵时，就需要原型模式。

作为一个健全的JavaScript 开发者，你必须写出干净、易懂、可维护的代码。你解决了令人兴奋的独特问题，但可能不需要独特的解决方案。你可能写过类似于你以前遇到的复杂问题的解决方案的代码。虽然你可能不承认，但你在使用设计模式。

设计模式指的是在开发软件解决方案时，针对一组常见的问题的一般可重复使用和可重复的解决方案。设计模式不是一个可以直接转化为源代码的成品项目。然而，它是一个模板，可以帮助开发人员了解在多种情况下用不同的解决方案来解决不同的问题。

在编码时使用设计模式可以帮助你加快开发过程，因为它为开发提供了成熟的范式。从广义上讲，设计模式有三种类型。

创造性设计模式。它包括类和对象的创建模式，即抽象工厂、构建器、工厂方法、对象池、原型和单子。
结构性设计模式。这种设计模式是关于对象和类的组成，并进一步分为适配器、桥梁、复合、装饰器、门面、代理、飞量和私有类数据模式。
行为设计模式。它是专注于对象通信的设计模式。行为设计模式包括不同的模式，如命令、责任链、解释器、迭代器、纪念品、调解器、观察者、空对象、状态、模板方法、策略和访问者。

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

原型设计模式

原型是基于对象的创建性设计模式。原型模式专注于创建对象，这些对象可以作为构造器创建的任何对象的蓝本。它允许开发者从客户端隐藏创建新实例的复杂性。在原型模式中，现有的对象被复制，而不是从头开始创建它。现有的对象作为一个蓝图，包括一个对象的状态。它还允许新复制的对象在需要时改变其状态，从而节省成本和开发时间。

当你创建的对象很耗时，需要密集的资源，并且很昂贵时，就需要原型模式。从现有对象中复制一个对象的最好和简单的方法是通过clone()方法和构造函数。

JavaScript中的原型模式

现在我们对原型设计模式有了一个概述，让我们来看看它在JavaScript中是什么样子，以及我们如何在代码中实现它。

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

例如，我们可以创建一个原型方法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，每当使用原型的Car构造函数调用时，它将返回新的Car实例。

JavaScript原型模式的优势和劣势

JavaScript原型模式的优点如下：

在运行时添加或删除产品。使用原型模式中的原型实例，你可以在系统中实现具体的类。这使得系统对客户来说更加灵活，因为他们可以在运行时添加或删除原型对象。
可重用性。在创建具有许多默认值的复杂类的实例时，可以使用原型模式，使开发人员能够专注于其他活动。
简单的新对象创建。在原型模式中，你可以通过调用clone()方法简单地创建对象，这很容易阅读，也隐藏了对象创建的复杂性。
通过改变价值和结构来指定新对象。在原型模式系统中使用对象组合，你可以为一个对象变量定义新的行为，而无需定义新的类。此外，在原型模式中，对象是由部分和子部分构建的，允许你将复杂的结构实例化以获得更好的重用性。
最小化子类。原型模式使你能够克隆一个原型对象，而不是要求工厂方法来创建一个新的原型对象。它减少了类的层次结构和系统的复杂性。

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

开发人员无法在原型模式中看到具体的类。
它的成本很高，也使得计算所需的迭代次数变得确定。
在每个子类中加入clone()或其他复制方法成为一种必须。
有时，克隆现有的类或对象变得很复杂。例如，一个可克隆的接口限制了所有的类/实现都要加入clone()方法（即使有些类可能不需要它）。
当子类由不支持复制的对象组成时，实现clone()方法会产生复杂的情况。

在你开始在你的系统中使用原型模式之前，请确保你只在创建一个网络应用系统时使用原型模式，该系统应该独立于其产品的构建、组成和表现方式。另一个可以使用原型模式的场景是当实例化的类在运行时被指定时。

你需要记住的其他关键点是

有三类设计模式可以被区分为创造型、结构型和行为型。
设计模式是帮助开发人员解决常见问题集的蓝图或模板。
原型模式是一种对象娱乐性的设计模式。
原型模式专注于创建对象，这些对象可以作为构造者创建的任何对象的蓝本。
原型设计模式使用原型继承。

以上就是关于原型模式的全部内容，但这并不是结束，我们很快会分享更多关于JavaScript不同设计模式的文章。我们希望你觉得这篇文章很有趣，对你未来的项目有帮助。