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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
一分钟理解js闭包
May 04 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
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
PHP5中MVC结构学习
2006/10/09 PHP
一个显示天气预报的程序
2006/10/09 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
后勤自我鉴定
2013/10/13 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
自我推荐信范文
2014/05/09 职场文书
教师群众路线心得体会
2014/11/04 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
企业年会祝酒词
2015/08/11 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
Redis分布式锁的7种实现
2022/04/01 Redis