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 相关文章推荐
prototype class详解
Sep 07 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
vue配置多代理服务接口地址操作
Sep 08 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 stream_context_create()作用和用法分析
2011/03/29 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php中JSON的使用方法
2015/04/30 PHP
php获取错误信息的方法
2015/07/17 PHP
php 浮点数比较方法详解
2017/05/05 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
javascript call和apply方法
2008/11/24 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
JavaScript实用代码小技巧
2018/08/23 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
安装dbus-python的简要教程
2015/05/05 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
python3爬虫中异步协程的用法
2020/07/10 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
Python的logging模块基本用法
2020/12/24 Python
港湾网络笔试题
2014/04/19 面试题
2013年研究生毕业感言
2014/02/06 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
欢送会主持词
2015/07/01 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
Python基础之Socket通信原理
2021/04/22 Python
springboot实现string转json json里面带数组
2022/06/16 Java/Android