js - prototype 继承

基本的用法 把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 }

 

 

 

 

 

先来看看用new形式创建对象的过程:

1 //以func()作为构造函数创建一个对象obj
2 var obj=new func();

这个过程是这样的:javascript引擎首先遇到了关键字new后,马上开辟了一块内存,创建了一个空对象(并且将this指向这个对象),接着执行构造函数func()对这个空对象进行构造(构造函数里面有什么属性和方法都一一给这个空白对象装配上去,这也就是为什么构造函数叫“构造函数”的原因)。

其实,new和执行构造函数之间还有一件事引擎没有显式地告诉我们,而是偷偷地做了,这就是给这个空对象赋予prototype对象。

这里不得不提到一个跟prototype一样同样是系统保留而且同样重要的东西:__proto__

__proto__是一个对象自动拥有的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性,但它们最终都指向同一个对象,就是那个用来被继承的对象),用chrome和FF都可以访问到一个对象的__proto__属性,IE就不可以。

正是一个对象的__proto__指向着这个对象的构造函数的prototype对象,才使这个对象认识了它的构造函数的prototype对象,并拥有了这个prototype对象的属性和方法。

所以var obj=new func()这个过程更具体是这样的:

  1. javascript解析引擎遇到new后,开辟一片内存并创建了一个空对象,并且将“this”指向这个空对象
  2. javascript解析引擎将这个空对象的__proto__指向后面紧跟着的构造函数默认的prototype对象(一指向到prototype对象后,解析引擎就知道了“噢,这个对象要拥有这个prototype对象的属性和方法了”)
  3. javascript解析引擎执行构造函数体内的代码,也就正式开始对这个空对象进行构造(或者说装配)的过程了(this.name="xxx",this.sayHello=function(){...}等等)
  4. 对象被构造装配好,并赋值到等号左边的变量。

posted on 2016-05-20 12:07  Miqinda  阅读(227)  评论(0编辑  收藏  举报

导航