关于js的设计模式(简单工厂模式,构造函数模式,原型模式,混合模式,动态模式)

<1>工厂模式

简单来说就是封装后的代码,简单的工厂模式是很好理解的,关于它的作用,就是利用面向对象的方法,把一些对象封装,使一些占用空间多的,重复的代码封装起来。实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性以及方法再将对象返回即可。

function creatper(name,age){

var per=new Object(); //原料

//加工

per.name=name;

per.age=age;

per.sayHi=function(){

console.log(per.name+‘‘+per.age);  }

return per; //出厂

}

var me=creatper(‘katherine‘,22);

me.sayHi();

console.log(me.name);

可以看出,使用工厂模式,可以重复调用这个per函数来生成不同属性值得对象,这就像工厂一样,批量生产,里面的原料,加工,出厂都很清晰。但是你会发现工厂模式是无法识别对象的类型,因为全都是object,不像Date,Array等,但是构造函数就不是了。这还只是简单的工厂模式,复杂的工厂模式(抽象模式)等以后再回来详细了解。

<2>构造函数模式

ECMAScript中构造函数可以用来创建特定对象,类似于Array,Date等原生的js对象

function Student(name,age,classa){
 this.name=name;
 this.age=age;
 this.classa=classa;
 this.sayHello=function(){
  console.log(this.name,this.age,this.classa);
 }
}
var me=new Student("xiaoai",22,"大三");
console.log(me.classa);
me.sayHello();
console.log(me instanceof Student);//true

由代码可以看出,于工厂模式除了函数名不同以外,还要注意:构造函数名的首字母大写(不过好像没有严格规定)。构造函数也没有显示创建的对象,使用了this,直接把属性和方法赋值给了this对象。没有return语句,实例化的时候要使用new,而且它能够识别对象(这正是构造函数模式胜于工厂模式的地方)。

构造函数虽然好用,但也有很大的缺点,就是每次创建实例的时候都要重新创建一次方法,实际应用中,每次创建对象的时候属性值不同,而对象的方法却是相同的,所以创建两次完全相同的方法是没有必要的,因此有人会说可以把函数方法放到对象外面。如下:

function Student(name,age,classa){
 this.name=name;
 this.age=age;
 this.classa=classa;
 
}
function sayHello(){
  console.log(this.name,this.age,this.classa);
 }
var me=new Student("xiaoai",22,"大三");
console.log(me.classa);
me.sayHello();
console.log(me instanceof Student);

这样一改,就把sayhello函数设置成了全局函数,这样一来Student的每一个实例访问的都是同一个函数,可是,在全局作用域中定义一个只供student使用的函数,就显得有些过分了,如果在全局作用域中定义许多这样仅供特定对象使用的方法,那就太浪费空间了,显然也失去了面向对象所注重的封装性了,因此完全可以使用原型解决这个问题。

<3>原型模式

js规定每一个创建的函数都有prototype(原型)属性,这个属性是指针,指向一个对象,而这个对象的用途是包含由特定类型的所有实例所共享的属性和方法,使用原型对象就可以让所有实例对象均包含这些属性及方法。

function per(){}

per.prototype.name=‘xiaoai‘;

per.prototype.age=22;

per.prototype.course=[‘php‘,‘javascript‘,‘java‘,‘C#‘];

per.prototype.say=function(){

console.log(this.name+this.age+this.course);

}

var per1=new per();

var per2=new per();

per1.name=‘katherine‘;

per1.course.push(‘Html5‘);

per1.say();

per2.say();

per2.course.pop();

关于原型模式的缺点,我想也是很明显的,它省略了构造函数传递初始化参数这一环节,结果所有实例均在默认情况下取得了相同的属性值,虽然你可以在后来做出更改,但一点都不方便,这样还不是最大的问题,原型模式最大的问题是在于共享的本性所导致的,由于共享,因此一个实例修改了引用,另一个也随之更改了属性。因此一般不会单独使用原型模式。

<4>混合模式(原型模式+构造函数)

function per(name,age,course){

this.name=name;

this.age=age;

this.course=course;

}

per.prototype.say=function(){

console.log(this.name+this.age+this.course);

}

var per1=new per(‘katherine‘,22,[‘C#‘,‘java‘,‘PHP‘,‘Javascript‘]);

var per2=new per (‘xiaoai‘,21,[‘oracle‘,‘mysql‘,‘nodejs‘,‘html5‘]);

per1.say();

per2.say();

per1.course.pop();

per1.say();

per2.say();

由代码可以看出混合模式的分工:构造函数用于定义实例的属性,而原型模式用于定义方法和一些共享的属性。每个实例都会有自己的属性,但同时又共享着方法,最大限度的节省了内存。另外这种模式还支持传递初始参数。使用最广泛。

<5>动态模式

function per(name,age,course){

this.name=name;

this.age=age;

this.course=course;

if(typeof this.say!=‘function‘){

per.prototype.say=function(){

console.log(this.name+this.age+this.course);

}

}

}

var per1=new per(‘katherine‘,22,[‘C#‘,‘java‘,‘PHP‘,‘Javascript‘]);

var per2=new per(‘xiaoai‘,22,[‘oracle‘,‘mysql‘,‘nodejs‘,‘html5‘]);

per1.say();

per2.say();

per1.course.pop();

per1.say();

per2.say();

原文地址:https://www.cnblogs.com/lucky-ball/p/8528654.html

时间: 2024-10-14 06:57:15

关于js的设计模式(简单工厂模式,构造函数模式,原型模式,混合模式,动态模式)的相关文章

PHP经典设计模式--简单工厂模式

PHP经典设计模式--简单工厂模式 pfinal介绍 本来我们要获取一个类的实例,需要用到new关键字.但是如果new 直接写到业务代码里,一个类在很多地方都实例化过,以后要是这个类出了什么问题,比如要改个名字(实际中,你更多的可能是修改构造函数方法),那么就尴尬了,需要改很多地方. 工厂模式,顾名思义,就是不用new来获得实例,而是把业务类放进一个工场类里,由工厂(类)『生产』出对应的实例. 实现 SimpleFactory.php <?php namespace DesignPatterns

设计模式- 简单工厂模式、工厂方法模式及其比较

简单工厂模式及实例 前言工大有许多同学是做java的,大家都知道java最大的优点是它的完全OO化和它在多年的发展过程中吸收和总结了许多先进的框架与模式,其中工厂模式就是最常用的模式之一.下面我想将我在学习和实践过程中对工厂模式的认识与了解介绍给大家.由于笔者能力限制,在实践中也没参与过什么大的项目,笔者参与过的项目用到的工厂模式主要是简单工厂模式(Simple Factory)和工厂方法模式(Factory Method),所以笔者在本文主要介绍的是这两种模式.准备知识在OO设计领域,我们知道

Java研究之学习设计模式-简单工厂模式详解

 简介: 从设计模式的类型上来说,简单工厂模式是属于创建型模式,又叫做静态工厂方法(Static Factory Method)模式,但不属于23种GOF设计模式之一.简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例. 类图: 从UML类图中,可以看出,简单工厂模式的意思,就是把一个类内部,需要生成的部分,提取出来,变为一个工厂,通过工厂来new对象. 假设我们要吃苹果了,我们可以在代码中new一个苹果出来:当我们需要吃香蕉了,我们在代码中new一个香蕉出来.这种做法你会不会觉得麻烦

1.大话设计模式-简单工厂模式

编程时一门技术,更是一门艺术 简单工厂模式利用面向对象方式通过继承.封装.多态把程序的耦合度降低,设计模式使得程序更加灵活,容易修改,易于复用. 下面是服务器计算器代码: 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 7 namespace DesignModel 8 { 9 /// <s

面向对象编程-基础(工厂、构造函数、原型、混合、动态等模式)

本文参考:js高级程序设计 第三版这篇文章我啃了大半天写的,是很烦,没有毅力看下去的注定还是不会(1).工厂模式:封装一个函数createPerson,这个函数可以创造一个人对象,包含三个属性和一个方法,然后利用这个函数分别创建了2个对象p1,p2. function createPerson(name,age,job){ var p=new Object(); p.name=name; p.age=age; p.job=job; p.showName=function(){ alert(thi

设计模式 -- 简单工厂(Java&amp;&amp;PHP)

面向对象设计的基本原则                                                                 单一职责系统中的每一个对象应该只有一个单独的职责,所有对象关注的应该是自身职责的完成.基本思想:高内聚,低耦合. 开闭原则一个对象对扩展开放,对修改关闭.基本思想:对类的改动是通过增加代码进行的,而不是修改现有的代码. 里氏替换原则在任意父类出现的地方,都可以使用子类来替代. 依赖注入原则要依赖于抽象,不要依赖于具体的实现.基本思想:在开发中尽量

一口一个设计模式--简单工厂VS工厂VS抽象工厂

前几天一直在准备大学毕业,始终脱不开身,今天终于有时间进行设计模式的研究.咱们今天研究的话题是工厂家族三种设计模式的对比--简单工厂VS工厂VS抽象工厂. 经过细心推敲,我们不难得出:工厂模式是简单工厂的升级版,抽象工厂是工厂模式的升级版,简单工厂+抽象工厂是抽象工厂的升级版.知道了它们之间的宏观关系,下面我带它们从一次次蜕变了解它们为什么是这样的关系. 我们最原始的代码思维是把所有的实现都放在一个类中,功能虽然是实现了,但耦合性非常高,很不方便维护,好比活字印刷术之前的印刷,一个地方需要修改,

设计模式-简单工厂(Demo)

简介 工厂都是创建型模式.用来NEW类的.本文章用一个故事讲述了简单工厂模式 故事 在遥远的未来.chenchen我生活条件不错.但是每天都要做饭.chenchen很懒.只想吃.不想干.所以就请了个女仆给chenchen做饭吃.女仆很牛.chenchen只要说.我要吃牛排.不一会.牛排就做好了放在桌子上.我又说还要红酒.女仆开好红酒.倒好放在桌子上.美滋滋的哈!小肉吃着.小酒喝着.美女陪着此等逍遥快活! 是什么? 代替客户端NEW类.客户端与多个类解耦 为什么要用? 上述故事.因为我做很多饭.要

java设计模式----简单工厂

简单工厂模式是类的创建模式,又叫做静态工厂方法(Static Factory Method)模式.简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例.下面是简单工厂UML模型: 那么简单工厂模式是在什么场景下使用呢,下面就以本人的理解举例说明: 就拿登录功能来说,假如应用系统需要支持多种登录方式如:手机认证.邮箱认证.用户名登录.那么自然的做法就是建立一个各种登录方式都适用的接口. 定义登录接口: package com.simple.factory; /** * 登录接口 * */ pu

跟着ZHONGHuan学习设计模式--简单工厂

转载请注明出处!!!http://blog.csdn.net/zhonghuan1992 所有配套代码均在github上:https://github.com/ZHONGHuanGit/DesignPattern 跟着ZHONGHuan学习设计模式 简单工厂 简介: 从设计模式的类型上来说,简单工厂模式是属于创建型模式,又叫做静态工厂方法(Static Factory Method)模式,但不属于23种GOF设计模式之一.简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例.   类图: 从