我觉得我对这个
的全部理解都被抛在了空中。
我有一个 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);
最佳答案
因为您嵌套在另一个函数中,所以 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 对象的方法,而传递给点击事件的匿名函数不是您的测验,它是在后台创建的匿名对象的方法,并且不与您的测验共享任何方法或变量。考虑这一点很重要!
关于javascript - 在对象方法上使用 this 会返回错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39454518/