js设计模式理解干货
- 构造函数本身就是一个函数,只不过该函数是出于创建对象的目的而定义的。
创建Object实例的两种方式:
new 操作符
var person = new Object();
person.name = "yehui";
person.age = 20;
对象字面量
var person ={
name : 'yehui',
age : 20
}
创建对象
虽然用Object构造函数或对象字面量都可以创建对象,但是有很大的缺点,就是我们在使用同一个接口创建很多对象的时候,会产生大量的重复代码。
工厂模式
是软件工程一种广为人知的设计模式,这种模式抽象了创建具体对象的过程。考虑到ES5中没有类,开发人员发明了一种函数,这种函数用来封装特定的接口创建对象的细节。工厂模式解决了创建多个相似对象的问题,但是没有解决对象识别的问题(即怎么知道一个对象的类型)。
于是我们有了构造函数模式构造函数模式
使用构造函数模式解决了对象识别的问题,也于是我们这个解决了多个函数同做一件事的问题。但是我们通过构造函数模式创建对象时,在全局作用域中定义的函数实际上只能被某个对象调用,这让全局对象作用域有点名副其实。还有就是如果对象需要定义很多方法,那末就要定义很多个全局函数,那么我们这个自定义的引用类型就没有封装性可言。所以我们有了原型模式。原型模式
利用这种模式我们可以让所有对象的实例共享同一个资源,就是说我们不必再构造函数中定义对象实例的信息,而是将这些信息直接添加到源性对象中去。虽然我们的原型模式解决了对象实例共用一个属性或方法的问题,我们也可以给实例自定义属性,因为其可以屏蔽原型中的相同名字的属性,但是当我们有了两个对象的实例相等时,当我们改变一个和源性对象有相同名字的属性的时候,那么两个对象实例的该属性都会受到影响,因为他们指向同一个源性对象。组合使用构造函数模式和原型模式
构造函数模式用来定义实例属性,原型模式用于定义方法和共享的属性。结果,每一个实例都会有自己的一份实例属性的副本,但是同时哟共享着对方的引用,最大限度的节省了内存。function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["yehuii", "bob"];
} Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name)
}
} var person111 = new Person("tom", 22, "gmigjgrf");
var person222 = new Person("tim", 55, "doctor"); person111.friends.push("van");
console.log(person111.friends);
console.log(person222.friends);
console.log(person111.friends === person222.friends);
console.log(person111.sayName === person222.sayName);
组合式的模式就解决了,两个对象之间的相互影响。这种对象的创建模式是当前最受欢迎的一种,也是认同度最好的一种。
动态原型模式
有经验的开发人员看到独立的构造函数和原型时,很可能会感到困惑,动态原型模式就是致力于解决这类的问题,他把所有的信息都封装在一个构造函数中,而通过在构造函数中初始化原型,而保持了同时使用构造函数和原型的优点。简单的说,就是通过检查某个应该存在的方法是否有效来决定是否需要初始化原型。function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
//这个是方法,他只会在sayName不存在的时候才添加到原型中去,这段代码只会在初次调用时才会执行
if(typeof this.sayName != "function"){
Person.prototype.sayName = function(){
alert(this.name);
}
}
} var friend = new Person('yemengmeng', 15, 'meinv');
friend.sayName();
待续
js设计模式理解干货的更多相关文章
- JS设计模式(一)
刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...
- js设计模式(12)---职责链模式
0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...
- js设计模式总结1
js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...
- JS设计模式——5.单体模式
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html 单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
- 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() ...
- [js]js设计模式小结
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- [js]设计模式小结&对原型的修改
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
随机推荐
- 为什么一定要调用 setlocale 呢? 因为在 C/C++ 语言标准中定义了其运行时的字符集环境为 "C" ,也就是 ASCII 字符集的一个子集。使用setlocal改变整个应用程序的字符集编码方式(wcstombs使用前要设置 setlocale (LC_ALL, "chs"); )
setlocale 配置地域化信息. 语法: string setlocale(string category, string locale); 返回值: 字符串 函数种类: 操作系统与环境 内容 ...
- QCache 缓存(模板类,类似于map,逻辑意义上的缓存,方便管理,和CPU缓存无关。自动获得被插入对象的所有权,超过一定数量就会抛弃某些值)
在软件开发中,我们经常需要在内存中存储一些临时数据用于后续相关计算.我们一般把这些数据存储到某个数组里,或者STL中的某个合适的容器中.其实,在Qt中直接为我们提供了一个QCache类专用于这种需求. ...
- 纯手写wcf代码,wcf入门,wcf基础教程
1.定义服务协定 =>定义接口 using System.ServiceModel; namespace WcfConsole { /// <summary> /// 定义服 ...
- 《Python数据分析》笔记1 ——Numpy
Numpy数组 1.Numpy数组对象 Numpy中的多维数组称为ndarray,他有两个组成部分. 1.数据本身 2.描述数据的元数据 2.Numpy的数值类型 bool: 布尔型 inti:其长度 ...
- (转)使用ServiceStack构建Web服务
提到构建WebService服务,大家肯定第一个想到的是使用WCF,因为简单快捷嘛.首先要说明的是,本人对WCF不太了解,但是想快速建立一个WebService,于是看到了MSDN上的这一篇文章 Bu ...
- django内容总结
一.django请求的生命周期 1.django请求生命周期如图所示 2.django本身没有socket,客户端请求先到达wsgi然后再提交给django,而wsgi的本质就是个socket程序 注 ...
- 电信、网通、联通等恶意DNS劫持跳广告页面的解决方法
中国电信.网通.联通ADSL用户必读:中国电信.网通.联通劫持dns(中国电信.网通.联通劫持ie浏览器)解决方案D... 宽带连接有 也能上网但是本地连接一直显示为受限制的解决方法 我的电脑一直显示 ...
- jelly
http://pwnny.cn/original/2016/06/26/MakeBlog.html#NativeBuild01 Jekyll和Github搭建个人静态博客
- api响应类
接口开发响应类封装 class response{ /* * 封通信接口数据 * @param integer $code 状态码 * @param string $message 状态信息 * @p ...
- event driven model
http://www.jdon.com/eda.html http://blog.csdn.net/gykimo/article/details/9182287 事件代表过去发生的事件,事件既是技术架 ...