JavaScript - 抛出未捕获的引用错误: checkAnswer未定义，函数不在作用域中？

Question

class Pairs extends Screen {
  constructor() {
    super();
    var pair1 = null;
    var nPair1;
    var solution;
    var rightCounter = 0;
    var licao, nS;
  }


  pairScreen(screen, lesson, nScreen) {
    var body = document.body
    var nodes = xmlDoc.getElementsByTagName("PAIRS");
    this.licao = lesson;
    this.nS = nScreen;

    this.solution = screen.getElementsByTagName("SOLUTION")[0].textContent.split(" ");

    body.innerHTML = '';

    Startup.h1(body, "Babel   (" + languageName + ")");
    Startup.hr(body);

    var d = DynamicHTML.div(body, "border:3px solid black; display:table; padding:20px; margin-left:40px");
    Startup.h1(d, "Match the pairs");

    var p1 = Startup.p(d, "padding-left:40px; word-spacing:50px;");
    Startup.text(p1, 16, " ");
    Startup.text(p1, 32, " ");

    var p2 = Startup.p(d, "padding-left:20px;");

    var button;


    var i;
    var f = function(i) {
      Startup.eventHandler2()
    }

    var original = screen.getElementsByTagName("ORIGINAL")[0].textContent;
    var buttons = original.split(" ");


    for (i = 0; i < buttons.length; i++) {
      button = DynamicHTML.inpuButton(p1, i, buttons[i], "orangered");
      Startup.eventHandler2(document.getElementById(i), "onclick", function() {
        checkAnswer(buttons[i], i)
      });
    }
    Startup.hr(body);
  }

  checkAnswer(pair, nPair) {
    var index;
    if (pair1 = null) {
      pair1 = pair;
      nPair1 = nPair;
    } else {
      for (index = 0; index < solution.length; index++) {
        if (pair1 == solution[index]) {
          if (index % 2 == 0 && solution[index - 1] == pair) {
            DynamicHTML.play("general/right_answer.mp3");
            rightCounter = rightCounter + 2;
            document.getElementById(nPair).disabled = true;
            document.getElementById(nPair1).disabled = true;
            pair1 = null;
            nPair1 = null;
          } else if (solution[index + 1] == pair) {
            DynamicHTML.play("general/right_answer.mp3");
            rightCounter = rightCounter + 2;
            document.getElementById(nPair).disabled = true;
            document.getElementById(nPair1).disabled = true;
            pair1 = null;
            nPair1 = null;
          } else {
            DynamicHTML.play("general/wrong_answer.mp3");
            pair1 = null;
            nPair1 = null;
          }

        }
      }
    }
    if (rightCounter == solution.length) {
      if (xmlDoc.getElementsByTagName("LESSON")[licao].childNodes[nS + 2] != null) {
        var fs = new Screen();
        fs.functionScreen(licao, nS + 2);
      } else fs.initialScreen();
    }

  }

}

我为我正在进行的一个JavaScript项目编写了这个代码，但当我运行它时，出现了未捕获的ReferenceError: checkAnswer未定义的问题，如果有人知道问题所在，我将不胜感激。谢谢！

P.S. 我不知道checkAnswer函数是否存在漏洞，因为我无法测试它，但我会在可以运行它时进行测试。

- Goncalo Ferreira

---

你确切地在哪里遇到这个错误？它是在类内部还是外部？我猜测是在checkAnswer(buttons[i], i)函数中，但我不想做任何臆断。 - Esaith

Answer 1

首先你需要在这个函数的结尾绑定this：

Startup.eventHandler2(document.getElementById(i), "onclick", function() {
    this.checkAnswer(buttons[i], i)
}.bind(this));

基本上，这告诉匿名函数：“嘿，我希望this指的是外部类，而不是函数本身”。

- Dave Lunny

Answer 2

你需要在构造函数中绑定checkAnswer，像这样：

class Pairs extends Screen {
  constructor() {
    super();
    var pair1 = null;
    var nPair1;
    var solution;
    var rightCounter = 0;
    var licao, nS;
    this.checkAnswer = this.checkAnswer.bind(this);
  }

或者使用箭头函数，这将为您提供对 this 的确切引用，如下所示：

checkAnswer = (pair, nPair) => {
    //your code goes here ...
    } 

这样，您就可以在pairScreen函数的范围内或者您希望调用函数的任何地方调用this.checkAnswer函数，正如@Davelunny所指出的那样。

- manAbl