Question

如何从 JavaScript 中的事件处理程序调用公共函数？

2015-10-17

1112

javascript jquery

我在 JavaScript 中有一个叫做 Greeter 的类。在我的类中，我有：

一个构造函数
一个文档单击事件处理程序
一个名为 a 的公共函数

我希望我的文档单击事件处理程序调用公共函数 a 。但我收到错误：“ Uncaught ReferenceError：a 未定义 ”

这是我的代码：

var Greeter = (function () {

    function Greeter() {
    }

    Greeter.prototype.a = function () {
        alert('I am in a');
    };

    $(document).on( "click", function() {
        alert('I am in click event handler');
        a(); // <-- Why can't I call the public function a
    });

    return Greeter;
})();

var greeter = new Greeter();

这是一个演示。

Answer 1

a 在此处不是公共函数。在 window 对象上定义的函数是公共的，可以从任何地方访问（使用 作用域链 ）。它在 Greeter 的原型上定义，因此，使用 new Greeter 在 Greeter 上创建的对象或从 Greeter 继承的子对象可以使用语法 obj.a() 调用它。

您可以使用以下语法调用该函数

Greeter.prototype.a();

或者，您也可以使用从 Greeter 创建的 greeter 对象来访问它

greeter.a(); // instance of Greeter class. Has access to the function defined on prototype

我还建议将在原型上添加新函数和事件绑定的代码移到 Greeter 函数之外。

更新的 Fiddle

var Greeter = (function() {
  function Greeter() {}

  return Greeter;
})();

Greeter.prototype.a = function() {
  alert('I am in a');
  // b();
};

$(document).on("click", function() {
  alert('I am in click event handler');
  Greeter.prototype.a();
});

var greeter = new Greeter();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Answer 2

您最可能想要的（我在这里猜测）

var Greeter = (function () {

    function Greeter() {
        var _this = this;
        $(document).on( "click", function() {
             alert('I am in click event handler');
             _this.a(); // <-- Why can't I call the public function a
        });
     }

     Greeter.prototype.a = function () {
         alert('I am in a');
     };



     return Greeter;
})();

var greeter = new Greeter();

这样，只有在您实例化后才会调用处理程序。并且它对 a 有真正的引用。