js设计模式小结
1 构造函数模式
var Person = function(name){
this.name = name;
this.getName = function(){
console.log(this.name);
}
};
var Person1= new Person('xiaoming');
Person1.getName();
var Person2 = new Person('xiaohua');
Person2.getName();
使用构造函数模式可以实现重复创建多个相似对象,且可以实现自定义传参,但缺点是每次实例化一个对象时就相当于将该对象方法重新创建了一遍。
2 原型模式
var Person = function(){
};
Person.prototype.name = 'xiaoming';
Person.prototype.getName = function() {
console.log(this.name);
};
var Person1 = new Person();
Person1.getName();
var Person2 = new Person();
Person2.getName();
原型模式的优点在于,每次实例化一个对象时,不需要重新创建该对象方法,而是通过指针引用原型链的方法,缺点是不能自定义传参,所以就有了下面的构造函数和原型组合使用的模式
3 构造函数+原型模式
var Person = function(name){
this.name = name;
};
Person.prototype.getName = function() {
console.log(this.name);
};
var Person1 = new Person('xiaoming');
Person1.getName();
var Person2 = new Person('xiaohua');
Person2.getName();
综合了构造函数和原型模式的双方优点
4 工厂模式
function createPerson(name){
var Person = new Object();
Person.name = name;
Person.getName = function(){
console.log(this.name);
}
return Person;
}
var Person1= createPerson('xiaoming');
Person1.getName();
var Person2= createPerson('xiaohua');
Person2.getName();
工厂模式也可以用于创建多个相似对象,与构造函数函数模式相似,主要区别是在内部通过new Object()创建对象最后return 出来,但是存在无法判断对象类型的问题
5 模块模式
var person = function(name){
function getName(name){
console.log(name);
}
return {
getName: getName
}
}();
person.getName('xiaoming');
特别是在单页应用中常用的模式,可以理解为引入了私有变量特权方法的单例。
js设计模式小结的更多相关文章
- [js]js设计模式小结
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- [js]设计模式小结&对原型的修改
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- JS设计模式(一)
刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...
- js设计模式(12)---职责链模式
0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...
- JS设计模式——5.单体模式
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html 单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
- js isArray小结
原文:[转载]js isArray小结 在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js中检测对象类型的常见的方法有几种: 1.typeof操作符.对于Function.String.N ...
- Js继承小结
Js继承小结 一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.n ...
- js 设计模式-接口
js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > <%-- ...
- 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
随机推荐
- AltiumDesigner 查找相似对象
同类器件的集体选中.集体选中的方法是:先选中一个标识符,右击在选项表中选择Find Similar Objects,然后就会出现一个对话框,在这个对话框中,有一些any项,根据自己的需要把一些any改 ...
- easyui combobox下拉框文字超出宽度有横向滚轮
//下拉框显示横向滚轮 $(".combo").mouseenter(function(){ $(this).prev().combobox("showPanel&quo ...
- [leetcode]17. Letter Combinations of a Phone Number手机键盘的字母组合
Given a string containing digits from 2-9 inclusive, return all possible letter combinations that th ...
- 6C - 开门人和关门人
每天第一个到机房的人要把门打开,最后一个离开的人要把门关好.现有一堆杂乱的机房签 到.签离记录,请根据记录找出当天开门和关门的人. Input 测试输入的第一行给出记录的总天数N ( > 0 ...
- [Selenium] 在Chrome的开发者工具中验证检查XPath/CSS selectors
Evaluate and validate XPath/CSS selectors in Chrome Developer Tools Method 1 : From Elements panel U ...
- my simplest kv db
最简单的kv db 最基本的网络连接 使用STL map存储key value 作为多线程互斥的简单例子. 以后有机会逐步优化添加功能 1增加ASIO 异步通讯 2优化存储空间 传递指针 避免过多的拷 ...
- IOS内存管理详解
一. 基本原理 1. 什么是内存管理 移动设备的内存极其有限,每个app所能占用的内存是有限制的 当app所占用的内存较多时,系统会发出内存警告,这时得回收一些不需要再使用的内存空 ...
- Unable to instantiate Action, xxxAction, defined for 'xxxAction' in namespace '/'xxx
最近写SSH2的项目时,遇到一些小问题,action得不到service实例,遂将struct2委托给spring进行管理,然后修改了bean的id和action的class,但是运行后发现找不到ac ...
- 基于UML的文献管理系统建模研究
一.基本信息 标题:基于UML的文献管理系统建模研究 时间:2016 出版源:信息与电脑(理论版) 领域分类:UML:文献管理系统:系统建模: 二.研究背景 问题定义:图书的管理与规划 难点:系统和管 ...
- Eclipse进行远程调试(Tomcat远程调试)
1.配置tomcat Linxu系统: tomcat/bin/catalina.sh或者startup.sh开始处中增加如下内容: declare -x CATALINA_OPTS="-Xd ...