应届生都掌握的七种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);复制代码

Father.prototype.getfaName = function() {  
    console.log(this.faName);
}
function Father(name) {    
    this.faName = 'father';
}
function Child(args) {    
    this.chName = 'child';
    Father.apply(this, []);
}
Child.prototype = new Father();
Child.prototype.constructor = Child;
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);
anotherPerson.name = 'her';
anotherPerson.hobbies.push('dancing');        
console.log(anotherPerson.name, Person.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;   
    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;
    }
})复制代码

ES6继承的写法

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';    
    }    
    dan() {        
        console.log('bububu');    
    }
}
var oAp = new AttackPlane('攻击机');
console.log(oAp);复制代码

注意:

1. 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工，如果不调用super方法，子类就得不到this对象。因此，只有调用super之后，才可以使用this关键字。

总结:

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

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

你的点赞是我持续输出的动力 希望能帮助到大家 互相学习 有任何问题下面留言 一定回复