美文网首页
js 构造函数继承

js 构造函数继承

作者: 飞鱼Q | 来源:发表于2016-02-01 17:22 被阅读0次

//js对象的继承

    function Animal(){
        this.species = "animal";
    }
    function Cat(name,color){
        this.name = name;
        this.color = color;
    }
    
    
    //1.构造函数绑定——使用call或apply方法,将父对象的构造函数绑定在子对象上
    function Cat(name,color){
        Animal.apply(this,arguments);
        this.name = name;
        this.color = color;
    }
    var cat1 = new Cat("xiao","red");
    console.log("species:"+cat1.species+" name:"+cat1.name+" color:"+cat1.color);
    
    
    
    //2.prototype模式——"猫"的prototype对象,指向一个Animal的实例,那么所有"猫"的实例,就能继承Animal了
    Cat.prototype = new Animal();//将prototype变成animal的实例
    var cat1 = new Cat("xiao","red");
    /*
    任何一个prototype对象都有一个constructor属性,指向它的构造函数(Cat)
     Cat.prototype原来指向的是Cat,因为上面将它替换成了Animal的实例了
     所以它的属性(constructor)也变成了Animal
     */
    console.log(Cat.prototype.constructor == Animal);//true
    /*
    每个实例也有一个constructor属性,默认调用prototype对象的constructor属性。
     */
    console.log(cat1.constructor == Cat.prototype.constructor);//true
    console.log(cat1.constructor == Animal);//true
    //cat1明明是用构造函数Cat生成的,但是现在变成了Animal,所以需要再把它变回原来的Cat
    Cat.prototype.constructor = Cat;
    cat1 = new Cat("xiao","red");
    
    console.log(cat1.species); // animal
    //结论,替换一个构造函数的prototype,一定要将prototype的constructor换回它本身。
    
    //3.利用空对象直接继承prototype
    function extend(parent,child){
        function f(){};
        f.prototype = parent.prototype;
        child.prototype = new f();
        child.prototype.constructor = child;
        child.uber = parent.prototype;//纯粹为了备用,可以调父类的原型 uber意思是上一层
    }
    
    extend(Animal,Cat);
    var cat2 = new Cat("dada","white");
    console.log("species:"+cat2.species+" name:"+cat2.name+" color:"+cat2.color);
    
    //4.拷贝继承——将父类的prototype的属性和方法复制给子类的prototype.
    function extend2(parent,child){
        var p = parent.prototype;
        var c = parent.prototype;
        for(var i in p){
            c[i] = p[i];
        }
        c.uber = p;
    }
    extend2(Animal,Cat);
    var cat3 = new Cat("zhong","black");
    console.log("species:"+cat3.species+" name:"+cat3.name+" color:"+cat3.color);

参考来源:阮一峰博客

相关文章

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • JavaScript 面向对象 (2)

    JS 如何继承? 借用构造函数继承 : function SuperType(name){ ...

  • js的继承方式

    js的继承方式 一、原型链继承 原型继承的缺点: 二. 构造函数继承 构造函数继承的缺点: 三. 组合式继承 组合...

  • 浅析JS继承方法

    JS 实现继承的方法有:1.原型链继承2.构造函数继承3.组合继承(原型链继承 + 构造函数继承)4.原型式继承(...

  • 2019-03-25 继承

    js中通过原型来实现继承 组合继承:原型继承+借用构造函数继承

  • ES5和ES6中继承的不同之处

    1、JS中是没有继承的,不过可以通过构造函数或是原型等实现继承,ES5实现继承的方法——构造函数,当一个构造函数加...

  • js 继承的三种方式构造函数、原型链、组合继承

    第一种方式:js使用构造函数的继承。 缺点:无法继承父类的原型链。 // 构造函数继承 缺点:没有继承原型链 fu...

  • Js的继承

    js的继承 @(js)[继承, js, 前端] 组合继承是原性链继承和构造函数继承的合体,它汲取了二者各自的有点,...

  • JS对象和继承

    JS 对象创建的三种方式 字面量创建方式 系统内置构造函数方式 自定义构造函数 继承方式 for in 继承 原型...

  • 面向对象继承复习

    js基础的面向对象的继承 构造函数继承 这种方法的缺陷是只会继承构造函数上的实例属性,并不会继承原型对象上的属性,...

网友评论

      本文标题:js 构造函数继承

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