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 相关文章推荐
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
非常好的js代码
2006/06/27 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Python中的字典遍历备忘
2015/01/17 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python创建文件备份的脚本
2018/09/11 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
经典c++面试题五
2014/12/17 面试题
小区门卫工作职责
2013/12/14 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
旅游文化节策划方案
2014/06/06 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
商铺门面租房协议书
2014/10/21 职场文书
财务工作个人总结
2015/02/27 职场文书
2015年医生个人工作总结
2015/04/25 职场文书