JavaScript 中原型链中 Babel 继承怎么编译-js教程-PHP中文网

babel 将 es6 class 继承编译为 es5 时，核心机制是调用 inherits 函数建立原型链，并使用 _possibleconstructorreturn 处理构造函数执行后的返回值检查。具体做法是在子类定义前，通过 object.create 将子类的原型指向父类原型，从而完成继承关系的绑定。

JavaScript 中原型链中 Babel 继承怎么编译

子类原型如何指向父类原型

在编译后的代码中，inherits 函数负责建立原型链。它首先创建一个空对象，将其原型设置为父类原型，然后将该对象赋值给子类的原型属性。这样，子类实例就能访问到父类的方法。

JavaScript 中原型链中 Babel 继承怎么编译

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };
  return _setPrototypeOf(o, p);
}

上述代码展示了 Babel 生成的 _inherits 和辅助函数 _setPrototypeOf。当编译器遇到 class Child extends Parent 时，会生成类似 _inherits(Child, Parent) 的调用。如果环境支持 Object.setPrototypeOf，则使用该方法设置原型；否则回退到 __proto__。注意，这里 subClass.prototype 被重新赋值为一个继承了 superClass.prototype 的新对象，同时修正了 constructor 属性指向子类自身，防止实例化时类型错误。

构造函数中的 super 调用如何处理

子类构造函数在执行时，必须显式调用 super() 来执行父类构造函数。Babel 编译后，这表现为对父类构造函数的直接调用，并将结果传递给 _possibleConstructorReturn。如果父类构造函数返回了一个非原始类型的对象，则该对象将取代默认的 this。

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

JavaScript 中原型链中 Babel 继承怎么编译

var Child = /*#__PURE__*/function (_Parent) {
  _inherits(Child, _Parent);
  function Child() {
    var _this;
    _classCallCheck(this, Child);
    _this = _possibleConstructorReturn(this, _getPrototypeOf(Child).__proto__.constructor.apply(this, arguments));
    return _this;
  }
  return _createClass(Child);
}(Parent);

在 Child 构造函数内部，_possibleConstructorReturn 接收 this 和父类构造函数的返回值。如果父类构造函数返回的是一个对象（例如 {}），那么 _this 将被替换为该对象，且后续的 this.xxx 操作将作用于该新对象而非初始化的实例。这种机制确保了 JavaScript 继承语义的完整性，特别是在父类构造函数有特殊返回值行为时。