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 操 ...
随机推荐
- 浅析 Pycharm 内存、cpu 占用率
浅析 Pycharm 内存.cpu 占用率 本机配置参数: ------------------------------------------ Windows 10 专业版 X64 ----- ...
- ApexSQL Log 从意外UPDATE和DELETE操作中恢复SQL Server数据
下载地址:https://www.apexsql.com/download.aspx 如何从意外UPDATE和DELETE操作中恢复SQL Server数据 ApexSQL Log 从意外UPDATE ...
- Spring Cloud架构
Spring Cloud主要的组件,以及它的访间流程 1.外部或者内部的非 Spring Cloud目都统一通过API网关(Zuul)来访可内部服务. 2.网关接收到请求后,从注册中心( Eure ...
- 20170411 F110初始界面-建议清单
功能块代码 F110 开发类 FIBP 事务说明 自动付款参数 程序 SAPF ...
- HAProxy配置参数说明
一.全局配置"global"配置中的参数为进程级别的参数,且通常与其运行的OS相关.1.进程管理及安全相关的参数chroot <jail dir>修改haproxy的工 ...
- 使用Compute Engine工具连接Linux VM
Links: Connecting to Linux Instances 内容: 要连接Linux VM实例,必须要有一个SSH(Secure Shell)秘钥.无论何时连接一个LinuxVM实例(通 ...
- iOS视图生命周期
视图是应用的一个重要组成部分,功能的实现与其息息相关,而视图控制器控制着视图,其重要性在整个应用中不言而喻. 1.视图生命周期与视图控制器关系 以视图的4 种状态为基础,我们来系统了解一下视图控制器的 ...
- jQuery:自学笔记(3)——操作DOM
jQuery:自学笔记(3)——操作DOM 修改元素的属性 获取元素属性 设置元素属性 修改元素的内容 说明 有三种方式可以获取HTML元素的内容,分别是 ☐ text():设置或返回所选元素的文本内 ...
- bootstrap插件实用方法
完全通过js來配置 <p><a id="YOUR_BUTTON_FOR_POPOVER" class="btn btn-primary" ro ...
- OC自动释放池autoreleasepool介绍
自动释放池的机制是:它使得应用在创建新对象时,系统能够有效地管理应用所使用的内存. @autoreleasepool { statements } 在创建新对象时,并且系统未启动ARC特性,那么在使用 ...