Question

我对JavaScript很陌生，对于我的生活，我无法理解如何在我的脚本中正确构建全局对象：

<? switch($var) : case 1 : ?>

  <div>One</div>

<? break; case 2 : ?>

  <div>Two</div>

<? break; case 3 : ?>

  <div>Three</div>

<? break; endswitch; ?>

此代码产生以下错误：

TypeError：this.button1Handler.init不是函数

如果我将其更改为var Global = { button1Handler: function () { this.button1 = $("#button1"); this.init = function () { this.button1.on("click", function () { alert("button1 clicked"); }); } }, button2Handler: function () { /* ... */ }, init: function () { this.button1Handler.init(); this.button2Handler.init(); } }; $(function () { Global.init(); });，则错误消失，但Button1Handler.init（）函数永远不会被调用。

如何更正上述代码？

Answer 1

我不确定你为什么要这样做。但如果你真的想要，你可以通过这个实现你想要的目标：

    button1Handler: function () {
        return {
             button1: $("#button1"),
             init: function () {
                this.button1.on("click", function () { alert("button1 clicked"); });
             }
        };
    },

然后您可以将init称为this.button1Handler().init()。

在这种情况下，this.button1Handler()函数返回一个进一步具有init方法的对象。

Answer 2

您收到错误是因为this.button1Handler是一个函数，您必须创建它的实例才能访问它的属性。

＆＃13;

var Global = {
  button1Handler: function() {
    //this.button1 = $("#button1");
    this.init = function() {
      //this.button1.on("click", function () { alert("button1 clicked"); });
      console.log("Button1 init")
    }
  },
  button2Handler: function() {
    this.init = function() {
      console.log("Button2 init")
    }
  },
  init: function() {
    new this.button1Handler().init();
    new this.button2Handler().init();
  }

};

(function() {
  Global.init();
})();

＆＃13;

更好的解决方案是return必要的属性：

示例

＆＃13;

var Global = {
  button1Handler: function() {
    var button1 = $("#button1");
    var init = function() {
      button1.on("click", function() {
        console.log("Button1 clicked")
      });
    }
    return {
      init: init
    }
  },
  button2Handler: function() {
    var button2 = $("#button2");
    var init = function() {
      button2.on("click", function() {
        console.log("Button2 clicked")
      });
    }
    return {
      init: init
    }
  },
  init: function() {
    this.button1Handler().init();
    this.button2Handler().init();
  }

};

(function() {
  Global.init();
})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="button1">button 1</button>
<button id="button2">button 2</button>

＆＃13;

在以下代码中，button1是一个私有变量，因为它不是使用return语句公开的，但init是公共属性。因此，您可以拥有任意数量的属性，但只有您返回的属性才是公共属性。

button1Handler: function() {
  var button1 = $("#button1");
  var init = function() {
    button1.on("click", function() {
      console.log("Button1 clicked")
    });
  }
  return {
    init: init
  }
}

Answer 3

因为button1Handler没有返回执行的函数。在this.button1Handler().init() button1Handler函数调用init，这将指向button1Handler()范围，因此函数init可以访问。

JavaScript - 使用嵌套函数构造全局对象

3 个答案:

示例