JS常见构造模式实例对比分析


Posted in Javascript onAugust 27, 2018

本文实例分析了JS常见构造模式。分享给大家供大家参考,具体如下:

1.工厂模式

没有解决对象识别的问题。因为函数内部使用了new Object来创建对象

function Factory(name,age)
{
  var o=new Object();
  o.name=name;
  o.age=age;
  o.what=what;//用函数引用的方式消除重复创建相同函数的弊端,节省资源.函数引用可以修改this的指向,函数调用不可以!
  return o;
}
what=funciton()
{
  alert(this.name+this.age);
}
var o=Factory("12",12);
o.what();//what中的this指向o对象

这时候的constructor是Object,同时所有通过工厂模式返回的对象都是Object类型,所以instanceof操作符没有意义

console.log(o.constructor);
//打印function Object() { [native code] }
console.log(o instanceof Object);
//而且这时候所有的对象都是Object类型的

2.构造函数模式

function Person(name,age)
{
this.name=name;
this.age=age;
this.sayName=function(){ alert(this.name);}//相当于this.sayName=new Function("alert(this.name)")
}
var p1=new Person("xx",12);
var p2=new Person("yy",13);
alert(p1.sayName==p2.sayName)//内存地址不一样!返回false

构造函数相比工厂模式的优点在于能够正确的返回对象的类型,instanceof返回正确的结果。缺点在于如果向上面那样,那么在每一个对象上面都要有一个sayName方法,而且这些sayName方法不是同一个Function实例,因为ECMAScript中函数是对象,因此每定义一个函数,也就是实例化了一个对象!

对上面的方法进行优化:

function Person(name,age)
{
this.name=name;
this.age=age;
this.sayName=sayName;//函数引用的方法,共享了同一个sayName,p1,p2的内存地址一样,p1.sayName==p2.sayName返回true
}
function sayName()
{
alert(this.name);
}

缺点:全局函数sayName只能被某个对象调用p1.sayName,让全局函数名不副实;如果对象要定义很多方法,那么就要定义很多的全局函数,所以自定义的引用类型没有封装性可言

3.原型模式

(1)无法通过构造函数参数向原型属性动态传值,后果就是:没有个性,改变原型属性的值,所有的实例都会受到干扰!

(2)当原型属性的是引用类型的时候,如果在一个对象实例上修改属性,将会影响所有实例!

总之一句话:牵一发而动全身(包括属性和引用类型的值)是原型模式的特点。但是相比于构造函数类型,原型类型满足

person1.sayName===person2.sayName//两者的引用是一样的

4.构造函数原型模式

用构造函数定义个性,用原型模式定义共性

function Person(name,age)
{
 this.name=name;
 this.age=age;
 this.friends=['liangklfang','qinliang'];
}
//用原型定义共性
Person.prototype={
 constructor:Person,
 sayName:function()
 {
  console.log(this.name);
 }
}
var person1=new Person('liangklfang',"12");
var person2=new Person('liangklf',"14");
console.log(person1.sayName===person2.sayName);
//共性是函数,打印true
console.log(person1.friends===person2.friends);
//friends是个性,打印false

也可以对构造函数原型模式进行优化,就是常说的动态原型模式

function Book(title,page)
{
 this.title=title;
 this.page=page;
 if(typeof Book.isLock=="undefined")
//第一次的时候,Book.isLock是undefined,给原型绑定函数,以后就不需要了,他相比于构造函数原型模式的优点在于把所有的逻辑全部封装到构造函数里面!
  {
   alert("Enter!");
Book.prototype.what=function() 
     {
   alert(this.title+this.pages);
     }
   Book.isLock=true;
 }
}
//下面的两次调用alert("Enter!")只会调用因此i,因为第一次已经通过Book.isLock设置为true了!相当于静态方法!;
var b1=new Book("me",12);
b1.what();
var b2=new Book("he",13);
b2.what();

也可以在this中直接检测,而不用给函数对象一个属性

function Book(title,page)
{
 this.title=title;
 this.page=page;
  if(typeof this.sayName!='function')
  //第二次构造对象的时候会在原型中查找到sayName!
  {
   Book.prototype.sayName=function()
 {
  console.log(this.title);
 }
  }
}

5.寄生构造函数模式

除了使用new操作符以外,和工厂设计模式是一模一样的!可以在特殊的情况下为对象创建构造函数,例如想用构造函数方式创建一个具有额外方法的特殊数组,因为不能直接修改Array的构造函数,因此可以用这个模式!

function SpecialArray()
{
  var value=new Array();
  value.push.apply(value,arguments);
  value.toPipedString=function()
  {
    return this.join("|");
}
 return value;
}

总之,寄生构造函数的特点就是:有点像java中的装饰模式!把原来的对象进行装饰,同时返回装饰后的对象!这里就是把Array对象进行了装饰!添加了toPipe的String方法。缺点就是不能依赖instanceof操作符确定对象类型了,因为和不再包装类里面创建的对象是一模一样的!

6. 稳妥构造函数模式

特点:没有公共属性,而且其方法也不引用this的对象,instanceof失效。和寄生构造函数的不同在于不使用new来构造函数,同时实例方法不引用this。实际是闭包

function Person(name,age,job)
{
   var o=new Object();
    o.sayName=funciton(){alert(name)}//这里实例方法没有引用this,除了sayName不会有方法访问传入到构造函数中的原始数据!
   return o;
}
var friend=Person("xx",12,"teacher");
friend.name="female";//即使可以为这个对象修改了属性name
friend.sayName();//不会被修改,依然弹出xx。不是female。但是,如果把上面的修改成:o.sayName=function(){alert(this.name)}//那么就会弹出female,也就是friend.name被修改成功了,如果没有this,那么name的值一直引用的是原来的参数值!

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试运行上述js代码。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
Vue.js图片预览插件使用详解
Aug 27 #Javascript
JavaScript中创建原子的方法总结
Aug 26 #Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 #Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 #Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 #Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 #Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 #Javascript
You might like
php xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
理解javascript async的用法
2017/08/22 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
Python通过poll实现异步IO的方法
2015/06/04 Python
使用Python写CUDA程序的方法
2017/03/27 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python 字符串常用方法汇总详解
2019/09/16 Python
通过cmd进入python的步骤
2020/06/16 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
大一自我鉴定范文
2013/12/27 职场文书
工作表扬信的范文
2014/01/10 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
企业诚信承诺书
2014/05/23 职场文书
党员年终个人总结
2015/02/14 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python