JavaScript揭示原型模式中如何访问原型函数的初始变量？

先贴出你提供的代码：

var tool = function (bID, $element) { 
  this.bID = bID || 0; 
  this.$element = $element || false; 
  this.element = $element[0] || false; 
}; 
tool.prototype = function () { 
  // if this.bID == 'x' && this.$element ? ... 
}();

问题所在 #

你现在把tool.prototype赋值给了一个立即执行函数的返回值，但这个立即执行函数在运行时，并没有绑定到任何tool的实例上——此时函数里的this指向的是全局对象（浏览器里是window，Node环境是global），根本不是你通过new tool()创建的实例，所以自然拿不到初始化时设置的bID、$element这些属性。

正确的写法 #

揭示原型模式的核心是：让立即执行函数返回一个包含原型方法的对象，这些方法内部的this会在调用时自动绑定到对应的实例上，这样就能访问到实例的属性了。

调整后的代码示例：

var tool = function (bID, $element) {
  this.bID = bID || 0;
  this.$element = $element || false;
  // 优化element的赋值逻辑，避免$element为false时报错
  this.element = $element ? $element[0] : false;
};

tool.prototype = (function () {
  // 这里可以写闭包内的私有辅助函数，外部无法访问
  function logHelper(msg) {
    console.log(`[Tool] ${msg}`);
  }

  // 返回原型方法集合，方法里的this指向调用它的实例
  return {
    validateProps: function() {
      // 这里的this就是tool的实例，能直接访问初始化的属性
      if (this.bID === 'x' && this.$element) {
        logHelper("属性验证通过");
        console.log("当前bID:", this.bID);
        console.log("DOM元素:", this.element);
      } else {
        logHelper("属性不满足条件");
      }
    },
    updateID: function(newID) {
      // 还能修改实例属性
      this.bID = newID;
      logHelper(`bID已更新为${newID}`);
    }
  };
})();

使用示例 #

当你创建实例并调用原型方法时，方法里的this就会指向这个实例：

// 创建一个实例
var myTool = new tool('x', jQuery('#my-element'));
// 调用原型方法验证属性
myTool.validateProps();
// 修改实例的bID
myTool.updateID('y');
// 再次验证属性
myTool.validateProps();

这样就能顺利访问到初始化时设置的变量啦！

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