全局变量的问题在我的JavaScript文件

问题描述 投票:-3回答:2
  1. 为什么警报(“2”)弹出第一?
  2. 为什么我不能创建全局变量c和CTX?
  3. 如何创建这两个全局变量,所以我可以在其他功能例如使用它们画圆(); //html5 //<script type="text/javascript" src="my.js"></script> // ... //<canvas id="can" width="500" height="500></canvas> //my.js //The working code window.onload = drawRectangle; function drawRectangle() { var c = document.getElementById("can"); var ctx = c.getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(50, 50, 200, 100); } //my.js //The non-working code //alert function just for debugging window.onload = init; var c; var ctx; function init() { alert("1"); c = document.getElementById("can"); ctx = c.getContext("2d"); } function drawRectangle() { alert("2"); ctx.fillStyle = "green"; ctx.fillRect(50, 50, 200, 100); } drawRectangle(); 如果我创建c和CTX在同一HTML5文件的全局变量,和它的作品,因为它应该。为什么不能在一个外部JavaScript文件的工作?
javascript html5
2个回答
1
投票

您呼叫drawRectangle() init已经跑了。它使用如预期全局变量,但他们仍然未初始化的。移动电话进入init功能:

var c;
var ctx;
function init() {
    alert("1");
    c = document.getElementById("can");
    ctx = c.getContext("2d");
    drawRectangle();
//  ^^^^^^^^^^^^^^^^
}
function drawRectangle() {
    alert("2");
    ctx.fillStyle = "green";
    ctx.fillRect(50, 50, 200, 100);
}
window.onload = init;

这样做之后,你可以(也应该)避免全局变量和简单地通过参数传递必要的值:

function init() {
    var c = document.getElementById("can");
    var ctx = c.getContext("2d");
    drawRectangle(ctx);
//                ^^^
}
function drawRectangle(ctx) {
//                     ^^^
    ctx.fillStyle = "green";
    ctx.fillRect(50, 50, 200, 100);
}
window.onload = init;

0
投票

几天后阅读,以下是解释为什么矩形将无法绘制。

  1. 在加载页面,DrawRectangle的()被调用。然而,变量c和CTX尚未初始化。因此,它不会绘制矩形。
  2. 直到完成加载页面,init()函数被调用时,变量c和CTX还没有被初始化。其结果是,该矩形将无法绘制。
© www.soinside.com 2019 - 2024. All rights reserved.