原始模式:

     var Car = new Object;

     Car.color = "blue";
Car.door = 4;
Car.showColor = function() {
alert(this.color);
} Car.showColor(); //"blue";

原理:声明对象,后续给对象加属性和方法

优点:可以直观的看出对象Car有属性 color,door,方法showcolor;

缺点:如果有多个类型,需要创建多个实例;

工厂模式:

     function createCar() {
var Car = new Object; Car.color = "blue";
Car.door = 4;
Car.showColor = function() {
alert(this.color);
} return Car; } var car1 = createCar();
var car2 = createCar();
car1.showColor() //blue;
car2.showColor() //blue;

原理:将原始方式封装到函数中,并返回这个对象

优点:同一类型同一属性可以重复调用;

缺点:同一类型不同属性值的不能调用;

工厂模式为函数传参

    function showColor() {
alert(this.color);
} function createCar(sColor, sDoor) {
var Car = new Object; Car.color = sColor;
Car.door = sDoor;
Car.showColor = showColor;
return Car; } var car1 = createCar("red","4");
var car2 = createCar("blue","6");
car1.showColor();
car2.showColor();

原理:工厂模式的升级版,为函数添加参数,方法调取外部的函数的指针

优点:解决了重复创建函数的问题;

缺点:不符合语义,看起来不像是对象的方法,理解难道大

构造函数方式

function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function() {
alert(this.color);
};
} var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

原理:在构造函数内使用 this 关键字,创建属性和方法。再使用 new 运算符创建实例,通过传参生成不同的实例。

优点:该方式解决了以上模式所遇到的问题

缺点:构造函数会重复生成函数,为每个对象都创建独立的函数版本

原型方式

function Car() {
} Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.showColor = function() {
alert(this.color);
}; var oCar1 = new Car();
var oCar2 = new Car();

原理:创建一个构造函数,再函数外为通过prototype方式添加属性和方法,最后通过new 运算符生成实例

优点:语义上,看起来所有属性都是同一个对象,解决了上两种方式所遇到的问题;

缺点:不能通过给构造函数传递参数来初始化属性的值,而且如果其中某个实例属性重新赋值,会导致其他的实例同一属性也会发生变化

function Car() {
} Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25; //指向一个对象
Car.prototype.drivers = new Array("Mike","John");

Car.prototype.showColor = function() {
alert(this.color);
}; var oCar1 = new Car();
var oCar2 = new Car();

//为oCar1新加入
oCar1.drivers.push("Bill"); alert(oCar1.drivers); //输出 "Mike,John,Bill"
alert(oCar2.drivers); //输出 "Mike,John,Bill"

上面的代码中,属性 drivers 是指向 Array 对象的指针,该数组中包含两个名字 "Mike" 和 "John"。由于 drivers 是引用值,Car 的两个实例都指向同一个数组。这意味着给 oCar1.drivers 添加值 "Bill",在 oCar2.drivers 中也能看到。输出这两个指针中的任何一个,结果都是显示字符串 "Mike,John,Bill"。

混合的构造函数/原型方式

function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike","John");
} Car.prototype.showColor = function() {
alert(this.color);
}; var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25); oCar1.drivers.push("Bill"); alert(oCar1.drivers); //输出 "Mike,John,Bill"
alert(oCar2.drivers); //输出 "Mike,John"

原理:利用构造函数方式创建函数的不同的部分,利用原型方式来定义相同的方法和属性

优点:此种 方式即符合语义又可以扩展新的属性和方法

结语:此篇只是作为理解设计模式所写,如有错误,请各位同仁指出,共同学习

参照链接 http://www.w3school.com.cn/js/pro_js_object_defining.asp

js 的四种设计模式的优缺点的更多相关文章

  1. xml常用四种解析方式优缺点的分析×××××

    xml常用四种解析方式优缺点的分析 博客分类: xml   最近用得到xml的解析方式,于是就翻了翻自己的笔记同时从网上查找了资料,自己在前人的基础上总结了下,贴出来大家分享下. 首先介绍一下xml语 ...

  2. js实现23种设计模式(收藏)

    js实现23种设计模式 最近在学习面向对象的23种设计模式,使用java 和 javascript 实现了一遍,但是因为目前大三,还没有比较正规的大项目经验,所以学习的过程种我觉得如果没有一定的项目经 ...

  3. 下面给出了四种设计模式的作用: 外观(F

    下面给出了四种设计模式的作用: 外观(Fa?ade :为子系统中的一组功能调用提供一个一致的接口,这个接口使得这一子系统更加容易使用: 装饰(Decorate):当不能采用生成子类的方法进行扩充时,动 ...

  4. HTML中使用js的三种方式及优缺点介绍

    1.内部js: 在直接在页面的<script></script>标签内写js代码 优点:相对于使用行内js,内部js代码较为集中,与页面结构的实现代码耦合度较低,比较便于维护 ...

  5. Java 判断字符串是否为空的四种方法、优缺点与注意事项

    以下是Java 判断字符串是否为空的四种方法: 方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低: if(s == null ||"".equals(s));方法二: ...

  6. JS常见的四种设计模式

    1 工厂模式 简单的工厂模式可以理解为解决多个相似的问题; function CreatePerson(name,age,sex) { var obj = new Object(); obj.name ...

  7. asp.net后台注册js的四种方法

    1. 用Response.Write方法 代码如下: Response.Write("<script type='text/javascript'>alert("kel ...

  8. 二十四种设计模式:命令模式(Command Pattern)

    命令模式(Command Pattern) 介绍将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可取消的操作. 示例有一个Message实体类,某个 ...

  9. 二十四种设计模式:解释器模式(Interpreter Pattern)

    解释器模式(Interpreter Pattern) 介绍给定一个语言, 定义它的文法的一种表示,并定义一个解释器,该解释器使用该表示来解释语言中的句子. 示例有一个Message实体类,某个类对它的 ...

随机推荐

  1. 压缩文件 compress files 以7z 格式及解压 或者别的格式

    主要是为了能大量的减少文件使用空间,为了能节约带宽. 那么就用了7z的压缩方式. 这里,使用了7z的压缩方式,硬生生的将一个10k多的图片压缩成了3k左右的包.图片是不好压缩的,这个压缩比比zip g ...

  2. C++输入一个字符串,把其中的字符按照逆序输出的两种方法

    用字符数组方法: 基本思路是,先判断字符的结束标志'\0',然后从该位置向前输出. 实现代码: #include<iostream> using namespace std; int ma ...

  3. java applet初探之计算器

    这里是用java写的一个计算器,用appllet的方式在浏览器中运行,如果电脑上装有java运行环境jre就能一试.将html代码保存为*.html(名称能够自定),applettest编译为clas ...

  4. java BigInteger源码学习

    转载自http://www.hollischuang.com/archives/176 在java中,有很多基本数据类型我们可以直接使用,比如用于表示浮点型的float.double,用于表示字符型的 ...

  5. Spring MVC---数据绑定和表单标签

                                   数据绑定和表单标签 数据绑定 数据绑定是将用户输入绑定到领域模型的一种特性,在Spring MVC的controller和view数据传递 ...

  6. javascript构造函数以及原型对象的理解

    以下是一个构造函数的例子 如果是实例方法,不同的实例化,它们引用的地址是不一样的,是唯一的. //定义一个构造函数 function People(name,age){ this.name=name; ...

  7. ASP文件上传代码

    在网上看到的代码,稍微有点问题,改了一下就可以了.Chrome下是可以用的,别的浏览器还没有确认. <% Response.Buffer = True Server.ScriptTimeOut= ...

  8. Santa Claus and a Palindrome

    Santa Claus and a Palindrome 题目链接:http://codeforces.com/contest/752/problem/D 贪心 很自然地,可以想到,若subS不是回文 ...

  9. IOS GCD图片数据异步下载,下载完成后合成显示

    关于GCD使用详解,请看我的上一篇blog:http://www.cnblogs.com/xin-lang/p/6278606.html 前段时间遇到个需要异步下载,下载完成后再组合显示的东西.这里我 ...

  10. winServer2008添加IIS服务

    右键我的电脑,选择管理,打开服务器管理器 点击左边菜单栏角色调出角色窗口 接着点击添加角色,弹出添加角色向导 点击下一步进入服务器角色选项 勾选Web服务器(IIS),点击下一步 出现 点击下一步,出 ...