Question

我有以下代码，但它不断抛出＆＃34;未捕获的TypeError：无法读取属性＆＃39; nineAM＆＃39;未定义＆＃34;

通常在OOP中我会声明一个Class，然后在类中有单独的方法。我想用JS做类似的事情，但不太确定这是否可行。

function SetBtnToEcr () {
    document.getElementById("depart").value = "Test 1";
    document.getElementById("arrive").value = "Test2";

    GetTodaysDate();
    new (GetHour()).nineAM();
}

function SetDeptTime () {
    SetBtnToECR();
}

function GetHour(){
    function nineAM () {
        document.getElementById("hour").selectedIndex = "09";
    }

    function fiveThirtyPM(){
        document.getElementById("hour").selectedIndex = "17";
        document.getElementById("minute").selectedIndex = "30";
    }

    function twoFifteenPM(){
        document.getElementById("hour").selectedIndex = "14";
        document.getElementById("minute").selectedIndex = "15";
    }
}

我已经在线查看了但是在所有其他示例中我看到参数传递给方法或只是返回字符串的方法然后使用this.methodName返回他们想要的字符串。但是我不希望返回任何内容，我只想将小时设置为上午9点。

Answer 1

如果您希望GetHour成为constructor function（类似于某个类），则应该如下：

function GetHour(){
    this.nineAM = function () {
        document.getElementById("hour").selectedIndex = "09";
    }
    // ...
}

并使用如下：

new GetHour().nineAM();

或者，如果您使用ES2015或更高版本，则可以使用classes：

进行定义

class GetHour {
    nineAM() {
        document.getElementById("hour").selectedIndex = "09";
    }
}
new GetHour().nineAM();

Answer 2

您需要从函数返回，例如

function GetHour(){
    function nineAM () {
        document.getElementById("hour").selectedIndex = "09";
    }

    function fiveThirtyPM(){
        document.getElementById("hour").selectedIndex = "17";
        document.getElementById("minute").selectedIndex = "30";
    }

    function twoFifteenPM(){
        document.getElementById("hour").selectedIndex = "14";
        document.getElementById("minute").selectedIndex = "15";
    }

    return {
      nineAM,
      fiveThirtyPM,
      twoFifteenPM
    }
}

Answer 3

您可以使用构造函数，使用this关键字定义公共属性和方法，并使用new关键字创建实例。

从ES2015开始，您可以使用熟悉的OOP类型class syntax。

class getHour{
   nineAM () {
       document.getElementById("hour").selectedIndex = "09";
    }

   fiveThirtyPM(){
      document.getElementById("hour").selectedIndex = "17";
      document.getElementById("minute").selectedIndex = "30";
   }

   twoFifteenPM(){
      document.getElementById("hour").selectedIndex = "14";
      document.getElementById("minute").selectedIndex = "15";
   }

}

然后从getHour类的实例访问方法。

let gh = new getHour();
gh.nineAM();

Answer 4

在开始这条道路之前，最好先阅读Eric Elliot关于JavaScript中构造函数，类和工厂的争论。

https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e

@ baao的回答描述了如何使用工厂实现您想要的效果。正如埃里克在他的文章中所说，工厂是最简单的解决方案。绝对值得一试。

如何在函数内调用函数而不将任何变量传递给函数Javascript

4 个答案: