Javascript 单例作用域问题

Question

我有以下代码:

var mySigleton = new function()
{
    this.count = 123;
    document.write("<div onclick='ShowCount();''>Click</div>");

    function ShowCount() {
        alert(this.count);    
    };
}();

我需要从 document.write() 创建的 div 的 onclick 事件中调用函数 ShowCount()。但是，我收到 ShowCount 未定义的错误。此外，ShowCount 事件必须访问单例内部定义的值。

Answer 1

您需要从构造函数外部访问 ShowCount()。您可以通过将该函数附加到返回实例的 ShowCount 属性来完成此操作。然后，您需要调用 mySingleton.ShowCount():

var mySingleton = new function()
{
    this.count = 123;
    document.write("<div onclick='mySingleton.ShowCount();'>Click</div>");

    this.ShowCount = function() {
        alert(this.count);    
    };
}();

备注:这只是为了演示如何修复您的实现，但正如上面的评论中已经指出的那样，它不是好的风格。

更好的实现是创建元素并使用 DOM API 附加其事件处理程序。同时避免document.write() 。另外，您的单例实际上没有，因此最好将其重命名为其他名称以避免混淆(或实现 real singleton ):

function myClass() {
  this.count = 123;
  
  // Create <div> and attach onclick handler:
  let div = document.createElement('div');
  div.textContent = 'Click';
  div.onclick = () => alert(this.count);
  document.body.appendChild(div);
};


let instance = new myClass();

根据您的用例，使用构造函数创建 DOM 元素可能仍然不太常见。