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 操 ...
随机推荐
- 【转】 HMC与VIOS对新LPAR提供存储与网络虚拟化的支持
前面的几篇博文的操作环境都是在IVM下,IVM可以看作是VIOS的一部分,或者是对VIOS功能的一个扩展,一个IVM只能管理1台物理服务器,而HMC则是一对多.在有HMC来管理物理服务器的情形下,VI ...
- 如何生成动态库 .dll 的符号 .lib 文件?
在知道拥有动态库和头文件的情况下,但没有动态库符号文件的情况下,如何静态链接动态库? 1.使用 Microsoft Visual Studio Tools 命令行命令生成 xxx.def 文件,进而使 ...
- Delphi重定义的消息结构
// 除去DDE和MDI消息,一共159个消息,其中部分消息仅仅的转定义 // 普通消息,有两个参数和结果 PMessage = ^TMessage; TMessage = packed record ...
- Asp.Net MVC anti-forgery token的问题:nameidentifier or identityprovider not present
当使用ClaimsIdentity的时候,Asp.Net MVC在生成AntiForgeryToken的时候会默认使用User.Identity中两种ClaimsType的值:NameIdentifi ...
- 方阵行列式并行化计算(OpenMP,MPI),并计算加速比
00][100].在创建方阵时,方阵的阶数N(N<100)由外部输入.然后用两层"for循环"来给方阵 p左上角 N×N个位置赋值.具体实现如下: /* * 定义矩阵阶数N ...
- python常用模块——os模块
python编程时,经常和文件.目录打交道,这就离不开os模块,os模块包含普遍的操作系统功能,与具体的平台无关,列举一些常用的命令. 1.os.name:字符串指示你正在使用的平台.windows是 ...
- Android:日常学习笔记(9)———探究广播机制
Android:日常学习笔记(9)———探究广播机制 引入广播机制 Andorid广播机制 广播是任何应用均可接收的消息.系统将针对系统事件(例如:系统启动或设备开始充电时)传递各种广播.通过将 In ...
- window + document + height
jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变 ...
- 深入浅出Node.js(下)
(五):Node.js的异步实现 专栏的第五篇文章<Node.js的异步实现>.之前介绍了Node.js的事件机制,也许读者对此尚会觉得意犹未尽,因为仅仅只是简单的事件机制,并不能道尽No ...
- jquery的autocomplete在firefox下不支持中文输入法的bug
Query.Autocomplete 是jquery的流行插件,能够很好的实现输入框的自动完成(autocomplete).建议提示(input suggest)功能,支持ajax数据加载. 但唯一遗 ...