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 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
使用js画图之画切线
Jan 12 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 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在文件指定行中写入代码的方法
2012/05/23 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
PHP7.0版本备注
2015/07/23 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
使用Python下载Bing图片(代码)
2013/11/07 Python
详解Python 解压缩文件
2019/04/09 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python中图像通道分离与合并实例
2020/01/17 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
财务经理岗位职责
2013/11/09 职场文书
五四青年节演讲稿
2014/05/26 职场文书
医院党员公开承诺书
2014/08/30 职场文书
综合测评个人总结
2015/03/03 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
大学体育课感想
2015/08/10 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js