首页 > ES6 super方法问题

ES6 super方法问题

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

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

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


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


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


首先 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。

【热门文章】
【热门文章】