javascript学习笔记11(原型链)

    <script type="text/javascript">
    /**
     * js实现继承的第一种方式是基于原型链的方式
     */
    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");
    }
    /**
     * 在使用原型链进行继承一定要注意一下问题：
     * 1、不能在设定了原型链之后，再重新为原型链赋值
     * 2、一定要在原型链赋值之后才能添加或者覆盖方法
     */
    

    /**
     * 当执行了下面这句话之后，意味着Child的原型又重写了
     * 这样就不存在任何的继承关系了
     * 使用原型链需要注意的第一个问题
     */
    // Child.prototype = {
        // showChildValue:function() {
            // alert(this.v);
        // }
    // }
    
    var c = new Child();
    c.showParentValue();
    c.showChildValue();
    alert(c.pp);
    
    </script>

 

 

    <script type="text/javascript">
    /**
     * js实现继承的第一种方式是基于原型链的方式
     */
    function Parent() {
        this.pv = "parent";
        this.color = ["red","yellow"];
    }
    Parent.prototype.pp = "ok";
    Parent.prototype.showParentValue = function() {
        alert(this.pv);
    }
    
    function Child() {
        
        this.cv = "child";
    }
    /**
     * 使用原型链继承，最大的缺点是，无法从子类中调用父类的构造函数
     * 这样就没有办法把子类中的属性赋值到父类
     * 第二个缺点就是，如果父类中有引用类型，此时这个引用类会添加到
     * 子类的原型中，当第一个对象的修改了这个引用之后，其他对象的引用同时修改
     * 所以一般都不会单纯的使用原型链来实现继承
     */
    
    Child.prototype = new Parent();
    
    Child.prototype.showChildValue = function() {
         alert(this.cv);
    }
    /**
     * 此时完成的对父类对象的覆盖
     */
    Child.prototype.showParentValue = function() {
        alert("override 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
    </script>