深入浅出js实现继承的7种方式

给大家介绍7中js继承的方法

　　有些人认为JavaScript并不是真正的面向对象语言，在经典的面向对象语言中，您可能倾向于定义类对象,然后您可以简单地定义哪些类继承哪些类（参考C++ inheritance里的一些简单的例子），JavaScript使用了另一套实现方式，继承的对象函数并不是通过复制而来，而是通过原型链继承

一、原型链继承

// 原型链实现继承
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;
}
// 如果此处有Woker的原型对象上的方法，由于原型重定向，下面的代码会覆盖此方法
Worker.prototype = new Person();
// 应该写在此处
Worker.prototype.showJob=function() {
        console.log(`我的工作是${this.job}`)
};
var mine = new Worker('佳', 18, '写代码');
console.log(mine);
mine.show();
mine.showJob();

存在的问题：

1.子类可以重写父类原型上的方法，Woker.prototype.__proto__.show=null, 此时已改变Person的原型对象上的方法;

2.父类的私有属性和公有属性都变成子类的公有属性;

3. 如果子类的原型对象上原本有属性和方法，Woker.prototype = new Person()后，之前的方法无法再获取到;

 

解释原型重定向:  Woker.prototype = new Person();

1.自己开辟的堆内存中没有constructor属性,导致类的原型构造函数缺失（解决：自己手动在堆内存中增加constructor属性）

2.当原型重定向后，浏览器默认开辟的那个原型堆内存会被释放掉，如果之前已经存储了一些方法或者属性，这些东西都会丢失（所以：内置类的原型不允许重定向到自己开辟的堆内存，因为内置类原型上自带很多属性方法，重定向后都没了，这样是不被允许的）

 

二、借用构造函数继承

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

优点：1. 相对于原型链而言，借用构造函数有一个很大的优势，即可以在子类型构造函数中向父类型构造函数传递参数。

缺点：1、只能继承父类构造函数的属性。

　　　2、无法实现构造函数的复用。（每次用每次都要重新调用）

　　　3、每个新实例都有父类构造函数的副本，臃肿。

 

三、组合继承（组合原型链继承和借用构造函数继承）（常用）

// 组合继承
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 (){
    console.log(`我的工作是${this.job}`)
};
var mine = new Worker('佳', 18, '打杂的');
console.log(mine);
mine.show();
mine.showJob();

重点：结合了两种模式的优点，传参和复用

优点：1、可以继承父类原型上的属性，可以传参，可复用。

　　　2、每个新实例引入的构造函数属性是私有的。

缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。

 

四、原型式继承

// 原型式继承
function Woker(o){
    function Empty(){};
    Empty.prototype = o;
    return new Empty();
}
var mine = {
    name: 'jia',
    age: 18,
    job: '打杂的'
};
var anotherMine =Woker(mine);

重点：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。

特点：类似于复制一个对象，用函数来包装。

缺点：1、所有实例都会继承原型上的属性。

　　　2、无法实现复用。（新实例属性都是后面添加的）

var woker={
    name: 'jia',
    age: 18,
    job: '打杂的'
}
var mine = Object.create(woker);

原理和上面相同，ECMAScript 5 通过新增 Object.create()方法规范化了原型式继承。

 Object.create：内置Object类天生自带的方法

1.创建一个空对象

 2.让新创建的空对象的__proto__指向第一个传递进来的对象（把传入的对象作为新创建空对象的原型）

 

五、寄生式继承

// 寄生式继承
function createAnother(o) {
    var person = Woker(o);
    person.show=function() {
        console.log(`我是jia`)
        }
    return person;
}
var mine = {
    name: 'jia',
    age: 18,
    job: '打杂的'
};
var anotherMine = createAnother(mine);   

重点：就是给原型式继承外面套了个壳子。

优点：没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。

缺点：没用到原型，无法复用。

也可用 Object.create()方法实现

 

六、寄生组合式继承

  //寄生组合式继承
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);
}

寄生组合式继承，集寄生式继承和组合继承的优点与一身，是实现基于类型继承的最有效方式。YUI 的 YAHOO.lang.extend()方法采用了寄生组合继承，从而让这种模式首次 出现在了一个应用非常广泛的 JavaScript 库中。要了解有关 YUI 的更多信息，请访问 http://developer. yahoo.com/yui/。

 

七、ES6的Class实现继承

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

 好啦，常见的7种JS继承的方法介绍完了。~~