在面向对象的 JavaScript 中使用 Onclick答案

【问题标题】：Using Onclick in object oriented javascript在面向对象的 JavaScript 中使用 Onclick
【发布时间】：2014-03-21 19:58:07
【问题描述】：

这是我的 HTML 的 sn-p：

 <tr>
                <td class="timeHeader" id="timeInOutString"></td>
                <td id="timeControlHours"></td>
                <td>:</td>
                <td id="timeControlMins"></td>
                <td onclick="this.TimeChangeView.AcceptTime()">Accept</td>
            </tr>
            <tr>
                <td></td>
                <td onclick="this.TimeChangeView.downHours()">

Javascript：

function TimeChangeView(ac) {

    this.downHours = function(){


        //get element by Id

        var value = parseInt(document.getElementById('timeControlHours').innerHTML);

        value = isNaN(value) ? 0 : value;
        value--;

        //add leading zeroes

        value = formatHoursMins(value);

        document.getElementById('timeControlHours').innerHTML = value;

    }




}

错误：

未捕获的类型错误：无法调用未定义的方法“downHours”

我已经在名为 TimeChangeView 的方法中的脚本中定义了它，但它抱怨我没有定义它，为什么？谢谢。

【问题讨论】：

您需要了解“this”这个词的工作原理。谷歌有很多关于它的好文章索引并且为你准备好了。
问题不在于downHours。仔细阅读错误信息。 无法调用未定义的方法“downHours”。 TimeChangeView 有一个名为 downHours 的方法，但 undefined 没有。 this.TimeChangeView 返回未定义，因为 this 是 window。
当我删除它时，它会抱怨 uncaught TypeError: Object function TimeChangeView(ac)

标签： javascript jquery oop

【解决方案1】：

<td onclick="this.TimeChangeView.downHours()">

您正在对象 this 上调用方法 TimeChangeView。

this 指的是函数作为方法的对象。 TimeChangeView 不是对象this 的方法，因此它不起作用。（this 在这里是window）

您可以将 this 传递给函数 TimeChangeView，如下所示：TimeChangeView(this)。

阅读更多相关信息here。

更新

为了让您更好地了解对象在 JavaScript 中的工作方式，请考虑 THIS CODE

如您所见，在第一个函数中我调用了对象的方法：

button1.onclick=function()
{
    //Since we are calling a function on the object button1,
    //  in this function this = button1 (as an object)
    alert(this.id);
};

因此this 在这种情况下是对象button1。

在另一个函数中，我定义了一个必须传递对象的全局函数：

function testFunction(passedObject)
{
    // In this function, we pass the object 'this' from button2
    // If I now call passedObject.id, it will give the id of the passed object
    // In this case that is 'button2'
    alert(passedObject.id);
}

在这个函数中，没有this。但是，我可以通过在 HTML 代码中的对象内调用 this 将对象传递给该函数。

例如：

<button id="button2" onclick="testFunction(this)">Button 2</button>

所以现在我调用 testFunction(this) 并将对象 <button id="button2">Button 2</button> 作为参数传递。

总结一下：

在对象中，this 指的是对象本身
在对象之外，this 指的是最近的父对象
在调用对象的方法中，this 引用对象本身

总结这种行为的好句子是：

在 JavaScript 中，this 总是指我们正在执行的函数的“所有者”，或者更确切地说，指的是函数作为方法的对象。 source

【讨论】：

但是js脚本在运行时没有加载到浏览器窗口中吗？因此这将引用该函数？
把this 想成不是一个静态对象，而是一个对变化对象的依赖引用（取决于范围）。所以不要认为它是 Java ;)
正确。当我删除它时，我只收到以下错误 TypeError: Object function TimeChangeView(ac)，知道为什么吗？
是的，TimeChangeView(ac), 在调用它时需要一个参数 ac 作为输入。所以称它为TimeChangeView() 是错误的。
是的 - 你看，当我添加 TimeChangeView(this) 时，它仍然会抱怨。所以我不确定如何直接调用该函数。抱歉所有问题，我对 JS 中的 OOP 很陌生

【解决方案2】：

更好的方法是调用函数 TimeChangeView 上的 apply/call 方法。 apply/call 接受两个参数，this 对象和函数需要的任何参数（注意第二个参数可以是可选的）。例如，我们可以以这种方式使用它 TimeChangeView.apply(TimeChangeView) ，它将 this 值设置为 TimeChangeView （记住 JS 中的函数是一个对象）。您还可以将 TimeChangeView 分配给一个变量，您可以使用该变量来引用 TimeChangeView 中的函数。例

var timeChangeView = TimeChangeView.apply(TimeChangeView);

您还需要在 TimeChangeView 函数定义中返回 this 对象。

【讨论】：