Глобальные переменные хранятся в объекте window. this может относиться к window так же, как и к любому другому объекту. Кроме того, если вы не используете this, вы также можете получить глобальную переменную.
Это будет выполняться в глобальном контексте:
function load() {
this.url = this.baseurl + this.nextQuestion
Здесь this === window, поэтому this.url построен из ваших глобальных переменных.
Здесь меняется контекст:
...
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
this.question = response.message;
document.getElementById("question").innerHTML = this.question;
}
};
Здесь this относится к объекту xhttp. При установке this.question вы создаете новое свойство для xhttp и используете это значение для установки текста <h5 id="question">. Это работает, просто не меняет вашу глобальную question переменную.
Здесь снова используется глобальная переменная:
xhttp.open("GET", this.url, true);
...
}
При использовании кнопки отправки происходит нечто похожее:
function submit() {
...
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
this.nextQuestion = response.nextQuestion;
this.url = baseurl + this.nextQuestion;
И this.nextQuestion, и this.url создают свойства в этом (новом!) xhttp объекте. Однако, поскольку вы не поставили this. перед baseurl, и локальная переменная с таким именем отсутствует, будет использоваться глобальная переменная! Итак, неявно вы делаете это: xhttp.url = window.baseurl + xhttp.nextQuestion
Вот почему будет показан новый красивый полный URL:
console.log("Next Question: " + this.url);
}
};
Но опять же, сам запрос по-прежнему выполняется с использованием начального URL-адреса, поскольку мы оставляем область действия xhttp и используем здесь неизменное глобальное значение:
xhttp.open("POST", this.url, true);
...
}
... и здесь:
function next() {
console.log("URL to load: " + this.url);
//GET request next question
}
Короче говоря: используйте window.url, чтобы установить глобальное значение внутри другой области.
Об этом на MDN