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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
vue.js自定义组件directives的实例代码
Nov 09 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
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
PHP框架性能测试报告
2016/05/08 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
asm.js使用示例代码
2013/11/28 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
js中生成map对象的方法
2014/01/09 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
python类型强制转换long to int的代码
2013/02/10 Python
Python3遍历目录树实现方法
2015/05/22 Python
Python决策树分类算法学习
2017/12/22 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
图书室管理制度
2014/01/19 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
经理任命书模板
2014/06/06 职场文书
2014最新实习证明模板
2014/10/02 职场文书
个性与发展自我评价
2015/03/06 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL