JavaScript面向对象程序设计中对象的定义和继承详解


Posted in Javascript onJuly 29, 2019

本文实例讲述了JavaScript面向对象程序设计中对象的定义和继承。分享给大家供大家参考,具体如下:

在面向对象的Javascript编程中,希望代码优雅有高效是非常重要的。javascript中不存在类的概念,只有对象。要想把Javascript代码写的像java 或者C++一样优雅,就得考虑如何去实现,同时也要考虑性能和高效。定义javascript对象的方式有很多,继承的方式也很多。通过不断地实践,推荐如下的方法:

1.Javascript对象的定义采用混合方式【构造函数 +原型方式(prototype)】

(1)通过构造函数方式定义对象的所有非函数属性

(2)用原型方式定义对象的函数属性

采用这种方式,所有的属性都是单一对象私有的,而方法则是所有对象公有的,对象之间的属性不相互干扰,各个对象间共享同一个方法。

//使用原型+构造函数方式来定义对象
//构造函数定义对象的非函数属性<strong>
function Person()
{
    this.username = new Array();
    this.password = "123";
}
//通过原型方式定义对象的函数
Person.prototype.getInfo = function()
{
    alert(this.username+","+this.password);
};
var p = new Person();
var p2 = new Person();
p.username.push("zhangsan");
p2.username.push("lisi");
p.getInfo();
p2.getInfo();

在现实的开发过程中,我们可能希望开发的各个类(实质是对象)能像java程序中放到一个包中统一管理,统一使用,而各个对象相互独立,同时避免对象重名等等因素,我们需要给每个类有个作用域,此时我们采用将对象放到自定匿名函数的方式来解决,这一点和jQuery开发插件的有点类似。代码如下:

/**
 * @author jasson
 * @include common.js
 */
//对象存在就等于对象,对象不存在就创建{}
var JassonChart = JassonChart || {};
(function(){
  //构造函数定义对象的非函数属性
  function Person()
  {
    this.username = new Array();
    this.password = "123";
  }
  //通过原型方式定义对象的函数
  Person.prototype.getInfo = function()
  {
      alert(this.username+","+this.password);
  };
  //将该类放到JassonChart中,类似java中的包,或者C++中的
  JassonChart.Person= Person;
}());
//调用该类库中的Person类
var p = new JassonChart.Person();

这样我们可以定义多个类,每个类都采用如上的方式实现,这样各个类相互都有作用域,非常规范。对于我们要用到的一些工具类,我们可以采用简单的对象进行定义,代码如下

/**
* @author jasson
*/
var JassonChart = JassonChart || {};
JassonChart .util = {
constants : {
WIDTH : 'width',
HEIGHT : 'height',
SVG : 'SVG',
CANVAS : 'CANVAS',
G : 'G', //svg element
STRING : 'string'
},
distance : function(a, b) {
var dx = a.x - b.x;
var dy = a.y - b.y;
return Math.sqrt(dx * dx + dy * dy);
}
};

2.Javascript对象的继承采用如下几种方式

2.1 Javascript对象的继承采用混合方式【构造函数 +原型方式(prototype)】

在JavaScript中最好的方式就是用混合方式实现对象间的继承。和定义对象一样,我们可以将属性和方法用不同的方式定义,用call或apply方式定义继承对象的属性,利用原型链的方式实现方法的继承。如下代码所示:

//使用混合的方式实现对象的继承
function Parent(hello)
{
  this.hello = hello;//定义父类的属性
}
Parent.prototype.sayHello = function()//定义父类的方法
{
  alert(this.hello);
}
function Child(hello,world)
{
  Parent.call(this,hello);//继承父类的属性
  //or Parent.apply(this,arguments);//继承父类的属性
  this.world = world;
}
Child.prototype = new Parent();//继承父类的方法
Child.prototype.sayWorld = function()
{
  alert(this.world);
}
var child = new Child("hello","world");
child.sayHello();
child.sayWorld();

2.2 深度拷贝方法

所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用"浅拷贝"就行了。

function deepCopy(p, c) {
  var c = c || {};
  for (var i in p) {
  if (typeof p[i] === 'object') {
    c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
return c;
}

使用的时候这样写:

var Doctor = deepCopy(Chinese);

现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性:

Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门');

这时,父对象就不会受到影响了。

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于jquery实现的表格分页实现代码
Jun 21 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
jquery动态添加option示例
Dec 30 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
JS中的作用域链
Mar 01 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 #Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 #Javascript
javascript中this的用法实践分析
Jul 29 #Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 #Javascript
jquery.pager.js分页实现详解
Jul 29 #jQuery
javascript面向对象创建对象的方式小结
Jul 29 #Javascript
jquery.pager.js实现分页效果
Jul 29 #jQuery
You might like
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP比你想象的好得多
2014/11/27 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
javascript天然的迭代器
2010/10/29 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
jQuery实现多按钮单击变色
2014/11/27 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
django有哪些好处和优点
2020/09/01 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
HTML5进度条特效
2014/12/18 HTML / CSS
开放系统互连参考模型
2016/06/29 面试题
汉语言文学毕业生求职信
2013/10/01 职场文书
少年闰土教学反思
2014/02/22 职场文书
教师病假条范文
2015/08/17 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers