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 相关文章推荐
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
js实现登录验证码
Dec 22 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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/10/09 PHP
PHP Token(令牌)设计
2008/03/15 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
PDO::getAttribute讲解
2019/01/28 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
javascript的数组和常用函数详解
2014/05/09 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
Python中使用动态变量名的方法
2014/05/06 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python函数的作用域及关键字详解
2019/08/20 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
浅谈django 重载str 方法
2020/05/19 Python
python 如何停止一个死循环的线程
2020/11/24 Python
JPA面试常见问题
2016/11/14 面试题
525心理活动总结
2014/07/04 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
学校党支部承诺书
2015/04/30 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python