1、js工厂模式

  

 var lev=function(){
return "嘿哈";
};
function Parent(){
var Child = new object();
Child.name = "李小龙";
Child.age = "30";
Child.lev = lev;
return Child; };
var x=Parent();
alert(x.name);
alert(x.lev());

说明:

  1. 在函数中定义对象,并定义对象的各种属性,虽然属性可以为方法,但是建议将属性为方法的属性定义到函数之外,这样可以避免重复创建该方法。
  2. 引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new object(); 因为后者可能会出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象。
  3. 在函数的最后返回该对象。
  4. 不推荐使用这种方式创建对象,但应该了解。

2、js构造函数模式

 var lev=function(){
return "嘿哈";
};
function Parent(){
this.name = "李小龙";
this.age = "30";
this.lev = lev;
};
var x=Parent();
alert(x.name);
alert(x.lev());

说明:

  1. 与工厂方式相比,使用构造函数方式创建对象无需在函数内部创建对象,而使用this指代,并而函数无需明确return。
  2. 同工厂模式一样,虽然属性的值可以为方法,仍建议将该方法定义在函数之外。
  3. 同样的,不推荐使用这种方式创建对象,但仍需了解。

3、js原型模式

 var lev=function(){
return "嘿哈";
};
function Parent(){
Parent.prototype.name = "李小龙";
Parent.prototype.age = "30";
Parent.prototype.lev = lev;
};
var x=Parent();
alert(x.name);
alert(x.lev());

说明:

  1. 函数中不对属性进行定义。
  2. 利用prototype属性对属性进行定义。
  3. 同样的额,不推荐使用这样的方式创建对象。

4、构造函数+原型的js混合模式(推荐)

 function Parent(){
this.name = "李小龙";
this.age = "30";
};
Parent.prototype.lev=function(){
return this.name;
}
var x=Parent();
alert(x.name);
alert(x.lev());

说明:

  1. 该模式是指混合搭配使用构造函数和原型方式。
  2. 将所有的属性,不是方法的定义在函数中(构造函数的方式),将所有属性值为方法的利用prototype在函数之外定义(原型方式)。
  3. 推荐使用这样的方式创建对象,这样有好处。

5、构造函数+原型的动态原型模式(推荐)

 function Parent(){
this.name = "李小龙";
this.age = "30";
if(typeof Parent.lev == "undefined"){
Parent.prototype.lev = function(){
return this.name;
}
Parent.lev = true;
}
}; var x=Parent();
alert(x.lev());

说明:

  1. 动态原型方式可以理解为混合构造函数,原型方式的一个特例。
  2. 该模式中,属性为方法的属性直接在函数中进行了定义,但是因为
    if(typeof Parent.lev == "undefined"){
    Parent.prototype.lev = function(){
    return this.name;
    }
    Parent.lev = true;
    } 从而保证创建该对象的实例时,属性的方法不会被重复的创建。

js五种设计模式的更多相关文章

  1. js五种设计模式说明与示例

    第一种模式:js工厂模式    var lev=function(){        return "啊打";      };      function Parent(){    ...

  2. JavaScript中常见的十五种设计模式

    在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”. 在JavaScript中并没有类这种概念,JS中的函数属于一等对象,在JS中定义一个对象非常简单(var obj = {}), ...

  3. PHP中常见的五种设计模式

    设计模式只是为 Java架构师准备的 — 至少您可能一直这样认为.实际上,设计模式对于每个人都非常有用.如果这些工具不是 “架构太空人” 的专利,那么它们又是什么?为什么说它们在 PHP 应用程序中非 ...

  4. js 五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解

     壹 ❀ 引 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安排明明白白的人应该不在少数(我就是 ...

  5. JS五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解(转载)

    目录 壹 ❀ 引 贰 ❀ this默认绑定 叁 ❀ this隐式绑定 1.隐式绑定 2.隐式丢失 肆 ❀ this显式绑定 伍 ❀ new绑定 陆 ❀ this绑定优先级 柒 ❀ 箭头函数的this ...

  6. PHP常用的 五种设计模式及应用场景

    设计模式六大原则 开放封闭原则:一个软件实体如类.模块和函数应该对扩展开放,对修改关闭. 里氏替换原则:所有引用基类的地方必须能透明地使用其子类的对象. 依赖倒置原则:高层模块不应该依赖低层模块,二者 ...

  7. php常见五种设计模式

    php面向对象基础知识 请点击查看 一.常见的设计模式主要有23种,根据使用目标的不同可以分为以下三大类:创建设计模式.结构设计模式.行为模式创建设计模式: (5种)用于创建对象时的设计模式.初始化对 ...

  8. js五种基本数据类型:string, number, boolean, null, undefined

    /** * 五种基本数据类型:string, number, boolean, null, undefined */ // undefined // 声明变量foo,未声明变量bar var foo; ...

  9. 面试题:实现一个方法clone;可以对js五种数据类型进行值复制

    //先来方法的代码function clone(obj) { var copy; switch(typeof obj){ case 'number': case 'string': case 'boo ...

随机推荐

  1. jQuery源码学习(2):选择器初窥

    选择器初窥 代码架构: jQuery选择器可以依照传入数据的类型分为五大类: 传入字符串:$("div"), $("#id"), $(".div1&q ...

  2. python流程控制:for循环

    for循环: 先来看一个猜年龄的小程序: AGE = 23 count = 0 for i in range(10): if count == 3: u_count = input("y|n ...

  3. Ubuntu Linux下设置IP的配置命令

    Ubuntu Linux下设置IP的配置命令 今天装了Ubuntu,但是发现不能上网,开始排查问题: 1.首先确定网络连接是否正确,所用的网线是否可以正常工作 2.查看网卡是否能正常工作,检测的方法如 ...

  4. sqlite3API函数

    回顾: DDL 表的创建.修改.删除 create table 表名(字段名 字段类型 [约束],...); alter table 表名 {rename to 新名字 | add column 字段 ...

  5. android TextView实现滚动显示效果

    在android中,如果设置了TextView控件为单行显示,且显示的文本太长的话,默认情况下会造成显示不全的情况,这种情况下我们需要设置该控件属性如下: <TextView android:i ...

  6. PHP中PDO错误/异常(PDOException)处理

    PDO 提供了三种不同的错误处理模式,以满足不同风格的应用开发: PDO::ERRMODE_SILENT 此为默认模式. PDO 将只简单地设置错误码,可使用 PDO::errorCode() 和 P ...

  7. C# 安装包制作

    VS制作安装包的一般步骤. 一·新建项目 (1)新建 (2)界面跳转 二·添加引用 (1)添加卸载程序 1.在'C:WINDOWSsystem32'路径下,找到msiexec.exe . 2.将msi ...

  8. 验证浏览器是否安装已flash插件的js脚本

    function flashChecker() { var hasFlash = 0; //是否安装了flash var flashVersion = 0; //flash版本 if(document ...

  9. Session是否为新建情况的判断

    Session是否为新建情况的判断: Xml: <?xml version="1.0" encoding="UTF-8"?> <web-app ...

  10. Android开发系列之adb常用命令

    对于Android开发者来说,如果没有adb的帮助,那肯定就跟少了一只手那样别扭.其实笔者在刚刚学习Android开发的时候,也没有意识到adb的重要性.想想只要用IDE画出界面,然后实现后台的逻辑代 ...