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 相关文章推荐
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php设计模式 Strategy(策略模式)
2011/06/26 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
解析php中的escape函数
2013/06/29 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
python浪漫表白源码
2019/04/05 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
keras多显卡训练方式
2020/06/10 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
后勤采购员岗位职责
2013/12/19 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
财务负责人岗位职责
2015/02/03 职场文书
小浪底导游词
2015/02/12 职场文书
2016年清明节寄语
2015/12/04 职场文书
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle