JavaScript继承方式

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xzhwill19900525/p/8670400.html

文章标签：

#javascript #ViewUI

本文介绍了JavaScript中的三种继承方式：构造函数式、原型链式及组合式继承。构造函数式继承实现了属性私有但未实现方法共享；原型链式继承实现了方法共享但不能实现属性私有；组合式继承结合两者优点，既实现了方法共享又实现了属性私有。

总结一下关于JavaScript继承方式
1,构造函数式--构造函数式继承类式继承

function  Super(){
    this.colors = ['c','a','b'];
    this.print = function(){
        console.log(this.colors);
    }
}

Super.prototype.prototypePrint=function(){
    console.log(this.colors);
}

function Sub(){
    Super.call(this);
}
var instance1 = new Sub();
instance1.colors.push('v');
instance1.print();//c,a,b,v
console.log(instance1.colors);   //c,a,b,v
instance1.prototypePrint();//instance1.prototypePrint is not a function

var instance2 = new Sub();
instance2.print();//c a b
console.log(instance2.colors);//c a b
instance2.prototypePrint();//instance1.prototypePrint is not a function

实现了属性的私有，没有实现方法的共享，方法都在构造函数中定义，因此无法复用，可以使用构造函数内定义的方法，在超类型（父类）的原型中定义的方法，对子类型而言是不能使用的。

2,原型链式--原型链式继承

//原型链式--原型链式继承--原型链继承
    function  Super(){
        this.colors = ['c','a','b'];
        this.print = function(){
            console.log(this.colors);
        }
    }
    Super.prototype.prototypePrint=function(){
        console.log(this.colors);
    }

    function Sub(){

    }

    Sub.prototype = new Super();

    var instance1 = new Sub();
    instance1.colors.push('v');
    console.log(instance1.colors);//c,a,b,v
    instance1.prototypePrint();//c,a,b,v

    var instance2 = new Sub();
    console.log(instance2.colors);//c a b v
    instance2.prototypePrint();//c a b v

实现了方法的共享；方法和属性全都被共享了，不能实现属性的私有。

3，组合式继承

function  Super(){
        this.colors = ['c','a','b'];
    }
    Super.prototype.print = function(){
        console.log(this.colors);
    };

    Super.prototype.prototypePrint=function(){
        console.log(this.colors);
    }
    function Sub() {
        Super.call(this);//第二次
    }

    Sub.prototype = new Super();//第一次

    Sub.prototype.constructor = Sub;

    var instance1 = new Sub();
    instance1.colors.push('v');
    console.log(instance1.colors);  //a b c v
    instance1.prototypePrint();  //a b c v

    var instance2 = new Sub();
    console.log(instance2.colors);   //a b c
    instance2.prototypePrint();  //a b c

//Sub.prototype = new Super();这一句把super的color数组共享到sub的原型上了。
//Super.call(Sub)这一句把super的color数组复制到sub上了
//子类实例将子类原型上的屏蔽了

实现了函数的共享，也实现了属性的私有。
组合式继承是js最常用的继承模式，但组合继承的超类型在继承过程中会使用两次，一次是创建子类型的时候，另一次是在子类型构造函数的内部。

转载于:https://www.cnblogs.com/xzhwill19900525/p/8670400.html