js五种设计模式
2024-10-15 07:30:49
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;
} 从而保证创建该对象的实例时,属性的方法不会被重复的创建。
最新文章
- Direct3D 10学习笔记(二)——计时器
- SVM
- js 添加事件 attachEvent 和 addEventListener 的用法
- BZOJ3159: 决战
- 微信分组群发45028,微信分组群发has no masssend quota hint
- codeforces 607B. Zuma 区间dp
- virtio 简介
- Eclipse编写ExtJS卡死问题 eclise js验证取消
- capwap学习笔记——初识capwap(五)(转)
- .NET Core微服务之服务间的调用方式(REST and RPC)
- IOU和非极大值抑制
- linux内核剖析(六)Linux系统调用详解(实现机制分析)
- 洛谷P4092 [HEOI2016/TJOI2016]树 并查集/树链剖分+线段树
- [Go back to REDIS]
- BZOJ4034[HAOI2015]树上操作——树链剖分+线段树
- PowerDesigner执行脚本 name/comment/stereotype互转
- 架构-虚拟路由器冗余协议【原理篇】VRRP详解
- Struts2使用OGNL遍历各种map总结
- 初识unitest框架
- Javaweb之EL表达式
热门文章
- java 测试IP
- C语言-基础
- Android与JNI(一) ---- Java调用C 静态调用
- C语言-知识点及学习路线
- 文件查找和比较命令 来自: http://man.linuxde.net/find
- bzoj2120: 数颜色 &;&;bzoj2453: 维护队列
- PHP检测获取内存信息
- mybatis 参数为list时,校验list是否为空, mybatis ${}与#{}的区别,Mybatis sql in
- Samba匿名用戶仅仅唯读访问
- js 如何判断鼠标点击事件还是js代码调用