通过说明与示例了解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 相关文章推荐
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
Vue实现圆环进度条的示例
Feb 06 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
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
初探jquery——表单应用范例
2007/02/20 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python smallseg分词用法实例分析
2015/05/28 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
windows下python和pip安装教程
2018/05/25 Python
django富文本编辑器的实现示例
2019/04/10 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Django 限制访问频率的思路详解
2019/12/24 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
小学生考试获奖感言
2014/01/30 职场文书
青春奉献演讲稿
2014/05/08 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python