我尝试了很多不同的方法来避免全局变量未定义，但它弄乱了代码的其余部分。我可以在除少数函数之外的所有函数中调用变量 this.userHunger 。我知道我一定在某个地方出错了:
<html>
<head>
<script>
function user()
{
this.userHunger = 100;
this.userHealth = 100;
this.userFoodNumber = 10;
this.checkForHungerHealthData = function()
{
document.getElementById('userHealthDisplay').innerHTML = "Your Health:" + this.userHealth;
document.getElementById('HungerBarVisual').innerHTML = "Your Hunger" + this.userHunger;
document.getElementById('amountOfFood').innerHTML = "Amount of food" + this.userFoodNumber;
}
this.signInButton = function()
{
document.getElementById('myButtonSignIn').style.visibility="hidden";
this.checkForHungerHealthData(); // displays current hunger and health
}
this.eatFood = function()
{
if(this.userFoodNumber > 0)
{
this.userHealth = this.userHealth + 10;
this.userHunger = this.userHunger + 50;
this.userFoodNumber--;
document.getElementById('amountOfFood').innerHTML = "Amount of food:" + this.userFoodNumber;
document.getElementById('userHealthDisplay').innerHTML = "Your Health:" + this.userHealth;
document.getElementById('HungerBarVisual').innerHTML = "Your Hunger is currently " + this.userHunger + "%";
}
}
this.start=function()
{
this.hungerClockStart();
}
this.hungerClockStart=function()
{
this.setUserHungerClock(setInterval(this.updateHungerScreen,1000));
}
this.updateHungerScreen=function()
{
alert(this.userHunger); //Returns undefined
if(this.userHunger >= 0)
{
var subtractAmount=1;
document.getElementById('HungerBarVisual').innerHTML = "Hunger is Currently at: " + this.userHunger + "%";
this.userHunger--;
}
}
}
var user1 = new user();
</script>
</head>
<h1 id = "userHealthDisplay">Your Health:<br></h1>
<h1 id = "HungerBarVisual">Your Hunger:<br></h1>
<input id="myButtonSignIn" style="visibility:visible" type="button" value="Sign in" onclick="user1.signInButton(); user1.hungerClockStart()">
<body>
<h1 id = 'Notifyer1'><br></h1>
<h1 id = 'Notifyer2'><br></h1>
<h1 id = 'amountOfFood'>Amount of Food:</h1>
<input id="eatFoodButton" style="visibility:visible" type="button" value="Eat some food!" onclick="user1.eatFood()">
</body>
</html>
我在 this.hungerScreenUpdate 中不断收到错误，但无法理解原因。
最佳答案
this.setUserHungerClock(setInterval(this.updateHungerScreen,1000));
需要
this.setUserHungerClock(setInterval(this.updateHungerScreen.bind(this),1000));
在 JavaScript 中，this 是动态的，而不是词法的，因此 this 可以根据它的调用方式而改变。当您执行 setInterval(this.updateHungerScreen,1000) 时，它不会使用正确的 this 值调用 updateHungerScreen 。您可以使用 bind 将函数绑定(bind)到特定上下文。
正如评论者所建议的，如果您需要它在 IE8 及更低版本上工作，您需要在 bind 中进行填充，或者使用 Phrogz 的技术将 this 存储为变量。
更新
有关 this 在 JavaScript 中如何工作的概述，请参阅 https://stackoverflow.com/a/13373383/1662998
就我个人而言，我建议在 IE8 及以下版本的 bind 中进行填充。这样您就可以继续使用新功能，同时保持与旧浏览器的向后兼容性。只需将其添加到页面顶部的脚本中即可:
if (!Function.prototype.bind)
Function.prototype.bind = function(context/*, ...preArgs */) {
var f = this,
preArgs = Array.prototype.slice.call(arguments, 1);
if (typeof f != 'function')
throw new TypeError('Function expected.');
if (context != null)
context = Object(context);
return function bound(/* ...args */) {
var args = Array.prototype.slice.call(arguments);
return f.apply(context, preArgs.concat(args));
};
};
关于javascript - 函数外部的全局变量返回未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13543869/