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 页面 Mask实现代码
Jan 09 Javascript
使用js 设置url参数
Jul 08 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
angular十大常见问题
Mar 07 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
VUE安装使用教程详解
Jun 03 Javascript
vue 解决异步数据更新问题
Oct 29 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设计模式之单例模式使用示例
2014/01/20 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
jquery异步调用页面后台方法‏(asp.net)
2011/03/01 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
python实现验证码识别功能
2018/06/07 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python多进程fork()函数详解
2019/02/22 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
python中pdb模块实例用法
2021/01/15 Python
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
房产继承公证书
2014/04/09 职场文书
大学新生军训方案
2014/05/03 职场文书
国旗下演讲稿
2014/05/08 职场文书
产品包装策划方案
2014/05/18 职场文书