JavaScript对象的继承

Posted 2020-11-21 前端路上的小兵

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript对象的继承相关的知识，希望对你有一定的参考价值。

原文

　　简书原文：https://www.jianshu.com/p/78ce11762f39

大纲

　　前言
　　1、原型链继承
　　2、借用构造函数实现继承
　　3、组合模式继承
　　4、原型式继承
　　5、寄生式继承
　　6、寄生组合式继承
　　7、代码资源

前言

　　继承是OO语言中的一个最为人津津乐道的概念。许多OO语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。如前所述，由于函数没有签名，在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链来实现的。

1、原型链继承

　　原型链是实现继承的主要方法。
　　利用原型链实现继承的基本思路是：利用原型让一个引用类型继承另一个引用类型的属性和方法。

function SuperType(name){
    this.name = name;
}
SuperType.prototype.sayName = function(){
    return this.name;
};
function SubType(age){
    this.age = age;
}
//主要代码
SubType.prototype = new SuperType(‘kk‘);

SubType.prototype.sayAge = function(){
    return this.age;
};
var instance = new SubType(12);
console.log(instance);

2、借用构造函数实现继承

　　借用构造函数实现继承的实现思路:在子类型构造函数的内部调用超类构造函数。

function SuperType(name){
    this.name = name;
    this.sayName = function() {
        return this.name;
    }
}
function SubType(name,age){
    this.age = age;
    this.sayAge = function() {
        return this.age;
    }
    SuperType.call(this,name);
}
var instance = new SubType(‘kk‘,2);
console.log(instance);

3、组合模式继承

　　组合继承，也叫作伪经典继承，指的是将原型链和借用构造函数的技术组合到一块。
　　思路：使用原型链实现对原型属性和方法的继承，通过借用构造函数来实现对实例属性的继承。

function SuperType(name){
    this.name = name;
}
SuperType.prototype.sayName = function(){
    console.log(this.name);
};
function SubType(name,age){
    //继承属性
    SuperType.call(this,name);
    this.age = age;
}
//继承方法
SubType.prototype = new SuperType(‘gg‘);
SubType.prototype.sayAge = function(){
    console.log(this.age);
}
var instance = new SubType("kk",13);
console.log(instance);

4、原型式继承

　　原型式继承：该方法没有使用严格意义上的构造函数，它的想法是借助原型可以基于已有的对象创建新的对象，同时还不必因此创建自定义类型。

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
var person = {
    name : "kk",
    age : 12
};
var extendPerson = object(person);
console.log(extendPerson);

5、寄生式继承

　　寄生式继承的思路:创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真的是它做了所有工作一样返回对象。

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
function createAnother(original){
    var clone = object(original);//通过调用函数创建一个新对象
    clone.sayHi = function(){//以某种方式来增强这个对象
        console.log("hi");
    };
    return clone;//返回这个对象
}
var person = {
    name : "kk",
    age : 13
};
var anotherPerson = createAnother(person);
console.log(anotherPerson);

6、寄生组合式继承

　　所谓寄生组合式继承:即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。
其背后的基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
function inheritPrototype(subType,superType){
    var prototype = object(superType.prototype);//创建对象
    prototype.constructor = subType;//增强对象
    subType.prototype = prototype;//指定对象
}
function SuperType(name){
    this.name = name;
}
SuperType.prototype.sayName = function(){
    console.log(this.name);
};
function SubType(name,age){
    //继承属性
    SuperType.call(this,name);
    this.age = age;
} 
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge = function(){
    console.log(this.age);
};

var instance = new SubType(‘kk‘,15);
console.log(instance);