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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
优化 JavaScript 代码的方法小结
Jul 16 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
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
一个简单计数器的源代码
2006/10/09 PHP
PHP insert语法详解
2008/06/07 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
js表单验证实例讲解
2016/03/31 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python中的zipfile模块使用详解
2015/06/25 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
Python PO设计模式的具体使用
2019/08/16 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Python实现微信好友的数据分析
2019/12/16 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
应届毕业生就业自荐信
2013/10/26 职场文书
装修五一活动策划案
2014/01/23 职场文书
马智宇结婚主持词
2014/04/01 职场文书
法语专业求职信
2014/07/20 职场文书
诉讼授权委托书
2014/10/15 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
详解flex:1什么意思
2022/07/23 HTML / CSS
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server