JavaScript-设计模式(四) 原型模式

定义：原型模式（Prototype pattern）指的是使用一个原型的实例为模板，通过复制一个已经存在的实例来返回新的实例，而不是从头开始新建实例。原型模式是一种对象创建型模式。

解释

原型模式不仅是一种设计模式，它还是一种编程范式（programming paradigm），是 JavaScript 面向对象系统实现的根基。

使用场景

原型模式用于在创建对象时，通过共享某个对象原型的属性和方法，从而达到提高性能、降低内存占用、代码复用的效果。

实现一个简单的原型模式：

// ES5
function Person(n,a){this.name =  nthis.age = a}Person.prototype.say = function (){console.log(this.name,this.age)}// 继承function Teacher(n,a,id){// 私有属性继承Person.call(this,n,a)// 新增私有属性this.id = id}Teacher.prototype = new Person()Teacher.prototype.sayID = function (){console.log(this.id)}let goudan = new Person('狗蛋',18)let hundan = new Teacher('lalal',20,889)hundan.say()hundan.sayID()

当前存在一个缺陷，当前的Teacher创建的实例原型上仍然存在构造函数Person的私有属性，改进如下：

// ES5
function Person(n,a){this.name =  nthis.age = a}Person.prototype.say = function (){console.log(this.name,this.age)}// 继承function Teacher(n,a,id){// 私有属性继承Person.call(this,n,a)// 新增私有属性this.id = id}function Fn (){}Fn.prototype = Person.prototypeTeacher.prototype = new Fn()// 绑定构造函数 Teacher.prototype.constructor = Teacher()Teacher.prototype.sayID = function (){console.log(this.id)}let goudan = new Person('狗蛋',18)let hundan = new Teacher('lalal',20,889)hundan.say()hundan.sayID()

在ES6 中，可以直接通过extends 关键字去继承

// ES6
class Person{constructor(n,a) {this.name = nthis.a = a}}// 继承class Teacher extends Person{constructor(n,a,id) {super(n,a);this.id = id}sayID(){console.log(this.name,this.id)}}let hunqiu = new Teacher('老师','18',1)hunqiu.sayID()

ES6 class 语法糖，省略了太多复杂的内容~

优缺点

优点：

减少内存消耗，系统资源占用少, 所有实例共享同一方法，不会创建多个
拓展性比较好。原型对象继承时，子类在重写父类原型方法时很方便，可以很方便调父类房法，再扩展。

缺点：

优点1既是最大的优点，也同样带来一个严重问题，如果共享的对象是引用对象（如array）则也会造成多个实例共享同一个array，很可能会相互影响。
对已有类进行改造时需要修改源代码，违背了开关原则。

总结

js 在创建对象比较消耗内存、耗时长，可以通过减少内部属性创建的方式降低内存占用。

而原型模式就是使用 javascript 语言的原型特性进行相同属性的共享，从而达到降低内存占用、提高对象创建效率。

JavaScript-设计模式(四) 原型模式相关推荐

设计模式(7)[JS版]-JavaScript设计模式之原型模式如何实现？？？
目录 1.什么是原型模式 2 参与者 3 实例讲解 4 使用 Object.create实现原型模式 4.1 Object.create()的用法 4.2 用 Object.create实现继承 4. ...
JavaScript设计模式--简单工厂模式例子---XHR工厂
JavaScript设计模式--简单工厂模式例子---XHR工厂第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //静态方 ...
JavaScript为什么使用原型模式而不是类模式
导言: 作为JavaScript初学者的本菜鸡而言,刚一开始接触这门语言我就被他的原型模式给吓到了.并且在相当长的一段时间之内,我都完全不能理解或者不能接受这个模式.直到最近经过多方调查和思考才有所明 ...
C#设计模式(6)——原型模式（Prototype Pattern）
一.引言在软件系统中,当创建一个类的实例的过程很昂贵或很复杂,并且我们需要创建多个这样类的实例时,如果我们用new操作符去创建这样的类实例,这未免会增加创建类的复杂度和耗费更多的内存空间,因为这样在 ...
设计模式回顾——原型模式（C++）
文章目录 1 前言 2 什么是原型模式 2.1 原型模式组成 2.2 原型模式UML图 2.3 原型模式作用 3 原型模式优缺点 4 什么地方使用原型模式 5 原型模式实现 6 原型模式与构造函数 1 ...
【GOF23设计模式】原型模式
[GOF23设计模式]原型模式来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_原型模式.prototype.浅复制.深复制.Cloneable接口浅复制 1 pa ...
乐在其中设计模式(C#) - 原型模式(Prototype Pattern)
[索引页] [源码下载] 乐在其中设计模式(C#) - 原型模式(Prototype Pattern) 作者:webabcd 介绍用原型实例指定创建对象的种类,并且通过拷贝这个原型来创建新的对象. ...
教你如何一篇博客读懂设计模式之—--原型模式
教你如何一篇博客读懂设计模式之----原型模式 what:是什么原型模式: 用于创建重复的对象,既不用一个属性一个属性去set和get,又不影响性能,原型模式产生的对象和原有的对象不是同一个实例,他 ...
二十三种设计模式之原型模式
今天继续探讨GOF二十三种设计模式的原型模式,原型模式也是属于创建型模式的一种原型模式通俗的讲就是对象复制的过程,即通过一个原型对象,我可以得到一个该对象的克隆. 下面来看下原型模式的第一种写法-- ...

JavaScript-设计模式(四) 原型模式

JavaScript-设计模式(四) 原型模式

解释

使用场景

优缺点

总结

JavaScript-设计模式(四) 原型模式相关推荐

最新文章

热门文章