Question

从HTML中的按钮调用函数时遇到问题：“未捕获的TypeError：undefined不是函数”错误。我认为这里没有任何问题......或者有些事情我没有考虑到。在此先感谢您的回答！

我有很多JS文件，这是因为这是一项学校作业，我们现在正在学习模型，视图，控制器（MVC）方法。

我有这个按钮：

<button onClick="ControllerBKE.reageerOpKlik()">Ok!</button>

然后我有这个Javascript代码创建^“ControllerBKE”的对象：

"use strict"
window.onload = reageerOpStart();

function reageerOpStart()
{
    var controllerBKE = new ControllerBKE();
}

以下是“ControllerBKE”中应该但不对按钮作出反应的代码行：

function ControllerBKE(){
    this.reageerOpKlik = reageerOpKlik;

    function reageerOpKlik(){
        alert('hoi');
    }
}

这只是大代码的一小部分。但是当我点击按钮而不是通过'hoi'获得警报时，我收到错误消息。

Answer 1

reageerOpKlik是一种实例方法。您必须从实例中使用它。最简单的解决方案（不是最好的）是创建一个全局控制器实例。有很多方法可以摆脱这个全局变量，但这超出了问题的范围。

function reageerOpStart()
{
    window.controllerBKE = new ControllerBKE();
}


<button onClick="window.controllerBKE.reageerOpKlik()">Ok!</button>

Answer 2

问题在于您的代码

<button onClick="ControllerBKE.reageerOpKlik()">Ok!</button>

正试图在您的原型对象reageerOpKlik上调用ControllerBKE。

你可能意味着什么

<button onClick="controllerBKE.reageerOpKlik()">Ok!</button>

其中controllerBKE是原型的实例。

但是，您还有另一个问题。功能：

function reageerOpStart()
{
    var controllerBKE = new ControllerBKE();
}

在controllerBKE函数的范围内创建reageerOpStart，这意味着它在全局范围内不可用，这是您的按钮单击处理程序所期望的。

您可能需要考虑：

 <button onClick="APP.controllerBKE.reageerOpKlik()">Ok!</button>

 APP = {}
 function reageerOpStart()
 {
     APP.controllerBKE = new ControllerBKE();
 }

或者，更好的是：

 <button id="myButton">Ok!</button>

 function reageerOpStart()
 {
     var controllerBKE = new ControllerBKE();
     document.getElementById("myButton").addEventListener("click", function() {
            controllerBKE.reageerOpKlik();
     });
 }

Answer 3

您拥有的内容称为closure。您的功能范围有限。也就是说，它只能在定义它的ControllerBKE()内部调用，而不能在函数外部调用。

您实际完成的是通过ControllerBKE实例上的属性公开该闭包。虽然这有效，但它更适合JavaScript的原型结构，可以将其添加到ControllerBKE.prototype。

重要的是要记住JavaScript是 Prototypal 而不是面向对象。虽然这可能与面向对象的封装类似，但两者具有不同的概念和用途。

请看以下示例：

<强> HTML：

<button onclick="controllerBKE.reageerOpKlik()">Ok!</button>

<强> JavaScript的：

"use strict";
window.controllerBKE = new ControllerBKE();

function ControllerBKE () { }

ControllerBKE.prototype.reageerOpKlik = function () {
    alert('hoi');
}

我简化了一些代码并对其进行了重构，以支持JavaScript为我们提供的 prototype 对象。

第一行是将controllerBKE变量添加到窗口对象。这使其在整个页面中具有全局范围，允许您的onclick函数访问它。

下一行是一个简单的函数包装器。这将创建ControllerBKE类型为object的实例。

您尝试调用的函数现已附加到ControllerBKE的原型。这意味着使用ControllerBKE关键字创建的new的任何实例都可以访问此功能。

查看以下小提琴中的完整功能：

FIDDLE

<强>参考文献：

Object.prototype

Object Oriented JavaScript

“未捕获的TypeError：undefined不是函数”在Javascript中调用对象中的方法时出现错误消息

3 个答案: