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

Question

我有一个 JavaScript 类叫做 Greeter。 在我的课堂上，我有：

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

我想要的是让我的文档单击事件处理程序调用公共函数a 。 但我收到错误：“未捕获的 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函数之外。

更新的小提琴

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

这样，只有在实例化后才会调用处理程序。 它有一个真正的参考。