ES5与ES6 的继承差异

先简单看看ES5中磨人的继承

ES5的继承有许多方式：大概分为 原型链继承，借用构造函数继承，组合继承，原型继承，寄生式继承，寄生组合式继承，我有博客专门详解过，我们这里就拉出一些经典的简单复习一下：有点迷的话请戳这里:js之各种继承

1. 原型链继承

  // 定义父类
    function Parent(name) {
        this.name = name;
    }

    Parent.prototype.getName = function() {
        return this.name;
    };

    // 定义子类
    function Children() {
        this.age = 24;
    }

    // 通过Children的prototype属性和Parent进行关联继承

    Children.prototype = new Parent('陈');

    // Children.prototype.constructor === Parent.prototype.constructor = Parent

    var test = new Children();

    // test.constructor === Children.prototype.constructor === Parent

    test.age // 24
    test.getName(); // 陈

2. 借用构造函数继承

  // 定义父类
    function Parent(value) {
        this.language = ['javascript', 'react', 'node.js'];
        this.value = value;
    }
    
    // 定义子类
    function Children() {
    	Parent.apply(this, arguments);
    }

    const test = new Children(666);

    test.language // ['javascript', 'react', 'node.js']
    test.value // 666

3. 寄生组合式继承

function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
    console.log(this.name)
}

function Child (name, age) {
    Parent.call(this, name);
    this.age = age;
}

function object(o) { // 相当于制作了一个parent的副本
    function F() {}
    F.prototype = o;
    return new F();
}

function extend(child, parent) {
    var prototype = object(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}

extend(Child, Parent);
var child1 = new Child('kevin', '18');
console.log(child1);

ES6中的继承

接下来我们来康一康ES6中的继承，它更加的简洁，并且更靠近Java等语言的继承：

 // 定义父类
    class Father { // 不同处1：采用class关键字来定义父类
        constructor(name, age) { // 不同处2：类的默认方法，没有显式定义时会默认建造一个空的constructor
            this.name = name;
            this.age = age;
        }

        show() {
            console.log(`我叫:${this.name}， 今年${this.age}岁`);
        }
    };

    // 不同处3：通过extends关键字实现继承
    class Son extends Father {
    	constructor(x,y,like) {
    		super(x,y); // 不同处4：子类必须在constructor方法中调用super()方法，目的是继承父类的this
            this.like = like;
        }

        say() {
            super.show() // 调用父类方法
        	console.log(`我喜欢${this.like}`)
        }
    };

    let son = new Son('筱筱', 20, '撸猫');
    
    son.say(); 
// 我叫筱筱 今年20岁
// 我喜欢撸猫

根据上面的代码，我们可以总结出来：

写法上的区别有：

1. 采用class关键字来定义父类
2. constructor是类的默认方法，没有显式定义时会默认建造一个空的constructor
3. 通过extends关键字实现继承
4. 子类必须在constructor方法中调用super()方法

然后它还有一些区别：

class 声明会提升，但不会初始化赋值。

Foo 进入暂时性死区，类似于 let、const 声明变量。

// ES5
const bar = new Bar(); // it's ok
function Bar() {
  this.bar = 42;
}

// ES6
const foo = new Foo(); // ReferenceError: Foo is not defined
class Foo {
  constructor() {
    this.foo = 42;
  }
}

类内部方法都变的不可枚举

// ES5
// 引用一个未声明的变量
function Bar() {
  this.bar = 42;
}
Bar.answer = function() {
  return 42;
};
Bar.prototype.print = function() {
  console.log(this.bar);
};
const barKeys = Object.keys(Bar); // ['answer']
const barProtoKeys = Object.keys(Bar.prototype); // ['print']

// ES6
class Foo {
  constructor() {
    this.foo = 42;
  }
  static answer() {
    return 42;
  }
  print() {
    console.log(this.foo);
  }
}
const fooKeys = Object.keys(Foo); // []
const fooProtoKeys = Object.keys(Foo.prototype); // []

必须使用new来调用类

// ES5
function Bar() {
  this.bar = 42;
}
const bar = Bar(); // it's ok

// ES6
class Foo {
  constructor() {
    this.foo = 42;
  }
}
const foo = Foo(); // TypeError: Class constructor Foo cannot be invoked without 'new'

_proto_属性的差异

// ES6
class Super {}
class Sub extends Super {}

const sub = new Sub();

// Sub.__proto__ === Super;
// 子类可以直接通过 __proto__ 寻址到父类。

// ES5
function Super() {}
function Sub() {}

Sub.prototype = new Super();
Sub.prototype.constructor = Sub;

var sub = new Sub();

Sub.__proto__ === Function.prototype;