码迷,mamicode.com
首页 > Web开发 > 详细

js - prototype 继承

时间:2016-05-20 13:26:23      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:

基本的用法 把ClassA的一个实例赋值给ClassB ClassB就继承了ClassA的所有属性

1 function ClassA(){
2     this.a=‘a‘;
3 }
4 function ClassB(){
5     this.b=‘b‘;
6 }
7 ClassB.prototype=new ClassA();
8 var objB=new ClassB();
9 for(var p in objB)document.write(p+"<br>");

从原型继承理论的角度去考虑 js的原型继承是引用原型 不是复制原型
所以 修改原型会导致所有B的实例的变化

 1 function ClassA(){
 2     this.a=‘a‘;
 3 }
 4 function ClassB(){
 5     this.b=‘b‘;
 6 }
 7 ClassB.prototype=new ClassA();
 8 var objB=new ClassB();
 9 alert(objB.a);
10 ClassB.prototype.a=‘changed!!‘;
11 alert(objB.a);

 

然而 子类对象的写操作只访问子类对象中成员 它们之间不会互相影响
因此 写是写子类 读是读原型(如果子类中没有的话)

 1 function ClassA(){
 2     this.a=‘a‘;
 3 }
 4 function ClassB(){
 5     this.b=‘b‘;
 6 }
 7 ClassB.prototype=new ClassA();
 8 var objB1=new ClassB();
 9 var objB2=new ClassB();
10 objB1.a=‘!!!‘;
11 alert(objB1.a);

接下来是致命的,在子类对象中访问原型的成员对象:

 1 function ClassA(){
 2     this.a=[];
 3 }
 4 function ClassB(){
 5     this.b=function(){alert();};
 6 }
 7 ClassB.prototype=new ClassA();
 8 var objB1=new ClassB();
 9 var objB2=new ClassB();
10 objB1.a.push(1,2,3);
11 alert(objB2.a);
12 alert(objB2.a);
13 //所有b的实例中的a成员全都变了!!
14 //所以 在prototype继承中 原型类中不能有成员对象! 所有成员必须是值类型数据(string也可以)

只简单的这样设置继承的确如楼主所说,有不少缺点。总的来说有四个缺点:

  缺点一:父类的构造函数不是像JAVA中那样在给子类进行实例化时执行的,而是在设置继承的时候执行的,并且只执行一次。这往往不是我们希望的,特别是父类的构造函数中有一些特殊操作的情况下。

  缺点二:由于父类的构造函数不是在子类进行实例化时执行,在父类的构造函数中设置的成员变量到了子类中就成了所有实例对象公有的公共变量。由于JavaScript中继承只发生在“获取”属性的值时,对于属性的值是String,Number和Boolean这些数据本身不能被修改的类型时没有什么影响。但是Array和Object类型就会有问题。
  缺点三:如果父类的构造函数需要参数,我们就没有办法了。

  缺点四:子类原本的原型对象被替换了,子类本身的constructor属性就没有了。在类的实例取它的constructor属性时,取得的是从父类中继承的constructor属性,从而constructor的值是父类而不是子类。

1 //类的继承-海浪版
2 Function.prototype.Extends = function (parentClass){
3   var Bs = new Function();
4   Bs.prototype = parentClass.prototype;
5   this.prototype = new Bs();
6   this.prototype.Super = parentClass;
7   this.prototype.constructor = this;
8 }

 

js - prototype 继承

标签:

原文地址:http://www.cnblogs.com/piaozhe116/p/5511594.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!