js继承详解

此篇文章为大家讲解es5继承和es6继承的实现和区别

首先我们来看一下es5和es6继承的图，再结合代码来让大家深刻理解
左边是es5继承，右边是es6继承

代码实现

1、es5的继承

function F () {
  this.name = 'f'
}
F.prototype.test = function () {
  console.log('ffffff')
}

function S () {
  F.call(this)
}

S.prototype = new F()

S.prototype.fn = function () {
  console.log('ssssss')
}

let s = new S()
s.test()

// 验证es5继承中，子原型的__proto__是指向父的原型
console.log(s.__proto__.__proto__ === F.prototype) // true
console.log(S.prototype.__proto__ === F.prototype) // true

2、es6继承

class F {
  constructor () {
    this.name = 'f'
  }
  test () {
    console.log('fffffff')
  }
}

class S extends F {
  // 不写constructor，自动生成，如果写了constructor，记得要写super()
  constructor () {
  	super() // 如果不写super，子是没有this的，会直接报错
  }
  fn () {
    console.log('sssssss')
  }
}

let s = new S()
s.test()

// 验证es6中子构造函数的__proto__指向父构造函数，子原型的__proto__指向父的原型
console.log(s.__proto__.__proto__ === F.prototype) // true
console.log(S.prototype.__proto__ === F.prototype) // true
console.log(S.__proto__ === F) // true

es6的：
class Sub extends Super {} 是这样实现的
function Super(){}
let Sub = Object.create(Super)
所有：Sub.__proto__ === Super;//true

es5和es6继承的区别
1、ES5 和 ES6 子类 this 生成顺序不同。ES5 的继承先生成了子类实例，再调用父类的构造函数修饰子类实例，ES6 的继承先生成父类实例，再调用子类的构造函数修饰父类实例。这个差别使得 ES6 可以继承内置对象
2、es5继承中，子有自己的this,是使用了call函数来实现继承的，而es6中子继承时是没有自己的this的，只有在constructor中执行了super超函数后才会拥有自己的this
3、es6继承比较es5继承，通过extends多了一个子构造函数的__proto__指向父的构造函数的指针

还有其他不同的地方：
1、class类似let 没有变量提升
2、class的方法不能枚举
3、class方法没有prototype
4、class内部不能重写类名