谈谈super关键字有什么作用？

2019年08月21日发布阅读(2920) 作者：Jerman

MDN上的定义

super关键字用于访问和调用一个对象的父对象上的函数。

super.prop和super[expr]表达式在类和对象字面量任何方法定义中都是有效的。

在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前使用。super关键字也可以用来调用父对象上的函数。

super([arguments]); 
// 调用 父对象/父类 的构造函数
super.functionOnParent([arguments]); 
// 调用 父对象/父类 上的方法

ES6的子类class中为什么一定要使用super?

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。

参考：new一个对象时，发生了什么？

ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面，然后再用子类的构造函数修改this。所以必须先调用super方法，否则javascript引擎会报错。

如：

class A {}
class B extends A {
  constructor(){
    // super()
  }
}
const C = new B();

上面代码，在通过new关键字创建一个实例的时候会报如下错误：

  constructor() {
             ^
ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

根本原因：前面讲过，子类class实例的构建是基于父类实例，而只有super方法才能调用父类实例

super()作为方法调用时，只能在constructor里调用，且只能调用一次，否则会报错

`super()`返回的是什么？

作为方法时返回

返回的是子类的实例，通过下面代码，也可以看到返回的是子类B的实例，

class A {}
class B extends A {
  constructor(){
    const sp = super()
    this.sp = sp;
    this.name = 'B';
    console.log(sp===this)  // 打印：true
  }
  getName(){
    console.log(this.sp);  // 打印：B { sp: [Circular], name: 'C' }
  }
}
const C = new B();
C.name = 'C'
C.getName();

作为对象时返回

super作为对象时，在普通方法中，指向父类的原型对象

class A {
  constructor(){
    this.name = '';
  }
  // 普通方法
  getName(){
    return 'A'
  }
}
class B extends A {
  constructor(){
    const sp = super()
    this.sp = sp;
  }
  getName(){
    this.name = 'B'
    // super作为对象，调用普通方法getName
    console.log(super.getName())  //打印: A
  }
}
const C = new B();
C.name = 'C'
C.getName();

上面的结果可以看出，super.getName()调用的是父类A的普通方法getName

在静态方法中，指向父类

class A {
  constructor(){
    this.name = '';
  }
  static getName(){
    return 'static A'
  }
  getName(){
    return 'A'
  }
}
class B extends A {
  constructor(){
    const sp = super()
    this.sp = sp;
  }
  static getName(){
    // 相当于执行A.getName()
    console.log(super.getName()) // 打印: static A
  }
  getName(){
    this.name = 'B'
    // 相当于执行new A().getName()
    console.log(super.getName()) // 打印: A
  }
}
B.getName();
const C = new B();
C.name = 'C'
C.getName();

`super`底层发生了什么？

编辑上面的代码，看看

'use strict';
var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
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.name = '';
  }
  _createClass(A, [{
    key: 'getName',
    value: function getName() {
      return 'A';
    }
  }], [{
    key: 'getName',
    value: function getName() {
      return 'static A';
    }
  }]);
  return A;
}();
var B = function (_A) {
  _inherits(B, _A);
  function B() {
    var _this;
    _classCallCheck(this, B);
    var sp = (_this = _possibleConstructorReturn(this, (B.__proto__ || Object.getPrototypeOf(B)).call(this)), _this);
    _this.sp = sp;
    return _this;
  }
  _createClass(B, [{
    key: 'getName',
    value: function getName() {
      this.name = 'B';
      // 相当于执行new A().getName()
      console.log(_get(B.prototype.__proto__ || Object.getPrototypeOf(B.prototype), 'getName', this).call(this));
    }
  }], [{
    key: 'getName',
    value: function getName() {
      // 相当于执行A.getName()
      console.log(_get(B.__proto__ || Object.getPrototypeOf(B), 'getName', this).call(this));
    }
  }]);
  return B;
}(A);
B.getName();
var C = new B();
C.name = 'C';
C.getName();

编译工具： https://es6console.com/

参考

MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/super

Javascript

目录

谈谈super关键字有什么作用？

MDN上的定义

ES6的子类class中为什么一定要使用super?

`super()`返回的是什么？

作为方法时返回

作为对象时返回

`super`底层发生了什么？

参考

Javascript

目录

谈谈super关键字有什么作用？

MDN上的定义

ES6的子类class中为什么一定要使用super?

super()返回的是什么？

作为方法时返回

作为对象时返回

super底层发生了什么？

参考

`super()`返回的是什么？

`super`底层发生了什么？