理解JavaScript中this上下文：解决对象属性访问问题

// functions.js (简化版，聚焦核心问题)
function Game(){
    this.Player = function(x,y){
        this.x = x; // 玩家的x坐标
        this.y = y; // 玩家的y坐标
        this.Move = function(){ // 嵌套的Move构造函数
            this.Right = function(){
                this.x += 10; // 这里的this指向谁？
                console.log(this.x, this.y);
            };
            // ... 其他移动方法 (Up, Left, Down)
        };
    };
}

// main.js
var game = new Game();
var player = new game.Player(250,250); // player是Game.Player的一个实例
var move = new player.Move(); // move是player.Move的一个实例

// 当调用 move.Right() 时，内部的 this 指向 move 对象本身
// 而 move 对象并没有 x 和 y 属性，因此 this.x 和 this.y 会是 undefined
// 进一步进行 undefined + 10 的操作，结果就是 NaN。

// functions.js
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
// ... 其他全局变量和函数

function Game(){
    this.sprites = [];
    this.Player = function(x,y){
        this.x = x;
        this.y = y;

        // 将移动方法直接作为Player对象的方法
        this.moveRight = function(){
            this.x += 10; // 这里的this现在指向Player实例
            console.log('Player moved Right:', this.x, this.y);
        };
        this.moveUp = function(){
            this.y -= 10; // 这里的this现在指向Player实例
            console.log('Player moved Up:', this.x, this.y);
        };
        this.moveLeft = function(){
            this.x -= 10; // 这里的this现在指向Player实例
            console.log('Player moved Left:', this.x, this.y);
        };
        this.moveDown = function(){
            this.y += 10; // 这里的this现在指向Player实例
            console.log('Player moved Down:', this.x, this.y);
        };
    };
}

// arrows 函数需要更新以调用player实例上的方法
function arrows(e){
    switch(e.which){
        case 37: player.moveLeft(); break;
        case 38: player.moveUp(); break;
        case 39: player.moveRight(); break;
        case 40: player.moveDown(); break;
    }
}

// ... drawCanvas 等其他函数

// main.js
var draw = new drawCanvas();
var game = new Game();
var player = new game.Player(250,250); // player实例现在直接包含移动方法
// var move = new player.Move(); // 不再需要单独创建Move实例

document.addEventListener('keydown',arrows,false);

function loop(){
    draw.background('#00FF00');
    draw.drawLine(0,0,player.x,player.y); // 绘制基于player的当前位置
    requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

// functions.js
// ... 其他代码

function Game(){
    this.sprites = [];
    this.Player = function(x,y){
        this.x = x;
        this.y = y;
        const self = this; // 捕获Player实例的this

        this.Move = function(){ // Move现在是一个构造函数
            this.Right = function(){
                self.x += 10; // 使用闭包捕获的self来访问Player实例的x
                console.log('Player moved Right:', self.x, self.y);
            };
            this.Up = function(){
                self.y -= 10;
                console.log('Player moved Up:', self.x, self.y);
            };
            this.Left = function(){
                self.x -= 10;
                console.log('Player moved Left:', self.x, self.y);
            };
            this.Down = function(){
                self.y += 10;
                console.log('Player moved Down:', self.x, self.y);
            };
        };
    };
}

// arrows 函数保持不变，因为move对象的方法现在正确引用了player
function arrows(e){
    switch(e.which){
        case 37: move.Left(); break;
        case 38: move.Up(); break;
        case 39: move.Right(); break;
        case 40: move.Down(); break;
    }
}

// ... drawCanvas 等其他函数

// main.js
var draw = new drawCanvas();
var game = new Game();
var player = new game.Player(250,250);
var move = new player.Move(); // move实例现在通过闭包拥有player的引用

document.addEventListener('keydown',arrows,false);

function loop(){
    draw.background('#00FF00');
    draw.drawLine(0,0,player.x,player.y);
    requestAnimationFrame(loop);
}
requestAnimationFrame(loop);