JavaScript编程设计模式之构造器模式实例分析


Posted in Javascript onOctober 25, 2017

本文实例讲述了JavaScript编程设计模式之构造器模式。分享给大家供大家参考,具体如下:

经典的OOP语言中,构造器(也叫构造函数)是一个用于初始化对象的特殊方法。在JS中,因为一切皆对象,对象构造器经常被提起。

对象构造器用于建立制定类型(Class)的对象,可以接受参数用于初始化对象的属性和方法。

对象建立

在JS中,有三个常用的方法用于建立对象:

//1, 推荐使用
var newObject = {};
//2,
var newObject = Object.create( null );
//3, 不推荐
var newObject = new Object();

但是,这也只是建立了三个空对象, 并没有任何属性和方法。我们可以通过以下四种方法,为对象设立属性和方法。

// ECMAScript 3 兼容的方式
// 1. 常规对象定义方式
//设置属性
newObject.someKey = "Hello World";
//获取属性
var key = newObject.someKey;
// 2. 方括号方式
// 设置属性
newObject["someKey"] = "Hello World";
//获取属性
var key = newObject["someKey"];
// 仅仅用于ECMAScript 5
// 3. Object.defineProperty
// 设置属性
Object.defineProperty(
 newObject, "someKey",
 { value: "for more control of the property's behavior",
  writable: true,
  enumerable: true,
  configurable: true
});
//可以通过下面的函数简化属性设置
var defineProp = function ( obj, key, value ){
  config.value = value;
  Object.defineProperty( obj, key, config );
};
// 使用方法
var person = Object.create( null );defineProp( person, "car", "Delorean" );
defineProp( person, "dateOfBirth", "1981" );
defineProp( person, "hasBeard", false );
// 4. Object.defineProperties
//设置属性
Object.defineProperties(
newObject,
{ "someKey": { value: "Hello World", writable: true },
 "anotherKey": { value: "Foo bar", writable: false }
});
// 3和4的获取属性方法同1,2.

基本的构造器

我们知道, JS中没有Class的概念,但它也支持用构造器建立对象。

通过使用【new】关键字,我们可以使一个函数的举止类似于构造器,从而建立自己的对象实例。

一个基础的构造器形式如下:

function Car( model, year, miles ) {
  //这里,this指向新建立的对象自己
  this.model = model;
  this.year = year;
  this.miles = miles;
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
//用法
// 建立两个car实例
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
// 输出结果
console.log( civic.toString() );
console.log( mondeo.toString() );

这就是简单的构造器模式, 它有两个主要问题,

第一,它很难继承;第二,toString()被每一个对象实例定义一遍,作为函数,它应该被每一个Car类型的实例共享。

使用原型的构造器

JS中有一个很好的特性:原型【Prototype】,

利用它,建立对象时,所有构造器原型中的属性都可以被对象实例获得。

这样多个对象实例就可以共享同一个原型。

我们改善前面的Car例子如下:

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 civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
//输出
console.log( civic.toString() );
console.log( mondeo.toString() );

在上面的例子中,toString()方法被多个Car对象实例共享。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 注意事项 与原因分析
Apr 24 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
详解Node.js串行化流程控制
May 04 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
原生js实现放大镜组件
Jan 22 Javascript
浅谈JavaScript作用域
Dec 06 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 #Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 #Javascript
JS获取当前地理位置的方法
Oct 25 #Javascript
JavaScript 异步调用
Oct 25 #Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 #Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 #Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 #Javascript
You might like
php 进度条实现代码
2009/03/10 PHP
PHP查询网站的PR值
2013/10/30 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python字符串格式化输出方法分析
2016/04/13 Python
Python微信操控itchat的方法
2019/05/31 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python进度条的制作代码实例
2019/08/31 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
keras 多任务多loss实例
2020/06/22 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
开放系统互连参考模型
2016/06/29 面试题
六一儿童节活动策划方案
2014/01/27 职场文书
食品安全工作方案
2014/05/07 职场文书
李培根演讲稿
2014/05/22 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
万能检讨书2000字
2014/10/17 职场文书
2016高考冲刺决心书
2015/09/23 职场文书