前言

原型和继承一直是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. 在内存中创建一个对象
   
3. 新对象的__proto__赋值为构造函数的prototype
   
4. 构造函数内部的this指向新对象
   
5. 执行构造函数内部代码（给新对象添加属性）
   
6. 如果构造函数返回非空对象，则返回该对象。否则，则返回新创建的对象。
   

通过上面的第二步可以看到，原型的赋值作用在新对象上，只有新对象与原型有关系，人为的在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. 
   
2. this存在于类的构造函数中，this指向实例
   
3. this存在于类的原型对象上，this指向类的原型
   
4. 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. 
   
2. super关键字只能在派生类的构造函数和静态方法上使用，如下所示，Vehicle不是派生类
   

  class Vehicle {

    constructor() {

      // SyntaxError: 'super' keyword unexpected

      super();

    }

  } 

2. 
   
3. 在类构造函数中，不能在调用 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. 
   
4. 如果在派生类中显式定义了构造函数，则要么必须在其中调用 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