javascript的6种继承方式

//1. 原型链继承
//原型链继承的主要思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
//警告:通过原型链继承是,不能使用对象字面量创建原型方法,这样会重写原型链!   
function SuperType() {
        this.color = ['red', 'blue'];
    }
    function SubType() {


    }
    SubType.prototype = new SuperType();// 继承了SuperType
    var instance1 = new SubType();
    console.log(instance1);
// 2. 借用构造函数继承
// 其实就是用call和apply实现继承
     function wanda() {
        this.money = [1,2,3]
    }
    function sicong() {
        wanda.call(this);
    }
    var sc = new sicong();
    sc.money.push(666);
    console.log(sc);
// 3. 组合继承将原型链和借用构造函数的技术组合起来一起用,好处是既能实现函数的复用,又能保证每个实例有自己的属性。
        function SuperType(name) {
        this.name = name;
        this.color = ['red', 'blue'];
    }
    SuperType.prototype.sayName = function() {
        console.log(this.name);
    };
    function SubType(name, age) {
        SuperType.call(this, name);//继承属性
        this.age = age;
    }
    SubType.prototype = new SuperType();//继承方法
    var instance1 = new SubType('tj', 22);

    instance1.sayName();

  // 4 原型式继承---这种继承方式主要针对与不关注自定义类型和构造函数而考虑对象的情况下,思路是基于已有的对象创建新对象,实例代码如下:
    function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}


var bird1 = object(Animal);
// 这种继承方式通过临时创建一个新的构造函数F并将其原型对象设为所需要的对象,然后返回一个此构造函数F的实例以实现继承


5 寄生式继承--这种继承方式使用了Object.create(),创建一个用于封装继承过程的函数,在函数内部来增强对象,其本质原理与原型式继承类似,示例代码:
function createAnother(original) {
    var clone = Object.create(original);
    clone.sayHi = function () {
        console.log('hi');
    };
    return clone;
}


var anotherAnimal = createAnother(Animal);
anotherAnimal.sayHi();


// 6 寄生组合式继承--寄生组合式继承是最理想的继承范式,通过借用构造函数来继承属性,通过原型链来继承方法。本质上使用了寄生式继承来继承超类型的原型,然后将结果指定给子类型的原型。实例代码如下:
    // 6.寄生组合式继承
function inheritPrototype(subType, superType) {
    // 创建对象
    var prototype = Object.create(superType.prototype);
    // 增强对象
    prototype.constructor = subType;
    // 指定对象
    subType.prototype = prototype;
}


function Fish(name) {
    Animal.call(this, 'fish');
}


inheritPrototype(Fish, Animal);


// from:http://blog.csdn.net/Jutal_ljt/article/details/78582501

猜你喜欢

转载自blog.csdn.net/qq_40184012/article/details/79483694