个人中心
gpt4 book ai didi

JavaScript:全局变量似乎不是本地可引用的

转载 作者：行者123 更新时间：2023-11-29 22:12:39 24 4
gpt4 key购买 nike

我在识别某些变量之前已定义的函数时遇到了一些问题；他们应该是全局性的，但他们似乎并没有这样做。

var global = "Summat.";
function Function() {
    alert(global);    //alerts "undefined"
    //some more code referencing similar variables
    alert("Hey.");    //doesn't display.
    }

我不确定问题实际上是我认为全局变量的行为与全局变量不同，但我已通过有限的故障排除能力将其缩小到这个范围。如果有帮助，我也非常乐意发布并尝试解释完整/更多代码。

这是更扩展的版本:

<!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>

最佳答案

您认为您的代码在页面加载时运行，但事实并非如此。替换为:

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 将可用，一切都会正常工作。

http://jsbin.com/irezag/1/edit

关于JavaScript:全局变量似乎不是本地可引用的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17266961/

24 4 0
文章推荐： javascript - Backbone.Model.extend() 与 class X extends Backbone.Model 之间有什么区别？
文章推荐： javascript - 如何知道是否按下了没有字符码值的键
文章推荐： android - 我的原始文件夹中有多个文本文件，我想根据 ListView 上的所选项目逐一显示它们
文章推荐： android - 和引擎。粒子效果跟随 Sprite 太慢了。如何减少延迟
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com