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设计模式小结的更多相关文章

  1. [js]js设计模式小结

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  2. [js]设计模式小结&对原型的修改

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  3. JS设计模式(一)

    刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...

  4. js设计模式(12)---职责链模式

    0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...

  5. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

  6. js isArray小结

    原文:[转载]js isArray小结 在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js中检测对象类型的常见的方法有几种: 1.typeof操作符.对于Function.String.N ...

  7. Js继承小结

    Js继承小结 一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.n ...

  8. js 设计模式-接口

    js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > <%-- ...

  9. 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

随机推荐

  1. VueJs相关命令

    参考: https://www.jianshu.com/p/1626b8643676   安装axios $ npm install axios   如何打包 基于Vue-Cli,通过npm run ...

  2. 关于C语言头文件写法的探讨

    我不是软件工程出身,对于这方面一直处于探索阶段. 目前按照这样的习惯吧. 除主函数所在的文件以外,为每一个源文件配置一个头文件. 头文件里面不能写变量的申明和定义.头文件里面只写 #define,st ...

  3. python 路径处理

    1.分解路径名 比如要把xxx/yyy/zzz.py 分解成文件名和目录 两种方法: 一.os.path.split(file) 二.os.path.basename()  ;   os.path.d ...

  4. fabric 持久化

    每个容器都有目录需要映射出来.在volume中添加如下映射即可: peer是: /var/hyperledger/peer{number}/org{number}:/var/hyperledger/p ...

  5. python—切片

    切片就是list取值的一种方式 l = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] print(l[1:5]) #取值方式顾头不顾尾 print(l[:5]) #冒号 前面 没写代 ...

  6. 二、putty的下载安装和基本使用方法教程

    转载自:https://baijiahao.baidu.com/s?id=1597811787635071952&wfr=spider&for=pc PuTTY是一款开源(Open S ...

  7. Luogu3587[POI2015]POD - hash + 单调队列

    Solution 还是去看了题解. 感谢大佬的博客→  题解传送门 是一道思路比较新的题. 搞一个前缀和, 记录前 $i$ 个位置每种颜色的出现次数, 如果位置 $i$ 是 颜色 $a[i]$ 的最后 ...

  8. maven pom.xml文件 仓库搜索服务

    POM(Project Object Model),即项目对象模型,是 Maven 工程的基本工作单元,是一个 XML 文件,包含了项目的基本信息,用于描述项目如何构建.声明项目依赖 等等 Maven ...

  9. java多线程系列16 线程池

    当系统系统规模较小,我们可以不使用线程池.但是当系统到达一定规模,频繁的创建和销毁线程池会消耗很多资源. 合理利用线程池能够带来三个好处. 1降低资源消耗.通过重复利用已创建的线程降低线程创建和销毁造 ...

  10. debug,菜鸟必备的求生技能

    突然想写个关于 debug 的文章,来纪念我2天前被自己坑的蠢事…… 前两天,项目的四期送去电科院审查了.因为一些不可描述的原因,我很不喜欢四期.做起来就很烦~临近验收,发现了个比较严重的bug,记录 ...