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()：

＆＃13;

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

＆＃13;

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

更好的实现将创建元素并使用DOM API附加其事件处理程序，同时避免document.write()。此外，您的单身实际上是无，所以最好将其重命名为其他内容以避免混淆（或实现real singleton）：

＆＃13;

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();

＆＃13;

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

Answer 2

你想要达到的目标还不清楚......

顺便说一句，JavaScript中有单一模式的可能实现很多。这是一个可能的，有一个IIFE：

＆＃13;

var showCount = (function () {
  var count = 123;
  document.body.innerHTML = '<div onclick="showCount();">Click</div>';
  
  return function () {
    alert(count);
  }
})();

＆＃13;

Javascript单例范围问题

2 个答案: