前端面试必考的八种JS原型继承方法

什么是js继承?

定义: 

        若是一个类可以重用另外一个类的属性和或方法，就称之为继承。

        面向对象的语言多数都支持继承。

特色: 

       子类可使用父类的全部功能，而且对这些功能进行拓展。

       继承最重要的优势就是代码复用，从而构建大型软件系统。

原型链继承 (传统形式)

缺点: 

        过多的继承了没用的属性

Grand.prototype.lastName = 'chen'
function Grand() {}
var grand = new Grand();
Father.prototype = grand;
function Father() {    
    this.name = 'hehe';
}
var father = new Father();
Son.prototype = father;
function Son() {}
var son = new Son();

复制代码

借用构造函数(类式继承)

优势:

        能够传参

缺点:

        不能继承借用构造函数的原型

        每次构造函数都要多走一个函数 

function Person(name, age, sex) { 
    this.name = name;
    this.age = age;
    this.sex = sex;
}
function Student(name, age, sex, grade) {
    Person.call(this, name, age, sex);
    this.grade = grade;
}
var student = new Student('hehe', 40, 'male', 18);复制代码

组合式继承(通俗来说就是用原型链实现对原型属性和方法的继承 用借用构造函数来实现对实例属性的继承)

优势:

        避免了原型链和构造函数的缺陷 融合他们的优势 成为JavaScript中最经常使用的继承模式

缺点:

        实例和原型上存在两份相同的属性    

Father.prototype.getfaName = function() {  
    console.log(this.faName);
}
function Father(name) {    
    this.faName = 'father';
}
Child.prototype = new Father();
Child.prototype.constructor = Child;
function Child(args) {    
    this.chName = 'child';
    Father.apply(this, args);
}
var child = new Child(); 复制代码

原型式继承    

缺点:

        不能随便改动本身的原型

function create(o){
    function F(){};
    F.prototype = o; 
    return new F();        
}        
var Person = {
    name:'me',            
    hobbies:['riding', 'swimming']  
}
var anotherPerson = create(Person);
var anotherPerson2 = create(Person);
anotherPerson.name = 'her';
anotherPerson.hobbies.push('dancing');        
console.log(anotherPerson2.name, anotherPerson2.hobbies); // her ["riding", "swimming", "dancing"]复制代码

寄生式继承

缺点:

        跟借用构造函数模式同样，每次建立对象都会建立一遍方法。

function createObj(o){   
    let clone = Object.create(o);            
    clone.sayName = function(){ 
        console.log('hi');            
    }
    return clone        
}        
let person = {            
    name:"JoseyDong",            
    hobbies:["sing","dance","rap"]        
}        
let anotherPerson = createObj(person);        
anotherPerson.sayName(); // => hi复制代码

圣杯模式(寄生组合继承)  

// 第一种写法
function inherit(Target, Origin) {   
    // 使用F空函数当子类和父类的媒介 是为了防止修改子类的原型对象影响到父类的原型对象 
    function F() {}
    F.prototype = Origin.prototype;
    Target.prototype = new F(); 
    Target.prototype.constructor = Target; // 防止new的时候 返回实例的构造函数指向混乱  
    Target.prototype.uber = Origin.prototype; // 寻找继承的原型是谁
}

// 第二种写法 采用当即执行函数和闭包的形式
var inherit = (function() {
    function F() {}    
    return function(Target, Origin) {   
        F.prototype = Origin.prototype;
        Target.prototype = new F(); 
        Target.prototype.contructor = Target; 
        Target.prototype.uber = Origin.prototype;
    }
})()复制代码

对象冒充

缺点：

         但对象冒充有个问题，当父类的属性相同时，后面定义的会覆盖前面定义的属性，所以，对象冒充的方式支持父类的属性不一样时的状况下比较合理。

         每次构造函数都要多走一个函数

function Father(color) {        
    this.color = color;        
    this.showColor = function () {            
        alert(this.color);        
    }    
}    
function Father1(color) {        
    this.color1 = color;        
    this.showColor1 = function () {            
        alert(this.color1);        
    }    
}    
function Child(color, color1) {        
    this.Method = Father;        
    this.Method(color);        
    delete this.Method;        
    
    this.Method = Father1;        
    this.Method(color1);        
    delete this.Method;    
}    
var child = new Child("wu", "zhao");    
child.showColor();复制代码

ES6的extends继承写法

class Plane {   
    // 静态方法 不被子集继承 
    static alive() {        
        return true;    
    }    
    constructor(name) {        
        this.name = name || '普通飞机';        
        this.blood = 100;    
    }    
    fly() {        
        console.log('fly');    
    }
};
class AttackPlane extends Plane{    
    constructor(name) {        
        super(name);        
        this.logo = 'duyi';    
x    }    
    dan() {        
        console.log('bububu');    
    }
}
var oAp = new AttackPlane('攻击机');
console.log(oAp);复制代码

注意: 

        子类必须在constructor方法中调用super方法，不然新建实例时会报错。这是由于子类没有本身的this对象，而是继承父类的this对象，而后对其进行加工，若是不调用super方法，子类就得不到this对象。所以，只有调用super以后，才可使用this关键字。

总结ES5与ES6继承的区别?

ES5的继承机制实质是先创造子类的实例对象this，而后再将父类的方法添加到this上面（Parent.call(this)）。

ES6的继承机制实质是先创造父类的实例对象this （因此必须先调用 super() 方法），而后再用子类的构造函数修改this。

你的点赞是我持续输出的动力 但愿能帮助到你们 互相学习 有任何问题下面留言 必定回复