Javascript-对象字段未定义

时间:2018-08-03 10:44:48

标签: javascript class ecmascript-6

我将尝试仅发布程序的重要部分。如果需要更多代码,请告诉我。

main.html

<html>
    <head>
        <title>Mathematician</title>
        <meta charset=UTF8 />
    </head>

    <body>
        <span id=player_information>
        </span>

        <hr />

        <span id=exercises>
        </span>
    </body>
    <script src="script.js"></script>
</html>

script.js(压缩版)

class Exercises
{
    constructor(player, number_of_exercises)
    {
        this.player = player;
        this.exercises = [];
        for (var i = 0; i < number_of_exercises; i++)
        {
            var exercise = new Exercise();
            var exercise_display = document.createTextNode(exercise);
            var input_field = document.createElement("input");
            var list_element = [exercise, exercise_display, input_field];
            this.exercises.push(list_element);
        }
    }

    display()
    {
        var exercises_area = document.getElementById("exercises");
        for (var i = 0; i < this.exercises.length; i++)
        {
            exercises_area.append(this.exercises[i][1]);
            exercises_area.append(this.exercises[i][2]);
            exercises_area.append(document.createElement("br"));
        }
        var check_button = document.createElement("button");
        check_button.innerHTML = "Check";
        check_button.onclick = this.check_exercises; 
        exercises_area.append(check_button);
    }

    check_exercises()
    {
        for (var i = 0; i < this.exercises.length; i++)
        {
            if (this.exercises[i][0].check_guess(this.exercises[i][2].value)) {
                alert("That was wright!");
            }
        }
    }
}

...

var player = new Player();
player.display();
var exercises = new Exercises(player, 10);
exercises.display();

该程序生成练习,并在其中显示文本和输入字段的状态下显示您可以输入解决方案的练习。如果单击复选按钮,则会收到以下错误消息:

TypeError: this.exercises is undefined

我的错是什么?我试图弄清楚,但此错误消息对我而言没有任何意义。

2 个答案:

答案 0 :(得分:1)

在构造函数中,您要将this绑定到显示和check_exercises函数。

尝试:

constructor(player, number_of_exercises)
{
    ...code...

    this.check_exercises = this.check_exercises.bind(this)
    this.display = this.display.bind(this)
}

“ right”也拼写为没有“ w”;)

答案 1 :(得分:0)

为了将this用作类对象,必须将this对象绑定到函数。

因为函数中的this对象基本上是指调用该对象的this对象。

让我们说您是否有一个HTML代码,如下:

<button onclick=Display()>Display</button>

在这种情况下,this对象将引用button,并且由于button对象没有称为exercise的任何属性,因此会引发错误为undefined

因此,您可以做的是将this对象在构造函数中绑定为:

constructor()
{
  this.display = this.display.bind(this);
}

或者您可以将函数声明为箭头函数:

display=()=>{
 //my function code goes here.
 }