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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
js断点调试经验分享
Dec 08 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
javascript事件模型介绍
2016/05/31 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
Python多线程学习资料
2012/12/19 Python
全面解读Python Web开发框架Django
2014/06/30 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
Python celery原理及运行流程解析
2020/06/13 Python
通过自学python能找到工作吗
2020/06/21 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
联欢晚会主持词
2014/03/25 职场文书
具结保证书
2015/01/17 职场文书