js中的prototype和基于prototype的继承总结

  与其他编译语言的继承相比，javascript也有一套继承实现方式，即使用prototype原型及其链的方式。

1、我们先用一个简单的例子先理解原型链，

    function superClass(){

     this.value = "super"; 

    }

    superClass.prototype.getSuperValue = function(){

     return this.value;

    }

    function subClass(){

     this.subClassValue = "sub";

    } 

    subClass.prototype = new superClass();

    subClass.prototype.getSubValue = function(){

     return this.subClassValue;

    }

    var s = new subClass();

    alert(s.getSuperValue());

    我们声明了俩个构造方法:subClass 和superClass,每个构造函数都有一个原型属性(本地无法访问)指向该构造方法的原型对象，

    原型对象有个constructor属性指向构造方法，实例中prototype属性指向原型。我们还知道所有对象都是继承

    Object的，其实在每个构造方法的原型对象中还有一个指向Object.prototype的属性，object.prototype中的constructor又指向

    object,这样就形成了一个prototype链。

    现在我们来分析subClass.prototype = new superClass(); subClass.prototype 指向superClass的实例意味着什么呢，意味着

    subClass.prototype指向了superClass的prototype，所以就能访问到原型中的属性和方法。

    这时的弹出框消息为"super". 这下应该就很明白为什么了吧。

2、还有一种实现继承的方式，就是借用构造方法

    function superClass(){

     this.name = [‘Eason‘]

    }

    function subClass(){

     superClass.call(this);//实现继承

    }

    var sub =  new subClass();

    alert(sub.name);

    sub.name.push(‘hou‘);

    alert(sub.name)

    3、组合继承：就是将原型链继承还构造函数继承结合在一起，使用原型链对原型属性和方法的继承，使用构造方法来实现对实例属性的继承

    原型继承的缺点：原型中定义的属性被多个实例共享

    构造方法的确定：方法都在构造方法中定义，复用率几乎为0

    function superClass(name){

     this.name = name;

     this.color= [‘red‘,‘yellow‘];

    }

    superClass.prototype.sayName = function(){

     return this.name;

    }

    function subClass(name,age){

     superClass.call(this,name);

     this.age = age;

    }

    subClass.prototype = new superClass();

    subClass.prototype.sayAge = function(){

     return this.age;

    }

    var sub = new subClass(‘Eason‘,26);

    alert(sub.color);

    alert(sub.sayName());

    alert(sub.sayAge());

4、还有一种比较常用的就是原型是继承，思想就是原型可以基于已有的对象创建新的对象，

    我们先构造一个工具方法：

    function createObj(o){

     function fun(){

     }

     fun.prototype = o;

     return new fun();

    }

    用法：

    var obj = {

     name : ‘Eason‘,

    }

    var o = createObj(obj);

    alert(o.name);

    o.name = ‘hou‘;

    alert(o.name);

通过上面的例子可以对prototype的基本用法有个简单的了解，如果各位看客有什么意见请留言，谢谢！

本文出自 “Eason's hcc” 博客，请务必保留此出处http://hcc0926.blog.51cto.com/172833/1559339