js五种设计模式
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());
说明:
- 在函数中定义对象,并定义对象的各种属性,虽然属性可以为方法,但是建议将属性为方法的属性定义到函数之外,这样可以避免重复创建该方法。
 - 引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new object(); 因为后者可能会出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象。
 - 在函数的最后返回该对象。
 - 不推荐使用这种方式创建对象,但应该了解。
 
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());
说明:
- 与工厂方式相比,使用构造函数方式创建对象无需在函数内部创建对象,而使用this指代,并而函数无需明确return。
 - 同工厂模式一样,虽然属性的值可以为方法,仍建议将该方法定义在函数之外。
 - 同样的,不推荐使用这种方式创建对象,但仍需了解。
 
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());
说明:
- 函数中不对属性进行定义。
 - 利用prototype属性对属性进行定义。
 - 同样的额,不推荐使用这样的方式创建对象。
 
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());
说明:
- 该模式是指混合搭配使用构造函数和原型方式。
 - 将所有的属性,不是方法的定义在函数中(构造函数的方式),将所有属性值为方法的利用prototype在函数之外定义(原型方式)。
 - 推荐使用这样的方式创建对象,这样有好处。
 
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());
说明:
- 动态原型方式可以理解为混合构造函数,原型方式的一个特例。
 - 该模式中,属性为方法的属性直接在函数中进行了定义,但是因为
if(typeof Parent.lev == "undefined"){
Parent.prototype.lev = function(){
return this.name;
}
Parent.lev = true;
} 从而保证创建该对象的实例时,属性的方法不会被重复的创建。 
js五种设计模式的更多相关文章
- js五种设计模式说明与示例
		
第一种模式:js工厂模式 var lev=function(){ return "啊打"; }; function Parent(){ ...
 - JavaScript中常见的十五种设计模式
		
在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”. 在JavaScript中并没有类这种概念,JS中的函数属于一等对象,在JS中定义一个对象非常简单(var obj = {}), ...
 - PHP中常见的五种设计模式
		
设计模式只是为 Java架构师准备的 — 至少您可能一直这样认为.实际上,设计模式对于每个人都非常有用.如果这些工具不是 “架构太空人” 的专利,那么它们又是什么?为什么说它们在 PHP 应用程序中非 ...
 - js 五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解
		
壹 ❀ 引 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安排明明白白的人应该不在少数(我就是 ...
 - JS五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解(转载)
		
目录 壹 ❀ 引 贰 ❀ this默认绑定 叁 ❀ this隐式绑定 1.隐式绑定 2.隐式丢失 肆 ❀ this显式绑定 伍 ❀ new绑定 陆 ❀ this绑定优先级 柒 ❀ 箭头函数的this ...
 - PHP常用的 五种设计模式及应用场景
		
设计模式六大原则 开放封闭原则:一个软件实体如类.模块和函数应该对扩展开放,对修改关闭. 里氏替换原则:所有引用基类的地方必须能透明地使用其子类的对象. 依赖倒置原则:高层模块不应该依赖低层模块,二者 ...
 - php常见五种设计模式
		
php面向对象基础知识 请点击查看 一.常见的设计模式主要有23种,根据使用目标的不同可以分为以下三大类:创建设计模式.结构设计模式.行为模式创建设计模式: (5种)用于创建对象时的设计模式.初始化对 ...
 - js五种基本数据类型:string, number, boolean, null, undefined
		
/** * 五种基本数据类型:string, number, boolean, null, undefined */ // undefined // 声明变量foo,未声明变量bar var foo; ...
 - 面试题:实现一个方法clone;可以对js五种数据类型进行值复制
		
//先来方法的代码function clone(obj) { var copy; switch(typeof obj){ case 'number': case 'string': case 'boo ...
 
随机推荐
- 谈谈jconsole和jvisualvm
			
环境Eclipse-Mars ,JDK1.7 JConsole 一.首先需要配置参数 参数有两种配置连接方式:(原理我还不太懂) 1.在eclipse中添加 项目右键-->>Debug a ...
 - ML_note1
			
Supervised Learning In supervised learning, we are given a data set and already know what our correc ...
 - JS拖动技术--- 关于setCapture
			
<script type="text/javascript"> <!-- window.onload=function(){ objDiv = documen ...
 - Unity UGUI —— 无限循环List
			
还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是 ...
 - iPhone 屏幕分辨率
			
5S 640 x 1136 5 640 x 1136 4s 640 x 960 4 640 x 960 3gs 320 x 480
 - PHP的一些 有用但不常用的函数记录
			
1. microtime() 当前 Unix 时间戳以及微秒数. <?php $mem = new Memcache; $mem->connect("127.0.0.1" ...
 - CSS BUG 总结
			
1.IE7 容器使用了滚动条 其子元素中使用 position:relative ,position变成了fixed,从而不随容器的滚动条滚动; 解决: 在其容器元素的属性中也加入 position ...
 - Spring context:component-scan代替context:annotation-config
			
Spring context:component-scan代替context:annotation-config XML: <?xml version="1.0" encod ...
 - xmlns:xsi ——是指xml文件遵守xml规范,xsi全名:xml schema instance
			
http://blog.sina.com.cn/s/blog_4b6f8d150100nx3e.html http://blog.csdn.net/iaiti/article/details/4226 ...
 - vue.js中ajax请求
			
<div id="app"> <table style="border-collapse: collapse"> <thead&g ...