深入理解JavaScript原型和继承

前言

原型和继承一直是js中非常基础和重要的部分，我们来看看日常开发中经常会用到的原型和继承。

  class Person extends React.Component {
    componentDidMount() {}
    render() {}
  }

这行代码代码大家都很熟悉，Person通过extends关键字继承了React的特性，componentDidMount和render在class类中的是一个普通定义好的函数。特殊的是，它们也是在Component中提前定义好的钩子函数，用于在某个固定的时机触发。

看完了基本的使用，下面我们一起来深入探索下class和extends。

class只是一个语法糖

class是ES6中引入的概念，我们也称它为类。class的用途是作为对象模版，用来创建对象。但需要明确的是，class只是一个语法糖，它内部实现上还是和ES5创建对象是相同的。由于class的写法更加符合面向对象编程的习惯，所以被推广使用，逐步替代了ES5中的对象创建。

   console.log(typeof React.Component); // function

ES5是通过构造函数函数来创建对象，React.Component的类型同样是一个function，所以想要完全搞清楚对象和原型，还是要去学习下ES5中对象的创建。后面有一篇文章是关于ES5中对象的创建和继承，有需要的大家可以自己去看，这里就不展开说了。

class与构造函数的对比

class的本质还是构造函数，但是与构造函数又有些许使用上的不同。

相同点

定义方式

class与构造函数都有两种定义方式，声明和表达式，这两种写法完全等价。且名称都必须大写，以区别于它创建的实例.

  // 函数声明
  function Person() {};
  // 函数表达式
  let Person = function () {};
  
  // 类声明
  class Person {}
  // 类表达式
  let Person = class {};
  
  // 创建实例(函数和类)
  let person = new Person();

通过name访问原表达式。

表达式赋值时，可通过name访问原表达式。

  let Student = function Person() {};
  // 通过name属性获取类表达式的名称
  console.log(Student.name); // Person

  let Student = class Person {};
  // 通过name属性获取类表达式的名称
  console.log(Student.name); // Person

表达式外部，无法访问原表达式

 let Student = function Person() {};
  // 外部无法访问类表达式
  console.log(Person); // Person is not defined

  let Student = class Person {};
  // 外部无法访问类表达式
  console.log(Person); // Person is not defined

不同点

类不可以变量提升

  // 声明
  console.log(Person); // 报错
  console.log(Student); // ƒ Student() {}

  class Person {}
  function Student() {}

  console.log(Person); // class Person {}
  console.log(Student); // ƒ Student() {}
  
  // 表达式定义
  console.log(Person); // undefined
  console.log(Student); // undefined

  var Person = class {};
  var Student = function () {};

  console.log(Person); // class {}
  console.log(Student); // ƒ () {}

类受块级作用域限制

  {
    class Person {}
    function Student() {}
  }
  console.log(Person); // 报错，Person is not defined
  console.log(Student); // ƒ Student() {}

类必须通过new来调用

类必须通过new来调用，否则会报错。构造函数不使用new调用也可以，就会把全局的this作为内部对象。

  function Person() {}
  class Animal {}

  let p = Person(); // Person内部this指向window
  let a = Animal(); // TypeError: class constructor Animal cannot be invoked without 'new'

class的实例化

class实例化的时候，会调用class中的constructor函数。constructor是类的默认方法，如果没有定义，constructor方法会被默认添加。

  class Bar {}
  等同于
  class Bar {
    constructor() {}
  }

constructor方法会默认返回一个实例对象（即this），也可以完全返回另一个对象。但返回另一个对象，会导致返回的对象不是Bar的实例(因为它的原型指针没有被更改，具体的原因后面分析)。

  // 返回一个对象
  class Bar {
    constructor() {
      return {
        name: 1,
      };
    }
  }

  let bar = new Bar();
  console.log(bar); // {name: 1}
  console.log(bar instanceof Bar); // false
  
  // 返回默认对象
  class Bar {
    constructor() {}
  }

  let bar = new Bar();
  console.log(bar); // Bar {}
  console.log(bar instanceof Bar); // true

前面说到了，如果手动返回了一个对象，会导致返回的对象不是class的实例。那么我们看看生成一个对象的过程是什么样的，为什么手动返回一个对象，这个对象就不是类的实例了。

实例化的过程:

1. 在内存中创建一个对象
2. 新对象的__proto__赋值为构造函数的prototype
3. 构造函数内部的this指向新对象
4. 执行构造函数内部代码（给新对象添加属性）
5. 如果构造函数返回非空对象，则返回该对象。否则，则返回新创建的对象。

通过上面的第二步可以看到，原型的赋值作用在新对象上，只有新对象与原型有关系，人为的在constructor返回的对象，与原型毫无关联，自然不是class的实例。

数据共享

定义在constructor中的属性，是每个实例独有的，不会在原型上共享。

  class Person {
    constructor() {
      this.name = new String("Jack");
      // 定义在constructor中的函数是不被原型共享的
      this.sayName = () => console.log(this.name);
      this.nicknames = ["Jake", "J-Dog"];
    }
  }
  let p1 = new Person();
  let p2 = new Person();
  console.log(p1.name === p2.name); // false
  console.log(p1.sayName === p2.sayName); // false
  console.log(p1.nicknames === p2.nicknames); //false

实例化的时候相当于复制了一个新函数

  class Person {
    constructor() {
      this.name = new String("Jack");
      this.sayName = new Function();
      this.nicknames = new Array(["Jake", "J-Dog"]);
    }
  }

如果想在实例间共享方法，类定义语法把在类块中定义的方法作为原型方法。

  class Person {
    constructor() {
      // 定义在constructor中的方法是属于每个实例的
      this.locate = () => console.log("instance");
    }
    // 定义在类块中的方法是所有实例共享的
    test() {
      console.log("test");
    }
  }

  let person1 = new Person();
  let person2 = new Person();
  console.log(person1.locate === person2.locate); // false
  console.log(person1.test === person2.test); // true
  // 实例中有该属性
  console.log(person1.hasOwnProperty("locate")); // true
 // 实例中没有该属性
  console.log(person1.hasOwnProperty("test")); // false

类的静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

作用

在日常开发中，我会通过类的静态方法去处理一些名称管理和接口，如下面所示：

  class Home {
    static getData() {
      return [];
    }
  }
  console.log(Home.getData());

静态方法中的this至与类有关

需要注意的是，静态方法不要求存在类的实例，所以this引用类自身，而不是实例。

  class Bar {
    static test() {
      console.log(this);
    }
  }
  // 类可以直接调用静态方法
  Bar.test(); // class Bar {}

  var bar = new Bar();
  // 实例与静态方法无关
  bar.test(); // 报错，bar.test is not a function

静态方法也可被继承

  class Bar {
    static test() {
      console.log(this);
    }
  }

  class Foo extends Bar {}
  Foo.test(); // class Foo extends Bar {}

静态方法也是可以从super对象上调用的

  class Bar {
    static test() {
      return "test1";
    }
  }

  class Foo extends Bar {
    static test2() {
      return super.test() + " test2";
    }
  }
  console.log(Foo.test2()); // test1 test2

类中this指向

1. this存在于类的构造函数中，this指向实例
2. this存在于类的原型对象上，this指向类的原型
3. this存在于类的静态方法中，this指向当前类

类的继承

类的继承使用的是新语法，但它的本质依旧是原型链。

ES6中，使用extends关键字，就可以继承任何拥有constructor和原型的对象。所以它不仅可以继承一个类，还可以继承普通的构造函数。

  class Vehicle {}
  // 继承类
  class Bus extends Vehicle {}
  let b = new Bus();
  console.log(b instanceof Bus); // true
  console.log(b instanceof Vehicle); // true
  function Person() {}
  // 继承普通构造函数
  class Engineer extends Person {}
  let e = new Engineer();
  console.log(e instanceof Engineer); // true
  console.log(e instanceof Person); // true

super

派生类的方法可以通过 super 关键字引用它们的原型。这个关键字只能在派生类中使用，在类构造函数中使用 super 可以调用父类构造函数。

提炼几个要点:

1.super关键字只能在派生类的构造函数和静态方法上使用，如下所示，Vehicle不是派生类

  class Vehicle {
    constructor() {
      // SyntaxError: 'super' keyword unexpected
      super();
    }
  } 

2.在类构造函数中，不能在调用 super()之前引用 this。

  class Vehicle {}
  class Bus extends Vehicle {
    constructor() {
      console.log(this);
    }
  }
  new Bus();
  // Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

3.如果在派生类中显式定义了构造函数，则要么必须在其中调用 super()，要么必须在其中返回一个对象。

  class Vehicle {}

  class Car extends Vehicle {}
  console.log(new Car()); // Car {}

  class Bus extends Vehicle {
    constructor() {
      super();
    }
  }
  console.log(new Bus()); // Bus {}

  class Van extends Vehicle {
    constructor() {
      return {};
    }
  }
  console.log(new Van()); // {}

  class Test extends Vehicle {
    constructor() {}
  }
  console.log(new Test()); 
  // Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor