es6的class extend用es5实现

ES6的class语法

class A {
  constructor(name) {
    this.name = name
  }

  logName() {
    console.log('My name is ' + this.name + '.')
  }
}

class AA extends A {
  constructor(name, age) {
    super(name)
    this.age = age
  }

  logAge() {
    console.log('I\'m ' + this.age + ' years old.')
  }
}

ES5的实现

主要方法：Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的_proto_。

构造函数：在使用子类new一个对象的时候，在其内部先执行父类的构造函数，使用call/apply把this指向子类，并传入参数

继承的原型链：基于父类的prototype对象创建一个子类的prototype对象，此对象的__proto__是父类的prototype

function extend(sub, sup, prototype) {
  sub.prototype = Object.create(sup.prototype)
  sub.prototype.constructor = sub

  for (var k in prototype) {
    sub.prototype[k] = prototype[k]
  }
}

function B(name) {
  this.name = name
}

B.prototype.constructor = B
B.prototype.logName = function() {
  console.log('My name is ' + this.name + '.')
}

function BB(name, age) {
  B.call(this, name)
  this.age = age
}

extend(BB, B, {
  logAge: function() {
    console.log('I\'m ' + this.age + ' years old.')
  }
})

结果打印

var a = new AA('xiaolan', 10)
a.logName() //My name is xiaolan
a.logAge() //I'm 10 years old.

console.log('----------------------------')

var b = new BB('xiaoming', 20)
b.logName() //My name is xiaoming.
b.logAge() //I'm 20 years old.