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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 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 图片上传实现代码 带详细注释
2010/04/29 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
python实现录音小程序
2020/10/26 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
HTML5 解析规则分析
2009/08/14 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
台风停课通知
2015/04/24 职场文书
JS高级程序设计之class继承重点详解
2022/07/07 Javascript