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 png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
Js组件的一些写法
Sep 10 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
javascript常见用法总结
May 22 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
AngularJS执行流程详解
Feb 17 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
JS判断数组四种实现方法详解
Jun 29 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
在PHP中操作Excel实例代码
2010/04/29 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
php测试kafka项目示例
2020/02/06 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
python类型强制转换long to int的代码
2013/02/10 Python
Python的多态性实例分析
2015/07/07 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
新浪网技术部笔试题
2016/08/26 面试题
Java程序员常见面试题
2015/07/16 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
写自荐信有哪些不宜?
2013/10/17 职场文书
《金子》教学反思
2014/04/13 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers