通过说明与示例了解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 相关文章推荐
jquery+php实现搜索框自动提示
Nov 28 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
微信小程序组件传值图示过程详解
Jul 31 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手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
浅谈JS运算符&&和|| 及其优先级
2016/08/10 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
JS数组的常用10种方法详解
2020/05/08 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
js实现简单的倒计时
2021/01/28 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
Python基于WordCloud制作词云图
2019/11/29 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
幼儿园工作总结2015
2015/04/01 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android