美文网首页
面向对象(八)继承___ 02原型式继承

面向对象(八)继承___ 02原型式继承

作者: 凸小布 | 来源:发表于2017-02-25 17:07 被阅读32次

    title: 面向对象(八)继承___ 02原型式继承 # 文章页面上的显示名
    date: # 文章生成时间,一般不改
    categories: # 文章分类目录,可省略
    - 面向对象
    tags: # 文章标签,可省略
    - 面向对象
    - 基于原型面向对象的继承 # 个数不限,单个可直接跟在 tags 后面


    • 原型式继承原理

      原理:利用构造函数的原型对象上面的属性和方法可以被构造函数创建出来的对象所拥有

    • 原型式继承的实现方式【3】

    • A · 利用对象的动态特性添加属性

    • B · 替换(字面量的方式)原型对象

    • C · B.prototype = A.prototype;
      ** B.prototype = A.prototype; 存在的问题:**
      001 构造器属性指向(默认指向的是父构造函数)
      002 无法获得实例属性和方法,只能继承(获得)父构造函数原型对象的属性和方法


    A · 利用对象的动态特性添加属性

    <script>
        function A(){}
        A.prototype.name = "默认的名称";
    
        var a1 = new A();
        var a2 = new A();
    
        console.log(a1.name);
        console.log(a2.name);
    </script>
    

    B · 替换(字面量的方式)原型对象

    <script>
        function A(){}
        A.prototype = {
            name : "默认名称",
            constructor : A
        }
    
        var a1 = new A();
        var a2 = new A();
    
        console.log(a1.name);
        console.log(a2.name);
    </script>
    

    C · B.prototype = A.prototype;

    <script>
        function A(){
            this.name = "默认的名称",
            this.age = 30
        }
        function B(){}
    
        A.prototype.des = "描述信息-A";
        // 设置B的原型对象
        B.prototype = A.prototype;
        // 修正构造器属性
        B.prototype.constructor = B;
    
        var b1 = new B();
        var b2 = new B();
    
        console.log(b1.des);
        console.log(b2.des);
    
        console.log(b1.constructor); //function B(){}
        console.log(b2.constructor); //function B(){}
    
        console.log(b1.name); //undefined
    
        var a1 = new A();
        console.log(a1.constructor); //function B(){}
        console.log(a1.name);
    
    </script>
    
    B.prototype = A.prototype 内存结构图

    ** B.prototype = A.prototype; 存在的问题:**
    001 构造器属性指向(默认指向的是父构造函数)
    002 无法获得实例属性和方法,只能继承(获得)父构造函数原型对象的属性和方法

    相关文章

      网友评论

          本文标题:面向对象(八)继承___ 02原型式继承

          本文链接:https://www.haomeiwen.com/subject/behnwttx.html