JavaScript创建对象时常用的设计模式
转自:http://www.cnblogs.com/shouce/p/5488101.html
一、工厂模式
function person (name,age) {
var p=new Object();
p.name=name;
p.age=age;
p.showMessage=function(){
console.log("name:"+this.name+" age:"+this.age);
}
return p;
}
var p1=person("k1",28);
var p2=person("k2",29);
console.log(p1.showMessage==p2.showMessage);//false 不是同一个showMessage方法
console.log(p1.constructor);//[object] 都是object
工厂模式的缺陷是:没解决对象识别的问题,而且每个对象的showMessage方法都不是同一个方法(每个方法在每个对象实例上都重新创建了一遍),增加了性能开销。
二、构造函数模式
function Person (name,age) {
this.name=name;
this.age=age;
this.showMessage=function(){
console.log("name:"+this.name+" age:"+this.age);
}
}
var p1=new Person("k1",28);
var p2=new Person("k2",29);
console.log(p1.showMessage==p2.showMessage);//false 不是同一个showMessage方法
console.log(p1.constructor);//[Person]
console.log(p1 instanceof Person);// true
构造函数模式解决了对象识别的问题,但是每个对象的showMessage方法不是同一个方法(每个方法在每个对象实例上都重新创建了一遍),增加了性能开销。
三、原型模式
function Person () { }
Person.prototype.name ="k";
Person.prototype.age =29;
Person.prototype.showMessage=function () {
console.log("name:"+this.name+" age:"+this.age);
}; var p1=new Person();
p1.showMessage();//name:k age:29 var p2=new Person();
p2.showMessage();//name:k age:29 console.log(p1.showMessage==p2.showMessage);// true --引用的是同一函数
console.log(p1.constructor)//[Person] --对象识别
console.log(p1 instanceof Person)//true --对象识别
console.log(Person.prototype.isPrototypeOf(p1));// true
console.log(Object.getPrototypeOf(p1)==Person.prototype);// true
原型模式解决了“每个方法在每个对象实例上都重新创建了一遍”的问题,也解决了对象识别的问题
原型模式有个很大的问题是,因为挂载在函数prototype下面的所有对象、变量、函数都是被该函数的所有实例共享的,虽然通过实例p1、p2可 以访问到prototype的属性,但是却不能修改属性值,例如p1.name="k1",只是在p1实例上添加了一个name="k1"的属性,并没改 到prototype.name。
如果是值类型还好,如果是引用类型的话,就会有问题了,看如下的例子:
function Person () {
};
Person.prototype.age =10;
Person.prototype.array=[1,2,3]; var p1=new Person();
var p2=new Person();
console.log(p1.array);// [1,2,3]
console.log(p2.array); //[1,2,3]
p1.array.push(4);
console.log(p1.array);//[1,2,3,4]
console.log(p2.array);//[1,2,3,4]
p1往array里面添加了值,在p2也反映出来了,因为他们都是指向同一个array。
四、组合使用构造函数模式和原型模式(推荐)
这是最常见的创建对象的方式,结合了构造函数和原型模式的优点
function Person (name,age) {
this.name=name;
this.age=age;
} Person.prototype.showMessage = function() {
console.log("name:"+this.name+" age:"+this.age);
}; var p1=new Person("k",30);
p1.showMessage();
五、动态原型模式
主要是解决:把所有的信息都封装在构造函数中,更符合oo的思想
function Person (name,age) {
this.name=name;
this.age=age;
if(typeof this.showMessage!="function"){
Person.prototype.showMessage=function(){
console.log("name:"+this.name+" age:"+this.age);
}
}
} var p1=new Person("k",30);
p1.showMessage();
六、寄生构造函数模式
function Person (name,age) {
var o=new Object();
o.name=name;
o.age=age;
o.sayName=function(){
console.log(this.name);
};
return o;
}
var p1=new Person("k",28);
p1.sayName();
寄生构造函数模式和工厂模式是一模一样的,只不过创建对象的时候使用了new 关键字,上例:var p1=new Person("k",28)。
它的主要作用是:在这个构造函数里面进行功能的扩展,例如,我想定义一个数组类型MyArray,它是以Array数组为基础的,有一个自己的方法,如下
function MyArray(){
var values=new Array();
values.push.apply(values,arguments);
//自己定义的方法
values.toPipedString=function(){
return this.join('|');
};
return values;
}
var colors=new MyArray("red","blue","green");
console.log(colors.toPipedString());
console.log(colors instanceof Array);
七、稳妥构造函数模式
稳妥构造函数遵循与寄生构造函数类型的模式,但有两点不同:一是不使用this,二是不使用new 调用构造函数
function Person (name,age) {
var o=new Object();
var tempAge=age; o.name=name;
o.age=age; o.sayName=function(){
console.log(name);
}
o.sayAge=function(){
console.log(tempAge);
}
return o;
} var p1=Person("k1",28);
p1.sayName(); // k1
p1.sayAge(); // p1.name="k2";
p1.age=30;
p1.sayName(); // k1
p1.sayAge(); //
看到如上的输出就很好理解什么叫稳妥对象模式了,就是用这种模式创建的对象,没有其他办法能够改变初始化时候传入的值,这里是Person("k1",28),这样的对象就是稳妥对象,实际上这里使用到就是javascript的闭包了。
JavaScript创建对象时常用的设计模式的更多相关文章
- Javascript常用的设计模式详解
Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...
- 牛客网Java刷题知识点之什么是单例模式?解决了什么问题?饿汉式单例(开发时常用)、懒汉式单例(面试时常用)、单例设计模式的内存图解
不多说,直接上干货! 什么是单例设计模式? 解决的问题:可以保证一个类在内存中的对象唯一性,必须对于多个程序使用同一个配置信息对象时,就需要保证该对象的唯一性. 如何保证? 1.不允许其他程序用new ...
- java常用的设计模式
设计模式:一个程序员对设计模式的理解:"不懂"为什么要把很简单的东西搞得那么复杂.后来随着软件开发经验的增加才开始明白我所看到的"复杂"恰恰就是设计模式的精髓所 ...
- JavaScript创建对象及对象继承
面向对象的语言有一个标志,那就是他们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是在ECMAScript中没有类的概念,因此它的对象也与基于类的对象有所不同.实际上,JavaSc ...
- JavaScript创建对象
最佳方式 原型模式与构造模式组合使用 先上代码: function Person(name,age,salary){ this.name = name; this.age = age; this.sa ...
- 浅谈JavaScript原型对象与相关设计模式
引言 本文先从介绍JavaScript中基本的几种设计模式开始,最后引出原型对象,然后对原型对象有一个较全面的介绍. 1.创建对象的几种设计模式 A.工厂模式 我们知道在JavaScript中创建对象 ...
- javascript创建对象的方法总结
Javascript创建对象 最简单的方法:创建object实例. var person=new Object(); person.name="Joey";person.age=2 ...
- Java基础-Java中23种设计模式之常用的设计模式
Java基础-Java中23种设计模式之常用的设计模式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.设计模式分类 设计模式是针对特定场景给出的专家级的解决方案.总的来说设 ...
- Javascript 创建对象的三种方法及比较【转载+整理】
https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain 本文内容 引 ...
随机推荐
- 开学测试之——ATM
---恢复内容开始--- package ATM; //信1705-2 20173568 李泽宇 import java.util.*; import java.io.File; import ...
- java 获取图片大小(尺寸)
1,获取本地图片大小(尺寸) File picture=new File(strSrc);BufferedImage sourceImg=ImageIO.read(new FileInputStrea ...
- MVC5使用单选按钮与下拉框【转】
某人认为下拉列表的呈现形式不如单选按钮漂亮,我只好去测试一下单选按钮与下拉框了.测试代码如下: 1.model类Blog.cs(类型使用枚举类型,自动生成的视图会以下拉列表形式显示): using S ...
- Django admin操作
无名小妖 昵称:无名小妖园龄:1年6个月粉丝:22关注:1 +加关注 搜索 常用链接 我的随笔 我的评论 我的参与 最新评论 我的标签 我的标签 Python(1) python3 ...
- javascript-es6学习笔记
es6技术培训文档 第一阶段:1.let与const用法2.变量的解构赋值3.字符串的扩展4.正则的扩展5.数组的扩展6.函数的扩展7.对象的扩展8.Symbol9.Set和Map数据结构 第二阶段: ...
- ionic 向路由中的templateUrl(模板页)传值
.state('product', { url: '/product/:id', templateUrl: function ($routeParams) { return '/Product/Ind ...
- 阿牛的EOF牛肉串(递推)
阿牛的EOF牛肉串 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Sub ...
- Spring实战第五章学习笔记————构建Spring Web应用程序
Spring实战第五章学习笔记----构建Spring Web应用程序 Spring MVC基于模型-视图-控制器(Model-View-Controller)模式实现,它能够构建像Spring框架那 ...
- 0.爬虫 urlib库讲解 urlopen()与Request()
# 注意一下 是import urllib.request 还是 form urllib import request 0. urlopen() 语法:urllib.request.urlopen(u ...
- [转载]深入理解Batch Normalization批标准化
文章转载自:http://www.cnblogs.com/guoyaohua/p/8724433.html Batch Normalization作为最近一年来DL的重要成果,已经广泛被证明其有效性和 ...