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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
搞定immutable.js详细说明
2016/05/02 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
Vue实现计算器计算效果
2020/08/17 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现socket端口重定向示例
2014/02/10 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python实现统计单词出现的个数
2015/05/28 Python
python中关于for循环的碎碎念
2017/06/30 Python
python中的decorator的作用详解
2018/07/26 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
TCP/IP的分层模型
2013/10/27 面试题
管理学专业个人求职信范文
2013/09/21 职场文书
大学生秋游活动方案
2014/02/17 职场文书
婚内房产协议书范本
2014/10/02 职场文书
答辩状格式范本
2015/05/22 职场文书