javascript设计模式Constructor(构造器)模式


Posted in Javascript onAugust 19, 2016

Constructor是一种在内存已分配给该对象的情况下,用于初始化新创建对象的特殊方法。Object构造器用于创建特定类型的对象?准备好对象以备使用,同事接收构造器可以使用参数,以在第一次创建对象时,设置成员属性和方法值。

对象创建
创新新对象,在javascript中通常有两种方法:
 1.对象直面量方法
var newObj = {};

 2.构造器的简洁方法
var newObj = new Object();
在Object构造器为特定的值创建对象封装,或者没有传递值时,它将创建一个肯那个对象并返回

 对象赋值的方法:
 1.“点”方法

//设置属性
newObj.name = 'LanFeng';
//获取值
var user= newObj.name;

 1.中括号方法

//设置属性
newObj["name"]= 'LanFeng';
//获取值
var user= newObj["name"];

 1.Object.defineProperty (适用ECMAScript5)

//设置属性
Object.defineProperty(newObj,"name",{
  value:"LanFeng",
  writable:true,
  enumerable:true,
  configurable:true
})

 1.Object.defineProperties

//设置属性
 Object.defineProperties(newObj,{
   "someKey":{
    value:"Hello Js",
     writable:true
  },
  "anotherKey":{
    value:"Foo bar",
    writable:false
  }
})

Javascript不支持类的概念,但它确实支持与对象一起用的特殊constructor函数,通过在构造器前面加new关键字,告诉js像使用构造器一样实例化一个新对象,并且对象成员由该函数定义。
在构造器内,关键字this引用新创建的对象。回顾对象创建,基本的构造器:

function Car(model,year,miles){
  this.model = model;
  this.year = year;
  this.miles = miles;
  this.toString = function(){
  return this.model + "has done" + this.miles +"miles";
  }
}
//创建实例化对象

var civio = new Car("Honda Civio",2009,20000);

var mondeo= new Car("Ford Mondeo",2009,5000);

上面例子是一个简单的构造器模式版本,但它确实存在一些问题,其中一个问题是,它使用继承变得困难,另外一个问题是,toString()这样的函数是为每个使用Car构造器创建的新对象而分别重新定义的,这个不是最理想的,因为这种函数应该在所有的Car类型实例直接共享。

javascript中有有一个prototype的属性,调用js构造器创建一个对象后,新对象就会具有构造器原型的所有属性,通过这种方式,可以创建多个对象,并访问相同的原型,实现方法共享。

function Car(model,year,miles){
  this.model = model;
  this.year = year;
  this.miles = miles;

}


//原型函数
Car.prototype.toString = function(){
  return this.model + "has done" + this.miles +"miles";
  }

//创建实例化对象

var civio = new Car("Honda Civio",2009,20000);
var mondeo= new Car("Ford Mondeo",2009,5000);
console.log(civio.toString())
console.log(mondeo.toString())

现在toString()的单一实例就能够在所有Car对着之间共享。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 #Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 #Javascript
AngularJS入门教程之更多模板详解
Aug 19 #Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 #Javascript
JS获取当前页面名称的简单实例
Aug 19 #Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 #Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 #Javascript
You might like
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
js时间控件只显示年月
2017/01/08 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
python使用zip将list转为json的方法
2018/12/31 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
Python编写打字训练小程序
2019/09/26 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
python与js主要区别点总结
2020/09/13 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
节约能源标语
2014/06/17 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python