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 ...
随机推荐
- 写一个程序,统计自己C语言共写了多少行代码。ver2.00
概要 完成一个程序,作用是统计一个文件夹下面所有文件的代码行数.输入是一个文件夹的绝对路径,输出是代码行数.所以此程序的新特点有两个: 统计某一文件夹下的所有文件: 可以任意指定本机硬盘上任何位置的某 ...
- IOS开发-UI学习-UINavigationController(导航控制器)的使用
UINavigationController是IOS 中常用的功能,基本用法如下: 1.在AppDelegate.m中添加如下代码: #import "AppDelegate.h" ...
- 升级PHP版本
2014-07-08 今天升级了PHP版本,出现一些错误,解决了. 主要是phpadmin的错误. 升级的目的是为了学习thinkphp.它要求最低5.3版本
- sql2005数据库置疑修复断电崩溃索引损坏 数据库索引错误修复/数据库表损坏/索引损坏/系统表混乱等问题修复
sql2005数据库置疑修复断电崩溃索引损坏 数据库索引错误修复/数据库表损坏/索引损坏/系统表混乱等问题修复 客 户 名 称 济南某电子商务公司 数 据 类 型 SQL2005数据库 故 障 检 测 ...
- C# TPL学习
程序Ⅰ:通过Task类创建新线程 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 ...
- Android控件上添加图片
项目中有一个点赞功能,点赞的小图标添加在点赞列表旁边,在xml里可以进行设置,也可以在代码中进行绘图. 下面是两种方法的设置: 1.xml里:一些控件:button.textView等等里面有个属性是 ...
- java 环境变量 windows(Java之负基础实战)
1.已经安装了JDK 添加系统变量 1.1.添加JAVA_HOME jdk路径,例如:C:\Program Files\Java\jdk1.8.0_65 1.2. PATH 添加内容 %JAVA_HO ...
- Delphi在Vasta/win 7下通过UAC控制
在Windows编程时,为了兼容Win7与XP,许多需要底层权限的程序需要通过UAC验证,这是微软出的一个很恶心的东西……还不如Ubuntu那种Root机制呢……但是有困难我们就要克服-现在有一种方式 ...
- Mysql中常见索引操作
- javascript window.confirm确认 取消对话框实现代码小结
本文章讲述的三种都是基于了javascript confirm提示确认框的做法了,只是在不同的地方写哦,有需要的同学可参考一下 confirm() 方法 confirm() 方法用于显示一个带有指 ...