JavaScript 构造函数 : is this a property or a variable?

Question

我在 Canvas 元素上冲浪，与 JavaScript 游戏一起使用，我发现了以下代码:

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    ctx = myGameArea.context; // **why not: var ctx= myGameArea.context ???**
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}

我的问题是 ctx 是什么属性？还是私有(private)变量？

ctx 在此构造函数之外未声明甚至未使用(例如:var ctx)。它仅在这段代码中。

我听说如果您直接设置一个变量的值而不使用 var 保留字，那么您就声明了一个全局变量。但是 ctx 变量没有在构造函数之外使用，所以没有用吗？

此外，当将 key 属性设置为对象的实例时，它们也会执行相同的操作。

完整代码...

var myGamePiece;

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red", 10, 120);
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;    
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}

Answer 1

如果该函数单独存在并且不在另一个函数内，那么 ctx 很可能是一个全局变量。如果需要局部变量，应使用 var ctx 代替，但不能从外部访问。如果需要访问 ctx 变量，则应将其声明为 this.ctx。

如果它在另一个函数内，那么它可能是捕获的变量:

function parent() {
    var ctx = parentArea.context;

    function component(width, height color, x, y) {
        this.width = width;
        this.height = height;
        this.x = x;
        this.y = y;
        ctx = myGameArea.context; // References parent's ctx variable
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}