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的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
package.json文件配置详解
Jun 15 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
2009/08/03 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
python中as用法实例分析
2015/04/30 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
Python元组常见操作示例
2019/02/19 Python
Python属性和内建属性实例解析
2020/01/14 Python
pandas实现导出数据的四种方式
2020/12/13 Python
Python扫描端口的实现
2021/01/25 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
护士实习自我鉴定
2013/10/22 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
银行转正自我鉴定
2014/09/29 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript