Front-end interview must test eight kinds of JS prototype inheritance method

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();

Copy the code

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);Copy the code

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(); Copy the code

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"]Copy the code

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(); // => hiCopy the code

// The first wayfunctionInherit (Target, Origin) {// Use the F null function as the medium of the subclass and its parent class to prevent modifying the subclass's prototype object from affecting the parent class's prototype objectfunction F() {} F.prototype = Origin.prototype; Target.prototype = new F(); Target.prototype.constructor = Target; Uber = origine.prototype; // Prevent new from returning the instance constructor from pointing to a cluttered target.prototype. uber = origine.prototype; Inherit = (inherit) {inherit = (inherit) {inherit = (inherit) {inherit = (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;
    }
})()Copy the code

Object to pretend to be

Disadvantages:

However, there is a problem with object impersonation. When the attributes of the parent class are the same, the attributes defined later will overwrite those defined earlier. Therefore, object impersonation is more reasonable when the attributes of the parent class are different.

Each constructor takes one more function

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();Copy the code

ES6 extends inheritance

Class Plane {// Static methods do not inherit static from collectionsalive() {        
        return true;    
    }    
    constructor(name) {        
        this.name = name || 'Ordinary aircraft';        
        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('Attack plane');
console.log(oAp);Copy the code

Note:

Subclasses must call the super method from the constructor method or they will get an error when creating a new instance. This is because the subclass doesn’t have its own This object. Instead, it inherits the parent’s this object and processes it. If you don’t call super, the subclass doesn’t get this. Therefore, the this keyword can only be used after super is called.

To summarize the differences between ES5 and ES6 inheritance?