javascript学习十二：面向对象之extends

基于原型链的方式实现继承

js实现继承的第一种方式是基于原型链的方式
在使用原型链进行继承一定要注意一下问题：
1、不能在设定了原型链之后，再重新为原型链赋值。
2、一定要在原型链赋值之后才能添加或者覆盖方法。

    function Parent() {
        this.pv = "parent";
    }
    Parent.prototype.pp = "ok";
    Parent.prototype.showParentValue = function() {
        alert(this.pv);
    }

    function Child() {
        this.cv = "child";
    }
    /** * 如果想进行赋值之后，才进行原型链的设定，这样赋值的原型对象 * 就会被重写掉，赋值的对象就不存在在新的原型对象中 */
    // Child.prototype.showChildValue = function() {
        // alert(this.cv);
    // }
    /** * 让Child的原型链指向Parent对象，也就等于完成了一次继承 * 注意内存模型 */
    Child.prototype = new Parent();

    Child.prototype.showChildValue = function() {
         alert(this.cv);
    }
    /** * 此时完成的对父类对象的覆盖 */
    Child.prototype.showParentValue = function() {
        alert("override parent");
    }
    /** * 当执行了下面这句话之后，意味着Child的原型又重写了 * 这样就不存在任何的继承关系了 * 使用原型链需要注意的第一个问题 */
    // Child.prototype = {
        // showChildValue:function() {
            // alert(this.v);
        // }
    // }

    var c = new Child();
    c.showParentValue();
    c.showChildValue();
    alert(c.pp);

使用原型链继承的缺点

1.使用原型链继承，最大的缺点是，无法从子类中调用父类的构造函数这样就没有办法把子类中的属性赋值到父类；
2.如果父类中有引用类型，此时这个引用类会添加到子类的原型中，当第一个对象的修改了这个引用之后，其他对象的引用同时修改。
所以一般都不会单纯的使用原型链来实现继承。

    function Parent() {
        this.color = ["red","yellow"];
    }
    function Child() {
    }
    Child.prototype = new Parent();
    var c1 = new Child();
    //Child中的原型的color被修改
    c1.color.push("blue");
    alert(c1.color);//red,yellow blue
    var c2 = new Child();
    alert(c2.color);//red yellow blue

基于函数伪装实现继承

每调用一次new Child()就等于执行了一次对象属性的设定，此时，每个对象的空间中都有color和name，就不再会在原型中存在。所以就不会被共享。

    function Parent() {
        this.color = ["red","blue"];
        this.name = "Leon";
    }

    function Child() {
        //在Child中的this明显应该是指向Child的对象
        //当调用Parent方法的时候，而且this又是指向了Child
        //此时就等于在这里完成this.color = ["red","blue"]
        //也就等于在Child中有了this.color属性，这样也就变相的完成了继承
        Parent.call(this);
        //如果调用Parent();就仅仅完成了函数的调用，根本无法实现继承
    }


    var c1 = new Child();
    c1.color.push("green");
    alert(c1.color);//red,blue,green
    var c2 = new Child();
    alert(c2.color);//red,blue
    alert(c2.name);//Leon

使用伪造的方式就可以把子类的构造函数参数传递到父类中

    function Parent(name) {
        this.color = ["red","blue"];
        this.name = name;
    }
    function Child(name,age) {
        this.age = age;
        Parent.call(this,name);
    }
    var c1 = new Child("Leon",12);
    var c2 = new Child("Ada",22);
    alert(c1.name+","+c1.age);
    alert(c2.name+","+c2.age);

基于函数伪装实现继承的缺点

由于使用伪造的方式，不会完成Child的原型指向Parent。所以say方法不存在，解决方法是，将这个方法放置到Parent中使用this来创建，但是此时每个对象中又存在say，这样空间占用太大，所以也不会单独的使用伪造的方式实现继承。

    function Parent(name) {
        this.color = ["red","blue"];
        this.name = name;
        this.say = function() {
            alert(this.name);
        }
    }
    // Person.prototype.say = function() {
        // alert(this.name);
    // }

    function Child(name,age) {
        this.age = age;
        /* * 使用伪造的方式就可以把子类的构造函数参数传递到 * 父类中 */
        Parent.call(this,name);
    }
    var c1 = new Child("Leon",12);
    var c2 = new Child("Ada",22);
    c1.say();
    c2.say();

基于组合的方式实现继承

组合的实现方式是属性通过伪造的方式实现，方法通过原型链的方式实现。

function Parent(name) {
        this.color = ["red","blue"];
        this.name = name;
    }
    Parent.prototype.ps = function() {
        alert(this.name+"["+this.color+"]");
    }

    function Child(name,age) {
        //已经完成了伪造
        Parent.call(this,name);
        this.age = age;
    }
    Child.prototype = new Parent();
    Child.prototype.say = function() {
        alert(this.name+","+this.age+"["+this.color+"]");
    }


    var c1 = new Child("Leon",22);
    c1.color.push("green");
    c1.say();//Leon,22[red,blue,green]
    c1.ps(); //Leon[red,blue,green]
    var c2 = new Child("Ada",23);
    c2.say();//Ada,23[red,blue]
    c2.ps();//Ada [red,blue]