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 相关文章推荐
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
jquery cookie的用法总结
Nov 18 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
element tree树形组件回显数据问题解决
Aug 14 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
ThinkPHP模板中数组循环实例
2014/10/30 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
做网页的一些技巧
2007/02/01 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
详解JS浏览器事件循环机制
2019/03/27 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
python对html代码进行escape编码的方法
2015/05/04 Python
python实现图书管理系统
2018/03/12 Python
10款最好的Python开发编辑器
2019/07/03 Python
python+OpenCV实现图像拼接
2020/03/05 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
银行毕业实习自我鉴定
2013/09/19 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
体育馆的标语
2014/06/24 职场文书
社区娱乐活动方案
2014/08/21 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
离婚协议书范文
2015/01/26 职场文书
保安辞职信范文
2015/02/28 职场文书
公司开除员工通知
2015/04/22 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
Python常遇到的错误和异常
2021/11/02 Python