论Javascript的类继承

开发 前端
本文介绍了Javascript中的类继承,从无参和有参两个方面来介绍的,一起来看,希望对你有帮助。

说到Javascript类继承,就必然离不开原型链,但只通过原型链实现的继承有着不少缺陷。

无参数类继承的问题

先看一段示例代码,实现B继承于A:

 

  1. function A() {  
  2. }  
  3. A.prototype.a1 = function() {  
  4. };  
  5. function B() {  
  6. }  
  7. B.prototype = new A();  
  8. B.prototype.b1 = function() {  
  9. };  
  10. var b = new B();  
  11. alert(b.constructor == A); // true  
  12. alert(b.constructor == B); // false 

 

这段代码的主要问 题是:

1、需要实例化A作为B的原型,此时就执行了A的构造函数。但按照面向对象的规则,实例化B之前,B及其父类A的构造函数都不应该执行。

2、更改了B的prototype,导致b.constructor不是B而是A。

有参类继承的问题

假设A和B都有两个字符串参数s1和s2,A中计算了两段字符串的总长度,B直接以s1、s2为参数调用A:

 

  1. function A(s1, s2)   
  2. {  
  3. this.totalLength = s1.length + s2.length;  
  4. }  
  5. A.prototype.a1 = function()   
  6. {  
  7. };  
  8. function B(s1, s2)   
  9. {  
  10. }  
  11. B.prototype = new A();  
  12. B.prototype.b1 = function()   
  13. {  
  14. };  
  15. new B(“ab”, “123″); 

 

可以看到,这段代码中根本没有办法把s1和s2传到A,而又因为实例化A作为B的原型时没有 参数,所以出现了异常:

 

  1. s1 is undefined 

 

解决方案

s1 和s2的作用域只在B内,要把它们传到A,就只能在B中操作,借助函数的apply方法就可以实现之:

 

  1. function B(s1, s2)   
  2. {  
  3. A.apply(this, arguments);  
  4. alert(this.totalLength);  

 

接下来的问题就是如何把A的方法添加到B的原型中去。这也不 难,只要遍历A.prototype,把方法复制到B.prototype即可。要注意的是,对于同名的方法,自然是子类优先(重载), 因而不能覆盖:

 

  1. for (var m in A.prototype)   
  2. {  
  3. if (!B.prototype[m])   
  4. // 父类不能覆盖子类的方法  
  5. B.prototype[m] = A.prototype[m];  
  6. }  

【编辑推荐】

  1. Javascript面向对象编程(二)继承
  2. Javascript面向对象编程(三)非函数对象的继承
  3. JavaScript对象及继承教程之内置对象
  4. 一个字概括:继承了责任感
  5. 8.3.3 配置文件的继承层次结构
责任编辑:于铁 来源: UED TEAM
相关推荐

2009-07-08 17:42:26

this属性

2009-07-08 17:51:45

constructor

2009-07-08 17:48:18

prototype属性

2009-01-04 09:08:30

面向对象继承接口

2017-02-13 11:45:19

JavaScriptfor循环

2012-02-14 09:45:02

JavaScript

2011-08-31 14:48:33

JavaScript

2011-07-07 13:39:14

Cocoa 框架

2011-08-24 13:56:27

JavaScript

2011-06-07 08:58:31

javascript

2021-12-04 11:17:32

Javascript继承编程

2011-03-10 14:19:56

JavaScript

2010-01-21 13:48:30

C++基类

2013-09-18 14:01:46

JavaScript

2017-07-21 09:40:35

Python类、继承和多态

2009-12-07 16:07:03

PHP类的继承

2011-07-08 10:25:55

JavaScript

2011-08-24 13:51:56

JavaScript

2020-04-29 14:40:19

JavaScript继承编程语言

2011-05-25 10:59:26

Javascript继承
点赞
收藏

51CTO技术栈公众号