通过说明与示例了解js五种设计模式


Posted in Javascript onJune 17, 2019

第一种模式: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 Parent();因为后者会可能出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象

3.在函数的最后返回该对象

4.不推荐使用这种方式创建对象,但应该了解

第二种模式:js构造函数模式

var lev=function(){ 
return "啊打"; 
}; 
function Parent(){ 
this.name="李小龙"; 
this.age="30"; 
this.lev=lev; 
}; 
var x =new Parent(); 
alert(x.name); 
alert(x.lev());

说明:

1.与工厂方式相比,使用构造函数方式创建对象,无需再函数内部重建创建对象,而使用this指代,并而函数无需明确return

2.同工厂模式一样,虽然属性的值可以为方法,扔建议将该方法定义在函数之外

3..同样的,不推荐使用这种方式创建对象,但仍需要了解

第三种模式:js原型模式

var lev=function(){ 
return "啊打"; 
}; 
function Parent(){ }; 
Parent.prototype.name="李小龙"; 
Parent.prototype.age="30"; 
Parent.prototype.lev=lev; 
var x =new Parent(); 
alert(x.name); 
alert(x.lev());

说明:

1.函数中不对属性进行定义

2.利用prototype属性对属性进行定义

3.同样的,不推荐使用这样方式创建对象

第四种模式:构造函数+原型的js混合的模式(推荐)

function Parent(){ 
this.name="李小龙"; 
this.age=32; 
};
Parent.prototype.lev=function(){ 
return this.name; 
};
var x =new Parent();
alert(x.lev());

说明:

1.该模式是指混合搭配使用构造函数方式和原型方式

2.将所有属性不是方法的属性定义在函数中(构造函数方式)
将所有属性值为方法的属性利用prototype在函数之外定义(原型方式)

3.推荐使用这样方式创建对象,这样做有好处和为什么不单独使用构造函数方式和原型方式,由于篇幅问题这里不予讨论

第五种模式:构造函数+原型的动态原型模式(推荐)

function Parent(){ 
this.name="李小龙"; 
this.age=32; 
if(typeof Parent._lev=="undefined"){ 
Parent.prototype.lev=function(){ 
return this.name; 
} 
Parent._lev=true; 
} 
}; 
var x =new Parent(); 
alert(x.lev());

说明:

1.动态原型方式可以理解为混合构造函数,原型方式的一个特例

2.该模式中,属性为方法的属性直接在函数中进行了定义,但是因为

if(typeof Parent._lev=="undefined"){
Parent._lev=true;
}

从而保证创建该对象的实例时,属性的方法不会被重复创建

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
简单了解vue.js数组的常用操作
Jun 17 #Javascript
送你43道JS面试题(收藏)
Jun 17 #Javascript
通过实例学习React中事件节流防抖
Jun 17 #Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 #Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 #Javascript
通过js给网页加上水印背景实例
Jun 17 #Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 #Javascript
You might like
PHP使用JSON和将json还原成数组
2015/02/12 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
用js怎么把&字符换成"&amp:"
2006/10/19 Javascript
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
python 连续不等式语法糖实例
2020/04/15 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
异常和异常类的概念
2014/09/12 面试题
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
自动化系在校本科生求职信
2013/10/23 职场文书
数学教学随笔感言
2014/02/17 职场文书
分家协议书
2014/04/21 职场文书
工作收入证明模板
2014/10/10 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
委托书格式要求
2015/01/28 职场文书
python 中的jieba分词库
2021/11/23 Python
Go gorilla/sessions库安装使用
2022/08/14 Golang