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 cookie的设置获取删除详解
Feb 11 Javascript
javascript判断office版本示例
Apr 11 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
PHP curl使用实例
2015/07/02 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
用js重建星际争霸
2006/12/22 Javascript
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
2007/05/30 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
javascript history对象详解
2017/02/09 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
python里glob模块知识点总结
2021/01/05 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
名词解释型面试题(主要是网络)
2013/12/27 面试题
会计顶岗实习心得
2014/01/25 职场文书
租房协议书怎么写
2014/04/10 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
公司领导班子对照材料
2014/08/18 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2015年工程师工作总结
2015/04/30 职场文书
windows安装python超详细图文教程
2021/05/21 Python