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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
Vue 3.0中jsx语法的使用
Nov 13 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
5.PHP的其他功能
2006/10/09 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
php导出CSV抽象类实例
2014/09/24 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
Python基本socket通信控制操作示例
2019/01/30 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
任命书范本大全
2014/06/06 职场文书
村创先争优活动总结
2014/08/28 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
投诉信范文
2015/07/02 职场文书
课程设计感想范文
2015/08/11 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
党员廉政准则心得体会
2016/01/20 职场文书