组合使用构造函数模式和原型模式

上篇,我们提到了原型模式的缺点,就是每个实例不能拥有自己的属性,因为纯原型模式所有的属性都是公开给每个实例的,故我们可以组合使用构造函数模式和原型模式。构造函数用来定义实例的属性,而原型模式用来定义方法和公用属性。这样的话,每个实例都有自己的属性副本(而不是指向原型的引用),同时它也共享原型上方法的引用。而且,这种混合模式还支持对构造函数传参,所以可以说是结合了两种模式的优点。示例如下:

  1. ```javascript
  2. function Animal(name,type){
  3. this.name = name;
  4. this.type = type;
  5. }
  6. Animal.prototype = {
  7. constructor: Animal,
  8. sayName : function(){
  9. console.log("oh ~~~~我的名字叫"+this.name);
  10. }
  11. };
  12. var tom = new Animal("tom","Cat");
  13. var jerry = new Animal("jerry","Mouse");
  14. console.log(tom.name === jerry.name); //false
  15. console.log(tom.sayName === jerry.sayName); //true
  16. ```

上面的例子中,实例属性都都是在构造函数中定义的,故每个实例的属性都是私有的副本,不会互相影响。而在原型中定义的方法,每个实例的引用都是指向同一个方法(原型上的)。这种组合模式是在JS中使用最广的一种创建自定义类型的方法,推荐使用。

动态原型模式

动态原型模式是用来解决原型和构造函数独立的问题。很多情况下,构造函数和原型都是相互独立的,这有的时候不太美观,而为了解决这么一批对代码有洁癖的程序猿(例如我),在JS中衍生了一种奇葩的解决方案。这种方案就是动态原型模式,他把所有的信息都封装在构造函数中,而通过在构造函数中初始化原型(仅在必要情况下),这样就不仅保留了构造函数模式和原型模式的优点,而且单独的相对独立也得到了解决。

而仅在必要情况下初始化原型,可以通过检查某个应该存在的方法是否有效来判断。代码如下:

  1. ```javascript
  2. function Animal(name,type){
  3. this.name = name;
  4. this.type = type;
  5. if(typeof this.sayName != "function"){
  6. Animal.prototype.sayName = function(){
  7. console.log("oh~~~my name is "+this.name);
  8. }
  9. }
  10. }
  11. var tom = new Animal("tom","Cat");
  12. var jerry = new Animal("jerry","Mouse");
  13. console.log(tom.name === jerry.name); //false
  14. console.log(tom.sayName === jerry.sayName); //true
  15. ```

以上代码会检查原型是否初始化完成,如果没有就对原型进行初始化。要注意的是使用动态原型模式时,不能以字面量的形式重写原型对象,因为这样就切断了已有实例和新原型的关系。不过虽然这种方法很好用,但是我觉得这种方式(以if判断)容易造成代码的混淆,而且把原型init放在构造函数中也不是一个很好的方法,所以最后我还是选择了独立原型和构造函数,只不过我对原型和构造函数上面再做了一层封装。(个人喜好,要喷请轻点。。。)

总结

通过这三篇(这一篇算是收尾),对原型模式做了大体的归纳,由于经验和阅历的关系,没有办法面面俱到。文章内容参考了高程,设计模式,编程模式等,在写的过程中,也对自己的知识体系进行了一遍梳理,收获很大。

后记

如果你在文中发现有什么错误或则疑惑,我们可以共同讨论。群 239147101(N多JS大神)。

初涉JavaScript模式 (7) : 原型模式 【三】的更多相关文章

  1. 初涉JavaScript模式 (5) : 原型模式 【一】

    什么是原型模式? 原型模式(prototype)是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象.--引自JavaScript设计模式 我们创建的每一个函数都有一个prototype ...

  2. javascript创建对象之原型模式(三)

    少废话,先上代码: function Human() { } Human.prototype.name = "成吉思汗"; Human.prototype.sex = " ...

  3. 理解javascript中的原型模式

    一.为什么要用原型模式. 早期采用工厂模式或构造函数模式的缺点:  1.工厂模式:函数creatPerson根据接受的参数来构建一个包含所有必要信息的person对象,这个函数可以被无数次的调用,工厂 ...

  4. javascript 面向对象编程(工厂模式、构造函数模式、原型模式)

      javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /** * 工厂模 ...

  5. 浅谈JavaScript中的原型模式

    在JavaScript中创建对象由很多种方式,如工厂模式.构造函数模式.原型模式等: <pre name="code" class="html">/ ...

  6. [19/04/24-星期三] GOF23_创建型模式(建造者模式、原型模式)

    一.建造者模式 本质:分离了对象子组件的单独构造(由Builder负责)和装配的分离(由Director负责),从而可以构建出复杂的对象,这个模式适用于:某个对象的构建过程十分复杂 好处:由于构建和装 ...

  7. JavaScript之面向对象学习六原型模式创建对象的问题,组合使用构造函数模式和原型模式创建对象

    一.仔细分析前面的原型模式创建对象的方法,发现原型模式创建对象,也存在一些问题,如下: 1.它省略了为构造函数传递初始化参数这个环节,结果所有实例在默认的情况下都将取得相同的属性值,这还不是最大的问题 ...

  8. javascript创建对象之函数构造模式和原型模式结合使用(四)

    创建自定义类型的常见方式就是组合使用构造函数模式与原型模式一起使用. 构造函数模式用于定义实例对象的特有的部分(属性和方法),原型模式用于定义共享的部分. 这样最大限度的节省了内存的开销. funct ...

  9. Java进阶篇设计模式之三 ----- 建造者模式和原型模式

    前言 在上一篇中我们学习了工厂模式,介绍了简单工厂模式.工厂方法和抽象工厂模式.本篇则介绍设计模式中属于创建型模式的建造者模式和原型模式. 建造者模式 简介 建造者模式是属于创建型模式.建造者模式使用 ...

随机推荐

  1. 【Animations】

    这个比较高端了!CSS3动画帧数科学计算法 基于css的3d和动画 基于css的3d和动画(2) 如何使用JavaScript控制CSS Animations(动画)和Transitions(过渡) ...

  2. Oracle用户管理

    创建用户 概述:在oracle中要创建一个新的用户使用create user 语句,一般是具有dba(数据库管理员)的权限才能使用. create user 用户名 identified by 密码: ...

  3. c++转换构造函数和类型转换函数

    看stl源码时,有一段代码感觉很奇怪 iterator begin() { return (link_type)((*node).next); } iterator和link_type是两种不同类型, ...

  4. 《Mathematical Olympiad——组合数学》——抽屉原理

    抽屉原理可以说是组合数学中最简单易懂的一个原理了,其最简单最原始的一个表达形式:对于n本书放到n-1个抽屉中,保证每个抽屉都要有书,则必存在一个抽屉中有2本书.但是这个简单的原理在很多问题中都能够巧妙 ...

  5. 跳跃表Skip List【附java实现】

    skip list的原理 Java中的LinkedList是一种常见的链表结构,这种结构支持O(1)的随机插入及随机删除, 但它的查找复杂度比较糟糕,为O(n). 假如我们有一个有序链表如下,如果我们 ...

  6. ArrayList、LinkedList、HashMap底层实现

    ArrayList 底层的实现就是一个数组(固定大小),当数组长度不够用的时候就会重新开辟一个新的数组,然后将原来的数据拷贝到新的数组内. LinkedList 底层是一个链表,是由java实现的一个 ...

  7. IOT数据库选型——NOSQL,MemSQL,cassandra,Riak或者OpenTSDB,InfluxDB

    IoT databases should be as flexible as required by the application. NoSQLdatabases -- especially key ...

  8. 关于Form窗体的StartPosition 属性如何设置的问题

    1.让窗体在启动时在指定位置出现 form1.StartPosition Manual CenterScreen WindowsDefaultLocation (default) WindowsDef ...

  9. 使用Listener准备application作用域数据

    在程序中.有些数据我们希望在程序启动的时候就准备好,而且仅仅准备一次,放在application作用域中,这时候.我们一般会用Listener来准备这些数据. 可是,用Listener准备applic ...

  10. undo损坏故障恢复(二)ORA-01092,ORA-00604,ORA-01110

    undo 故障诊断与恢复(二) 今天是2013-09-01,目前困扰我将近一周的问题,终于解决了,我非常感谢帮助我的朋友,也非常感谢管我要钱然后替我解决问题的朋友(我没采用).这更激发了我一定要解决这 ...