Javascript面向对象编程(三)非函数对象的继承

开发 前端
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程语言,因为它的语法中没有class。本文主要介绍Javascript中继承的另一种——基于"非函数对象"的继承,一起来看。

Javascript继承有两种。一种是基于"函数对象"的继承,也就是一个function去继承另外一个function,这个我已经在昨天介绍过了。

另一种则是基于"非函数对象"的继承,不涉及function。它的做法与前一种情况完全不同。

一、什么是"非函数对象"的继承?

比如,现在有一个对象,叫做"中国人"。

 

  1. var Chinese = {  
  2. nation:'中国' 
  3. }; 

 

还有一个对象,叫做"医生"。

 

  1. var Doctor ={  
  2. career:'医生' 

 

请问,我怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象?

二、object()方法

json格式的发明人Douglas Crockford,提出了一个object()函数,可以做到这一点。

 

  1. function object(o) {   
  2. function F() {}   
  3. F.prototype = o;   
  4. return new F();   

 

这个object()函数,其实只做一件事,就是把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起。

使用的时候,第一步先在父对象的基础上,生成子对象:

 

  1. var Doctor = object(Chinese); 

 

然后,再加上子对象本身的属性:

 

  1. Doctor.career = '医生'

 

这时,子对象已经继承了父对象的属性了。

 

  1. alert(Doctor.nation); //中国 

 

三、浅拷贝

除了使用"prototype链"以外,还有另一种思路:把父对象的属性,全部拷贝给子对象,也能实现继承。

下面这个函数,就是在做拷贝:

 

  1. function extendCopy(p) {   
  2. var c = {};  
  3. for (var i in p) {   
  4. c[i] = p[i];  
  5. }  
  6. c.uber = p;  
  7. return c;  

 

使用的时候,这样写:

 

  1. var Doctor = extendCopy(Chinese);  
  2. Doctor.career = '医生';  
  3. alert(Doctor.nation); // 中国 

 

但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。

请看,现在给Chinese添加一个"出生地"属性,它的值是一个数组。

 

  1. Chinese.birthPlaces = ['北京','上海','香港']; 

 

通过extendCopy()函数,Doctor继承了Chinese。

 

  1. var Doctor = extendCopy(Chinese); 

 

然后,我们为Doctor的"出生地"添加一个城市:

 

  1. Doctor.birthPlaces.push('厦门'); 

 

发生了什么事?Chinese的"出生地"也被改掉了!

 

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

 

所以,extendCopy()只是拷贝基本类型的数据,我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。

四、深拷贝

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

 

  1. function deepCopy(p, c) {   
  2. var c = c || {};  
  3. for (var i in p) {   
  4. if (typeof p[i] === 'object') {   
  5. c[i] = (p[i].constructor === Array) ? [] : {};  
  6. deepCopy(p[i], c[i]);  
  7. else {  
  8. c[i] = p[i];  
  9. }  
  10. }  
  11. return c;  

 

使用的时候这样写:

 

  1. var Doctor = deepCopy(Chinese); 

 

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

 

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

 

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

 

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

 

目前,jQuery库使用的就是这种继承方法。

原文地址:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html

【编辑推荐】

  1. Javascript面向对象编程(一) 封装
  2. Javascript面向对象编程(二)继承
  3. Web移动应用 HTML5 CSS和JavaScript
  4. 如何判断Javascript对象是否存在
  5. 学习java大概步骤
责任编辑:于铁 来源: 阮一峰的博客
相关推荐

2011-05-25 10:59:26

Javascript继承

2010-10-08 09:13:15

oop模式JavaScript

2012-01-17 09:34:52

JavaScript

2017-04-21 09:07:39

JavaScript对象编程

2023-09-27 23:28:28

Python编程

2012-02-27 09:30:22

JavaScript

2011-05-25 10:21:44

Javascript

2011-05-13 11:05:52

javascript

2023-02-22 18:06:35

函数javascript面向对象编程

2011-07-08 10:25:55

JavaScript

2018-12-14 11:30:00

JavaScript编程前端

2011-06-28 14:11:33

JavaScript

2020-10-26 12:27:18

对象编程函数式

2021-10-21 18:47:37

JavaScript面向对象

2009-01-04 09:08:30

面向对象继承接口

2009-06-16 17:09:17

Scala面向对象函数编程

2010-03-05 14:44:36

Python继承

2019-11-18 17:05:02

JavaScript面向对象程序编程Java

2023-11-30 08:00:54

面向对象面向切面

2010-11-17 11:31:22

Scala基础面向对象Scala
点赞
收藏

51CTO技术栈公众号