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 ...
随机推荐
- [cocos2d-x] --- CCNode类详解
Email : awodefeng@163.com 1 CCNode是cocos2d-x中一个很重要的类,CCNode是场景.层.菜单.精灵等的父类.而我们在使用cocos2d-x时,接触最多的就是场 ...
- sqlserver merge into
create table #ttt(id int,name nvarchar(10));merge into #ttt t using (select 1 as id ,'eee' as name ) ...
- onethink的插件扩展
2014年7月25日 07:22:35 编写一个文章可以同步到微博的插件 思路:首先要进行微博的绑定,获得令牌.然后调用微博的api即可. 2014年7月25日 08:40:27 服务器与本地有区别. ...
- UVa 481 - What Goes Up
题目大意:给你一系列数,找出它的最长(严格)递增子序列. 由于数据量较大,使用O(n2)的LIS算法会超时,要使用O(nlogn)的LIS算法,这里有详细的介绍. #include <cstdi ...
- GB和GBDT 算法流程及分析
1.优化模型的两种策略: 1)基于残差的方法 残差其实就是真实值和预测值之间的差值,在学习的过程中,首先学习一颗回归树,然后将“真实值-预测值”得到残差,再把残差作为一个学习目标,学习下一棵回归树,依 ...
- oracle关键字(保留字)
其实这个东西可以在oracle 上输入一个sql语句就可以得到: select * from v$reserved_words order by keyword asc; //order 后边不是 ...
- Xcode 之 snippet 代码重用
1. 选中代码 2. 拖入xcode 右下侧的 snippet 区域 3. 修改名称 4. 修改快捷输入 (shortcut) 5. <#content#> ,可选修改项
- android模拟器网络设置(局域网)
Android模拟器如何设置DNS访问局域网内网站 我们需要用到android-sdk开发包中adb shell指令 见下图
- dev中TreeList的应用(转)
如果需要在单元格添加时则用TreeList如果只是单纯读取数据或检索数据时则用GridControl 1.如果点击添加 时则添加TreeList的节点: protected internal void ...
- iOS 之 内存检查instrument
经常听见iOS开发instrument是一个内存检查工具,但是,没想到,它是集成在xcode里面的,而且打开一看,感觉功能非常强大. 打开方式是 product -> profile 头一次运行 ...