Question

以下是我的HTML代码段：

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

    }




}

错误：

未捕获的TypeError：无法调用方法＆＃39; downHours＆＃39;未定义的

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

Answer 1

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

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

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来将对象传递给此函数。

E.g：

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

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

总结一下：

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

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

在JavaScript中，这总是指我们正在执行的函数的“所有者”，或者更确切地说，指向函数是其方法的对象。 source < / p>

Answer 2

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

var timeChangeView = TimeChangeView.apply（TimeChangeView）; ＆lt; \ td onclick =“timeChangeView.downHours（）”＆gt;

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

在面向对象的javascript中使用Onclick

2 个答案:

更新