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. Runtime —— 从应用场景说起

    根据平时遇到的情况,通过查资料和自己的理解,对Runtime黑科技进行一次个人的学习总结

  2. 【转】15款Java程序员必备的开发工具

    如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它. 对于Java,有两种截然不同的观点:一种认为Java是最简单功能 ...

  3. Memcached源码分析之assoc.c

    #include "memcached.h" #include <sys/stat.h> #include <sys/socket.h> #include ...

  4. C++类的存储(部分可用与c的结构体)

    c++中最重要的就是类,那么给你一个类的对象,你知道它在内存中如何存储的吗?它占内存中多少个字节? 首先确定类的构成: 1,数据成员:可以是内置类型,类类型. 2,函数成员:虚函数,非虚函数 1)数据 ...

  5. [repost]Xcode因为证书问题经常报的那些错

    [reference]http://www.jianshu.com/p/b10680a32d3 1.   确认下证书是不是开发证书,如果是发布证书就会出现这样的提示. 2.   证书失效了,去开发者中 ...

  6. iOS真机调试配置

    啊!生活不易啊~~~~据说这个过程都可以当做简历技能了... 准备:已经具备了企业开发者账号,和相关证书 目标:让爪机可以真机调试 过程:1.登录官方开发网站 https://developer.ap ...

  7. Java虚拟机——进度1

    Java 虚拟机       一.Java虚拟机的基本结构 ①类加载子系统:从文件系统或者网络中加载Class信息,存放在方法区中. ②方法区中存放放进来的Class信息,也包括一些运行时常量池信息包 ...

  8. 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题

    一.基本原理 select控件在浏览器中是个永远的痛,不同的版本解析出来的可谓五花八门.主要有以下问题: 1,IE6中无法设置高度,Z INDEX永远在最上,无法被其它层遮挡 2,IE7中可以设置高度 ...

  9. php刷新当前页面

    echo "<script language=JavaScript> location.replace(location.href);</script>"; ...

  10. js原生继承之——构造函数式继承实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...