7 ways easy to understand the inheritance js

To introduce in js inherited method 7

　　Some people think that JavaScript is not truly object-oriented language, in the classic object-oriented language, you may be inclined to define the class object, then you can simply define which type (Reference which classes inherit C ++ inheritance of some simple example of) , JavaScript using another set of implementation, not through inheritance object functions copied, but through the prototype chain to inherit

First, the prototype chain to inherit

// prototype inheritance chain 
function the Person (name, Age) {
     the this .name = name;
     the this .age = Age; 
} 
Person.prototype.show = function () { 
    console.log ({ `I $ the this .name} , I am {$ the this .age `}) 
} 
function Worker (name, Age, the Job) { 
    Person.call ( the this , name, Age);
     the this .job = the Job; 
} 
// prototype object if Woker here methods, because the prototype redirection, the following code will cover the second method 
Worker.prototype = new new the Person ();
 // should write here 
Worker.prototype.showJob =function () { 
        the console.log ( `my job is {$ the this .job`}) 
}; 
var Mine = new new the Worker ( 'good', 18, 'writing code' ); 
the console.log (Mine); 
Mine. Show (); 
mine.showJob ();

Problems:

1. Subclasses can override a method on the parent class prototype, Woker.prototype .__ proto __ show = null, this time on a prototype method of Person object changes.;

2. The parent class public attributes and private attributes subclass have become public property;

3. If there is original prototype object attributes and methods subclass, after Woker.prototype = new Person (), before the method can no longer be obtained;

Prototype redirection explains: Woker.prototype = new Person ();

1. open up their own heap memory is not the constructor property, resulting in the prototype class constructor missing (resolve: to manually increase in the constructor property heap memory)

2. When the prototype redirect, the default browser opens up a prototype of the heap memory will be freed, if you've stored some methods or properties, these things are lost (so: a prototype built-in class is not allowed to redirect to their own open up heap memory, because many properties built onto an internal class prototype, redirecting gone, this is not allowed)

Second, borrowing constructor inheritance

function Person(name, age){
      this.name=name;
      this.age=age;
}
function Worker(name, age, job){
      Person.call(this, name, age);
      this.job=job;
}
var mine=new Worker('佳', 18, '写代码的');
console.log(mine);

Advantages: 1 with respect to the prototype chain, borrow constructor has a big advantage, which can pass arguments to a constructor supertype subtype constructor.

Disadvantages: 1, can only inherit the properties of the parent class constructor.

　　　2, can not achieve multiplexing constructor. (Each with every time recall)

　　　3, each new instance of the parent class has a copy constructor, bloated.

Third, the combination of inheritance (inheritance chain and prototype composition borrow constructors inherited) (common)

// 组合继承
function Person(name,age) {
    this.name=name;
    this.age=age;
}
Person.prototype.show=function() {
        console.log(`我是${this.name},我今年${this.age}`)
}
function Worker(name, age, job) {
    Person.call(this, name, age);
    this.job=job;
}
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
Worker.prototype.showJob=function () { 
    the console.log ( `my job is this.job} {` $) 
}; 
var Mine = new new the Worker ( 'good', 18 'odd jobs' ); 
the console.log (Mine); 
Mine. Show (); 
mine.showJob ();

Focus: combines the advantages of the two modes, mass participation and reuse

Advantages: 1, can inherit the properties of the parent class prototype, parameters can be transferred, reusable.

　　　2, the attributes of each new instance constructor is private introduced.

Disadvantages: called twice parent class constructor (memory consumption), constructor of the subclass will replace the parent class constructor in the prototype.

Fourth, the prototypal inheritance

// prototypes of formula inheritance 
function Woker (O) {
     function Empty () {}; 
    Empty.prototype = O;
     return  new new Empty (); 
} 
var Mine = { 
    name: 'Jia' , 
    Age: 18 is , 
    Job: 'handyman ' 
}; 
var anotherMine = Woker (Mine);

Focus: Packaging a function of an object, and then return to the calling function, this function becomes free to add a property or an instance of an object. object.create () is the principle.

Features: Similar to copy an object, use the function to wrap.

Disadvantages: 1, all instances will inherit property on the prototype.

　　　2, can not achieve multiplexing. (Examples of new properties are added later)

var woker = { 
    name: 'Jia' , 
    Age: 18 is , 
    Job: 'handyman' 
} 
var Mine = the Object.create (woker);

Principle the same as above, ECMAScript 5 by the Object.create new () method inherited, normalized prototype.

Object.create: Built-in Object class method comes naturally

1. Create an empty object

2. Let empty the newly created object to an object of __proto__ first passed in (to the newly created object passed as an empty object's prototype)

V. Parasitic inheritance

// Parasitic inherit 
function createAnother (O) {
     var Person = Woker (O); 
    person.show = function () { 
        the console.log ( `I jia`) 
        } 
    return Person; 
} 
var Mine = { 
    name: 'Jia ' , 
    Age: 18 is , 
    Job: ' handyman ' 
}; 
var anotherMine = createAnother (Mine);

Focus: that is to set out a prototype formula inherited a shell.

Pros: not created a custom type, because it is only a shell set up to return the object (this), the new object this function has become a matter of course created.

Cons: useless to prototype, can not be reused.

It may also be the Object.create () method implementation

Sixth, parasitic combined inheritance

  //寄生组合式继承
function inheritProto(parents,child){
      var o=Object.create(parents.prototype);
       o.constructor=child;
       child.prototype=o;
}
//父类构造函数
function Parents(surname){
       this.surname=surname;
}
Parents.prototype.getSurname=function(){
       console.log(this.surname);
}
//子类构造函数
function Child(surname,age){
        Parents.call(this,surname);
        this.age=age;
}
inheritProto(Parents,Child);

Child.prototype.getAge=function(){
         console.log(this.age);
}

Combined parasitic inheritance, set Parasitic inheritance and composition with an inherited advantages, the most effective way to achieve based on the type inheritance. YUI's YAHOO.lang.extend () method uses a combination of parasitic inheritance, so that this model for the first time in a very widely used JavaScript library. To learn more about YUI, visit http: // developer yahoo.com/yui/..

Seven, ES6 the Class inheritance

class Person{
    constructor(name, age){
        this.name=name;
        this.age=age;
    }
    show(){
        alert(this.name);
        alert(this.age);
    }
}

class Worker extends Person{
    constructor(name, age, job){
        super(name, age);
        this.job=job;
    }
    showJob(){
        alert(this.job);
    }
}
let me=new Worker('jia', 18, '前端攻城狮');
me.show();
me.showJob();

Well, 7 common JS inherited methods introduced over. ~~

7 ways easy to understand the inheritance js

Guess you like