JavaScript - 未捕获的 ReferenceError：未定义 checkAnswer，函数不在范围内？答案

【问题标题】：JavaScript - Uncaught ReferenceError: checkAnswer is not defined, function not in the scope?JavaScript - 未捕获的 ReferenceError：未定义 checkAnswer，函数不在范围内？
【发布时间】：2018-11-12 16:48:37
【问题描述】：

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 项目编写的，但是当我运行它时，它显示 Uncaught ReferenceError: checkAnswer is not defined，如果有人知道这个问题，我将不胜感激。谢谢！

附：不知道 checkAnswer 函数是否有错误或注意，因为我无法测试它，我会在可以运行时测试它:)

【问题讨论】：

您到底在哪里得到这个错误？是在课内还是课外？我假设在 checkAnswer(buttons[i], i) 但我不想假设

标签： javascript html scope

【解决方案1】：

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

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

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

（已编辑）

【讨论】：

【解决方案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 的确切引用，就像这样：

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

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

【讨论】：