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 相关文章推荐
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 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
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
发现的以前不知道的函数
2006/09/19 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
详解Python中的正则表达式的用法
2015/04/09 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
Linux如何压缩可执行文件
2014/03/27 面试题
自我鉴定思想方面
2013/10/07 职场文书
人事专员岗位职责
2013/11/20 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
反邪教标语
2014/06/23 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
超市创意活动方案
2014/08/15 职场文书
学雷锋的心得体会
2014/09/04 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书