JavaScript中如何外部访问修改构造函数Modal的实例属性isShown

问题根因 #

你代码里定义的Modal是构造函数，this.isShown是绑定在构造函数生成的实例对象上的成员属性，不属于构造函数本身的静态属性，所以直接写Modal.isShown = false当然无法访问到目标属性。

正确修改方案 #

• 如果你已经生成了Modal的实例
  常规初始化模态框的逻辑类似const myModal = new Modal('#你的模态框元素选择器', {配置项})，直接修改实例的属性即可：

  myModal.isShown = false
  

• 如果你需要全局修改所有Modal实例的isShown默认值
  因为你无法修改原构造函数的声明，可以通过劫持原构造函数的方式实现：

  // 先保存原构造函数引用
  const OriginalModal = Modal
  // 重写构造函数
  Modal = function (element, options) {
    // 调用原构造函数生成实例
    const instance = new OriginalModal(element, options)
    // 自定义修改isShown的默认值
    instance.isShown = false
    return instance
  }
  // 同步原型链，保证原Modal的所有原型方法可以正常调用
  Modal.prototype = OriginalModal.prototype
  

• 如果你用的是Bootstrap原生Modal组件（你贴的这段代码就是Bootstrap 3的Modal源码），更推荐用官方提供的公开API控制状态，不要直接修改私有属性：
  要隐藏模态框直接调用$(你模态框的DOM元素).modal('hide')，方法内部会自动把isShown属性更新为false。

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