扩展JavaScript（jQuery）ekko-lightbox库时触发TypeError错误

看起来你在尝试通过ES6类继承扩展ekko-lightbox的功能，但遇到了TypeError，这主要是没搞清楚jQuery插件的继承逻辑，以及父类属性初始化的时机问题。咱们一步步拆解问题，再给出可行的解决方案。

先说说你代码里的两个核心问题： #

• 错误的继承姿势：jQuery.fn.ekkoLightbox本质是jQuery插件的构造函数，它不是为ES6类直接继承设计的，直接用extends会让实例化逻辑混乱——毕竟jQuery插件是通过$(element).ekkoLightbox()这种方式创建实例，不是直接new的。
• 过早访问未初始化的属性：你在super()之后立刻访问this._$modalHeader，但这个属性是父类在init方法里才初始化的，此时父类的初始化流程还没走完，这个属性根本不存在，自然会触发TypeError。

下面给你两种靠谱的扩展方式： #

方式1：直接修改原型（推荐，更贴合jQuery插件的设计）

这种方式不需要创建新类，直接修改原插件的原型方法，既简单又不容易出错：

import ekkoLightbox from 'ekko-lightbox';

// 保存原有的init方法，避免覆盖后丢失逻辑
const originalInit = jQuery.fn.ekkoLightbox.prototype.init;

// 重写init方法，先执行父类逻辑，再添加自定义操作
jQuery.fn.ekkoLightbox.prototype.init = function() {
  // 调用原init方法完成父类初始化
  originalInit.apply(this, arguments);
  
  // 现在可以安全访问已经初始化的_$modalHeader了
  const firstHeaderChild = this._$modalHeader[0].children[0];
  $(firstHeaderChild).replaceWith('');
};

export default ekkoLightbox;

调用的时候还是用原来的方式就行：

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
  event.preventDefault();
  $(this).ekkoLightbox();
});

方式2：ES6类继承（适配jQuery插件逻辑）

如果你坚持要用类继承，就得适配jQuery插件的实例化规则，确保父类能拿到必要的参数，并且在正确的时机操作属性：

import ekkoLightbox from 'ekko-lightbox';

class ExtendedEkkoLightbox extends jQuery.fn.ekkoLightbox {
  constructor(element, options) {
    // 父类构造函数需要接收element和options两个参数，必须传对
    super(element, options);
  }

  // 重写init方法，在父类初始化完成后执行自定义逻辑
  init() {
    super.init();
    // 这里_$modalHeader已经被父类初始化了
    const firstHeaderChild = this._$modalHeader[0].children[0];
    $(firstHeaderChild).replaceWith('');
  }
}

// 把自定义类注册成新的jQuery插件
jQuery.fn.extendedEkkoLightbox = ExtendedEkkoLightbox;

export default ExtendedEkkoLightbox;

调用时使用新的插件名：

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
  event.preventDefault();
  $(this).extendedEkkoLightbox();
});

最后再总结下错误原因： #

你之前的代码没有给父类构造函数传递必要的element和options参数，导致父类无法完成初始化，_$modalHeader根本没被创建，所以访问它的时候直接抛出了TypeError。jQuery插件的构造逻辑和普通ES6类不一样，继承时一定要遵循它的规则哦。

内容的提问来源于stack exchange，提问作者viciousP