javascript - 在对象方法上使用 this 会返回错误

Question

我觉得我对这个的全部理解都被抛在了空中。

我有一个 Quiz 对象，其中包含进行测验所需的必要变量和方法。

我试图从 Quiz 中的另一个方法引用 Quiz 的方法(skipQuestion() 中的 getQuestion)，但是，我在控制台中看到一条消息，指出this.getQuestion 未定义。我的印象是，在这种情况下，this 指的是它所在的对象，因此有问题的函数应称为 this.getQuestion()。

我收到的错误消息是 script.js:18 Uncaught TypeError: this.getQuestion is not a function

谁能解释一下这里出了什么问题吗？

在我的 init 函数中，this 似乎引用了 Quiz 对象，但在 skip Question 中它似乎改变了。这是因为查询对 this 有不同的定义吗？您在哪里划定界限，this 的上下文何时发生更改？

(function(window){

    $(document).ready(function(){
        var Quiz = {

            score : 0,
            question: '',
            answer: '',

            init: function() {
                this.getQuestion();
                this.checkAnswer();
                this.skipQuestion();
            },

            skipQuestion: function() {
                $('#skip').click(function(){
                    this.getQuestion();

                })
            },

            getQuestion: function() {
                $.get('http://jservice.io/api/random', function(data){
                    $('#question').html(data[0].question);
                    this.answer = data[0].answer.toLowerCase();
                });
            },

            checkAnswer: function() {
                if($('#answer').val() === this.answer) {
                    this.score += 1;
                }
            }
        }

        Quiz.init();
    });

})(window);

Answer 1

因为您嵌套在另一个函数中，所以 this 上下文更改为那个函数，因此您查找的方法不再可用。您可以尝试通过将 this 存储在您定义的函数范围内的变量内，或者使用双箭头函数来解决此问题，该函数没有关联的 this 上下文本身(因此也不支持 bind 或 call)。以下是您的选择:

声明一个变量:

skipQuestion: function() {
    var that = this;
    $('#skip').click(function(){
        that.getQuestion();
    })
}

或双箭头函数:

skipQuestion: function() {
    var that = this;
    $('#skip').click(() =>  that.getQuestion())
}

您的 init 函数被视为 Quiz 对象的方法，而传递给点击事件的匿名函数不是您的测验，它是在后台创建的匿名对象的方法，并且不与您的测验共享任何方法或变量。考虑这一点很重要!