javascript - ES6 super方法问题

Question

react.js代码中经常出现class和super，

class Todo extends Component{
    constructor(props){
        super(props)
    }
}

这里的super(props)什么作用？

Answer 1

首先 JavaScript 中 class 是 es6 特性，但是也是在 es5 基础上实现的，可以看做是一个 魔法糖语法（sugar）。其还是不会离开 javascript 中的原型链继承特性。

class A {
    constructor() {
        this.type = "a"
    }
    
    say(msg) {
        console.log(`${this.type} say ${msg}`)
    }
}

单独上面的输入，在 babeljs.io/repl 中翻译成 es5 语法内容如下：

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var A = function () {
  function A() {
    _classCallCheck(this, A);

    this.type = "a";
  }

  _createClass(A, [{
    key: "say",
    value: function say(msg) {

      console.log(this.type + " say " + msg);
    }
  }]);

  return A;
}();

可以看到在构造函数中，那个 this 代表的是 instance。

_classCallCheck(instance, Constructor)

具体的特点，我也不是很清楚。如果使用另外一个类 B 去继承 A，显示效果可以看出区别。

class B extends A {
    
    constructor() {
        super()
        this.type = "b"
    }
    
}

var b = new B()
b.say("hi") // b say hi

// 如果注释掉B中的constructor函数，那么 b.say() 输出  a say hi

具体原因我没有深究，只是参考了这篇文章

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

Answer 2

extends 表示从父类继承，constructor 里的 super 表示父类的构造函数。

Answer 3

在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例。