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中的setTime()方法的使用
Jun 11 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 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
js chrome浏览器判断代码
2010/03/28 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
js实现图片360度旋转
2017/01/22 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
致跳高运动员加油稿
2014/02/12 职场文书
建设投标担保书
2014/05/13 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
介绍信范文
2015/01/31 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
Pytest allure 命令行参数的使用
2021/04/18 Python
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL