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 相关文章推荐
js中split函数的使用方法说明
Dec 26 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
js异步接口并发数量控制的方法示例
Nov 22 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
TensorFlow实现RNN循环神经网络
2018/02/28 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
animation和transition的区别
2020/10/12 HTML / CSS
一般党员对照检查材料
2014/09/24 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
欠款起诉书范文
2015/05/19 职场文书
文明礼仪主题班会
2015/08/13 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android