JavaScript:全局变量似乎不是本地可引用的 [英] JavaScript: Global variables don't seem to be locally referencible
本文介绍了JavaScript:全局变量似乎不是本地可引用的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在认识到某些变量先前已定义的功能时遇到了一些问题；他们本来应该是全球性的，但他们似乎并没有像现在这样.
I'm having some problems with a function recognizing that some variables have been previously defined; they are supposed to be global, but they don't seem to be acting like it.
var global = "Summat.";
function Function() {
alert(global); //alerts "undefined"
//some more code referencing similar variables
alert("Hey."); //doesn't display.
}
我不确定问题实际上是否是我相信要成为全局变量的行为，而不是像全局变量那样，但是由于我有限的故障排除能力，这就是我要缩小的范围.我也很乐意发布并尝试解释完整/更多的代码，如果有帮助的话.
I'm not sure that the problem is actually what-I-believe-to-be-global variables aren't behaving like global variables, but that's what I've narrowed it down to with my limited troubleshooting abilities. I'd also be more than happy to post and try to explain the full/more code if that would help.
这是更扩展的版本:
<!DOCTYPE html>
<html>
<head>
<title>divMan: Canvas</title>
</head>
<body>
<canvas id="canvas" height="768px" width="1366px" style="position:fixed;top:0px;left:0px;"></canvas>
</body>
<script>
window.onload = drawFrame();
//----------------------------------------Global Variables-----------------------------//
var context = document.getElementById("canvas").getContext("2d");
//------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------Constructors-----------------------------------------------------------------------------------------------//
function Point(top,left) {this.top = top; this.left = left;}
function Stone(top,left,height,width) {//a seemingly functional constructor}
function Tree(top,left,trunkHeight,trunkWidth,crownHeight,crownWidth) {//a seemingly functional constructor}
function DivMan(top,left,headHeight,headWidth,bodyHeight,bodyWidth) {//a seemingly functional constructor}
function Sky(top,left,height,width) {//a seemingly functional constructor}
function Ground() {//a seemingly functional constructor}
function Grass(height,targetGround) {//a seemingly functional constructor}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------//
//----------------------------------------------Objects------------------------------------------------//
var sky = new Sky(0,0,538,1366); //the sky.
var ground = new Ground(); //the ground.
var grass = new Grass(38,ground); //the grass.
var stone = new Stone(418,228,75,75); //a stone.
var pedestal = new Stone(508,630,30,200); //a stone pedestal.
var tree0 = new Tree(138,1000,150,60,250,300); //a tree.
var tree1 = new Tree(83,73,300,40,100,300); //another tree.
var divMan = new DivMan(408,700,34,30,65,60); //divMan!!
//----------------------------------------------------------------------------------------------------//
function drawFrame() {
sky.Draw();
ground.Draw();
grass.Draw();
tree1.Draw();
stone.Draw();
pedestal.Draw();
divMan.Draw();
tree0.Draw();
}
这就是现在的样子:
<!DOCTYPE html>
<html>
<head>
<title>divMan: Canvas</title>
</head>
<style>
* {-ms-touch-action:none;}
</style>
<body>
<canvas id="canvas" height="768px" width="1366px" style="position:fixed;top:0px;left:0px;"></canvas>
</body>
<script>
window.onload = drawFrame();
//window.onclick = walk(event);
//----------------------------------------Global Variables-----------------------------//
var context = document.getElementById("canvas").getContext("2d");
//var _walk = false;
/*var staticEquilibrium = true;
//--Kinematic Variables--//
var vSubX = 0;
var aSubX = 0;
var jSubX = 0;
var vSubY = 0;
var aSubY = 0;
var jSubY = 0;*/
// var deltaT = .001; //standard time interval.
// var interval; //a timing loop variable.
//------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------Constructors-----------------------------------------------------------------------------------------------//
function Point(top,left) {this.top = top; this.left = left;} //Parameters are numbers, to be used for pixel values.
function Stone(top,left,height,width) { //stones.
this.origin = new Point(top,left); //make sure to give this a curved top, eventually.
this.height = height;
this.width = width;
this.color = "#a0a0a0";
this.Draw = drawStone;
function drawStone() {
context.fillStyle = this.color;
context.fillRect(this.origin.left,this.origin.top,this.width,this.height);
}
}
function Tree(top,left,trunkHeight,trunkWidth,crownHeight,crownWidth) { //trees.
this.origin = new Point(top,left);
this.trunkHeight = trunkHeight;
this.trunkWidth = trunkWidth;
this.trunkColor = "#702000";
this.crownHeight = crownHeight;
this.crownWidth = crownWidth;
this.crownColor = "#40d030";
this.Draw = drawTree;
function drawTree() {
context.fillStyle = this.crownColor;
context.fillRect(this.origin.left,this.origin.top,this.crownWidth,this.crownHeight);
context.fillStyle = this.trunkColor;
context.fillRect(this.origin.left+(this.crownWidth-this.trunkWidth)/2,this.origin.top+this.crownHeight,this.trunkWidth,this.trunkHeight);
}
}
function DivMan(top,left,headHeight,headWidth,bodyHeight,bodyWidth) { //divMEN.
this.origin = new Point(top,left);
this.headHeight = headHeight;
this.headWidth = headWidth;
this.bodyHeight = bodyHeight;
this.bodyWidth = bodyWidth;
this.color = "#000000";
this.Draw = drawDivMan;
function drawDivMan() {
context.fillStyle = this.color;
context.fillRect(this.origin.left+(this.bodyWidth-this.headWidth)/2,this.origin.top,this.headWidth,this.headHeight);
context.fillRect(this.origin.left,this.origin.top+this.headHeight+1,this.bodyWidth,this.bodyHeight);
}
}
function Sky(top,left,height,width) { //skies.
this.origin = new Point(top,left);
this.height = height;
this.width = width;
this.color = "#98e8ff";
this.Draw = drawSky;
function drawSky() {
alert("Yorishomu.");
context.fillStyle = this.color;
context.fillRect(this.origin.left,this.origin.top,this.width,this.height);
}
}
function Ground() { //the ground.
this.origin = new Point(538,0);
this.hillStart = new Point(538,1);
this.hillTop1 = new Point(488,114);
this.hillTop2 = new Point(488,429);
this.hillEnd = new Point(538,543);
this.screenEnd = new Point(538,1366);
this.bottomRight = new Point(768,1366);
this.bottomLeft = new Point(768,0);
this.color = "#401000";
this.Draw = drawGround;
function drawGround() {
context.fillStyle = this.color;
context.beginPath();
context.moveTo(this.origin.left,this.origin.top);
context.lineTo(this.hillStart.left,this.hillStart.top);
context.lineTo(this.hillTop1.left,this.hillTop1.top);
context.lineTo(this.hillTop2.left,this.hillTop2.top);
context.lineTo(this.hillEnd.left,this.hillEnd.top);
context.lineTo(this.screenEnd.left,this.screenEnd.top);
context.lineTo(this.bottomRight.left,this.bottomRight.top);
context.lineTo(this.bottomLeft.left,this.bottomLeft.top);
context.closePath();
context.fill();
}
}
function Grass(height,targetGround) { //the grass.
this.color = "#10b030"
this.height = height;
this.targetGround = targetGround;
this.Draw = drawGrass;
function drawGrass() {
context.strokeStyle = this.color;
context.lineWidth = this.height;
context.beginPath();
context.moveTo(this.targetGround.origin.left,this.targetGround.origin.top); //it follows the ground.
context.lineTo(this.targetGround.hillStart.left,this.targetGround.hillStart.top);
context.lineTo(this.targetGround.hillTop1.left,this.targetGround.hillTop1.top);
context.lineTo(this.targetGround.hillTop2.left,this.targetGround.hillTop2.top);
context.lineTo(this.targetGround.hillEnd.left,this.targetGround.hillEnd.top);
context.lineTo(this.targetGround.screenEnd.left,this.targetGround.screenEnd.top);
context.stroke();
}
}
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------//
//----------------------------------------------Objects------------------------------------------------//
var sky = new Sky(0,0,538,1366); //the sky.
var ground = new Ground(); //the ground.
var grass = new Grass(38,ground); //the grass.
var stone = new Stone(418,228,75,75); //a stone.
var pedestal = new Stone(508,630,30,200); //a stone pedestal.
var tree0 = new Tree(138,1000,150,60,250,300); //a tree.
var tree1 = new Tree(83,73,300,40,100,300); //another tree.
var divMan = new DivMan(408,700,34,30,65,60); //divMan!!
//----------------------------------------------------------------------------------------------------//
function drawFrame() {
context.fillStyle = "#000000";
context.fillRect(0,0,100,100);
alert("Yo." + sky + context);
sky.Draw();
alert("Hi.");
ground.Draw();
grass.Draw();
tree1.Draw();
stone.Draw();
pedestal.Draw();
divMan.Draw(); // <-- Here's divMan.
tree0.Draw();
alert("Hey.");
}
/*function walk(click) { //in future, walk in mini-hops.
_walk = true;
staticEquilibrium = false;
if (click.screenX > rSubX+30) {vSubX = 5;} else {vSubX = -5;}
update();
}
function update() {
interval = setInterval(function() {
for (i=0; i<1; i++) {
divMan.origin.left += vSubX*deltaT+aSubX*deltaT*deltaT/2;
divMan.origin.top += vSubY*deltaT+aSubY*deltaT*deltaT/2;
}
drawFrame();
if (false) {clearInterval(interval);}
}
}*/
</script>
</html>
推荐答案
您认为您的代码在页面加载时运行，但事实并非如此.替换为:
You think your code is running on page load, but it's not. Replace this:
window.onload = drawFrame();
// -------------- remove ^^
// the parentheses call function immediately
// and assign its return value to window.onload
具有:
window.onload = drawFrame;
// now you're actually assigning the function
// itself to window.onload, as it should be
然后context将可用，并且一切正常.
Then the context will be available, and everything will work.
http://jsbin.com/irezag/1/edit
这篇关于JavaScript:全局变量似乎不是本地可引用的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
