通过说明与示例了解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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
Javascript变量函数浅析
Sep 02 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
详解JavaScript函数对象
Nov 15 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
简单了解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
mysql 搜索之简单应用
2007/04/27 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
js实现日历与定时器
2017/02/22 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python logging设置level失败的解决方法
2020/02/19 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
英语系本科生求职信范文
2013/12/18 职场文书
五一口号
2014/06/19 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
房屋所有权证明
2015/06/19 职场文书
医院病假条范文
2015/08/17 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python