基于原型继承

原型实现继承的核心在于通过子类的构造函数中通过Parent.call(this)继承父类的属性,然后改变子类的原型为new Parent() 来继承父类的函数。

  1. //ES5原型链构造对象
  2. //父类
  3. function People(name, age) {
  4. this.name = name || 'pray'
  5. this.age = age || 27
  6. }
  7. //父类方法
  8. People.prototype.sayHi = function () {
  9. console.log(this.name + ' of ' + this.age + ' sayHi')
  10. }
  11. //ES5原型链继承对象
  12. //子类
  13. function Student(name, age) {
  14. //继承父类属性
  15. People.call(this, name, age)
  16. }
  17. //继承父类方法
  18. (function () {
  19. // 创建空类
  20. let Super = function () { };
  21. Super.prototype = People.prototype;
  22. //父类的实例作为子类的原型
  23. Student.prototype = new Super();
  24. })();
  25. //修复构造函数指向问题
  26. Student.prototype.constructor = Student;
  27. let studentObj = new Student();
  28. studentObj.sayHi()

基于Class继承

class实现继承的核心在于使用extends表明继承自哪个父类,并且在子类构造函数中必须调用super继承父类属性和方法

  1. // ES6 Class构造对象
  2. class People {
  3. constructor(name = 'pray', age = 18) {
  4. this.name = name;
  5. this.age = age;
  6. }
  7. sayHi() {
  8. console.log(this.name + ' of ' + this.age + ' says Hi!')
  9. }
  10. }
  11. //ES6 extends 继承父类
  12. class Student extends People {
  13. constructor(name = 'student1', age = '22', score = 90) {
  14. //继承父类属性
  15. super(name, age);
  16. //自身属性
  17. this.score = score;
  18. }
  19. sayHi() {
  20. //继承父类属性方法
  21. super.sayHi()
  22. //自身方法
  23. console.log('score:' + this.score)
  24. }
  25. }
  26. let person = new Student()
  27. person.sayHi()