【前端笔记】浅谈js继承

我们先想想我们用js最后要怎样实现面向对象的编程。事实上我们必须用上原型链这种东西。

我们的父类superType有属性和方法，并且一些能被子类subType继承，一些能被覆盖，但是丝毫不会影响到父类。那么我们可以这样定义：父类子类同时拥有独立的属性，但是共享父类被继承的方法。

继承是靠prototype实现的。

class实现

我们最理想化的js面向对象es6已经帮我们做出来了，我们可以先试下es6的，然后再用es5实现这种效果。

class Person {
  constructor(age) {
    this.age = age;
  }
  getAge() {
    console.log(`${this.age} yrs old`);
  }
}
class Student extends Person{
  constructor(name, age) {
    super(age);
    this.name = name;
  }
  getName() {
    console.log(`his name is ${this.name}`);
  }
}
var person1 = new Person(11);
var tom = new Student('tom',16)

可见，Person作为父类，拥有age和getAge()两个可以被继承的属性和方法，子类Student调用super()就可以继承他的属性age，并且拥有自己独立的属性name，两者的属性不冲突，以及共有的方法getAge()，独立方法getName()。

到这里我们还看不出什么眉目，因为看起来是如此的简单。现在我们来复杂化一下，来看这里涉及的prototype和constructor。

分析

由Person新建出来的对象person1，person1.constructor是Person，person1.[[prototype]]是{constructor,getAge}，而Person.prototype也是{constructor,getAge}，而Person.prototype.constructor是Person；

由Student新建的对象tom，tom.constructor是Student，tom.[[prototype]]是{constructor,getName}，Student.prototype也是{constructor,getName}，Student.prototype.constructor是Student，来到这里，没什么不同，但是原型链的魅力就在于，原型可以串成一条链，此时为什么tom能访问到getAge这个函数，正是因为tom的原型{constructor,getName}里还有一个原型{constructor,getAge}，也就是tom.[[prototype]].[[prototype]]是Person.prototype。

传统方法实现

弄到这里我们清楚我们要怎么做了。就是新建一个构造函数，指定它的属性和原型函数。然后把它的原型弄出来作为一个新的对象，将这个对象的constructor指定为新的构造函数，这样新的prototype就做好了，大家可以共用方法。再来新建一个构造函数，用call方法借用父类构造函数，复制它的属性，在把prototype指定为刚刚建好的prototype。这样就大功告成，新的子类拥有父类的属性，并且不影响父类的属性，还能有自己的属性，同时继承了父类的方法，不必重复声明相同的函数浪费空间。

/**
 * 寄生组合
 */
// 复制一个对象作为新对象的prototype，返回新对象
function object(o) {
  function F(){};
  F.prototype = o;
  return new F();
}
// 复制父类的原型作为新的原型，新的原型指定子类为构造函数，子类指定新的原型为原型
function inheritPrototype(subType, superType) {
  var prototype = object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}
// 父类属性
function Person(age) {
  this.age = age;
  this.course = ['english','math'];
}
// 父类原型
Person.prototype.getAge = function() {
  console.log(`${this.age} yrs old`);
}
// 子类，借用函数复制父类属性
function Student(name, age) {
  Person.call(this, age);
  this.name = name;
}
// 给子类以父类的原型
inheritPrototype(Student, Person);
// 定义子类的原型方法
Student.prototype.getName = function() {
  console.log(`his name is ${this.name}`);
}
var tom = new Student('tom',16)

个人愚见，不喜勿喷，欢迎指导和交流。