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 相关文章推荐
JavaScript null和undefined区别分析
Oct 14 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
validator验证控件使用代码
Nov 23 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
使用Vant完成Dialog弹框案例
Nov 11 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/04/28 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python使用wxPython实现计算器
2018/01/30 Python
Python pymongo模块用法示例
2018/03/31 Python
详解Python的三种可变参数
2019/05/08 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
生产总经理岗位职责
2013/12/19 职场文书
植树节标语
2014/06/27 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
检察院起诉意见书
2015/05/20 职场文书
宾馆安全管理制度
2015/08/06 职场文书
导游词之凤凰古城
2019/10/22 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript