深入理解JavaScript中this的上下文与对象方法设计

// functions.js 节选
function Game(){
    this.Player = function(x,y){ // Player 是 Game 实例的一个构造函数属性
        this.x = x
        this.y = y
        this.Move = function(){ // Move 是 Player 实例的一个构造函数属性
            this.Right = function(){ // Right 是 Move 实例的一个方法
                this.x = 10 // 这里的 this 指向 Move 实例，而非 Player 实例
                console.log(this.x,this.y)
            }
            // ... 其他方向方法
        }
    }
}

// main.js 节选
var game = new Game()
var player = new game.Player(250,250) // player 是 Player 实例
var move = new player.Move() // move 是 Move 实例

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

// functions.js 节选
function arrows(e){
    switch(e.which){
        case 37: move.Left(); break; // 调用 move 实例的方法
        // ...
    }
}

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
var Characters = 'Images/Characters/';
var Background = 'Images/Background/';

// ... 其他辅助函数保持不变

function drawCanvas(){
    this.background = function(color='#FFFFFF'){
        ctx.beginPath();
        ctx.rect(0,0,500,500);
        ctx.fillStyle = color;
        ctx.fill();
    }
    this.drawLine = function(x1,y1,x2,y2,color='#000000'){
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2);
        ctx.strokeStyle = color;
        ctx.stroke();
    }
}

function Game(){
    this.sprites = [];
    // Player 构造函数
    this.Player = function(x,y){
        this.x = x;
        this.y = y;
        this.speed = 5; // 增加一个速度属性，使移动更灵活

        // 将移动方法直接定义在 Player 实例上
        this.moveRight = function(){
            this.x += this.speed;
            console.log('Player moved Right:', this.x, this.y);
        };
        this.moveUp = function(){
            this.y -= this.speed; // Canvas Y轴向下为正，向上移动Y值减小
            console.log('Player moved Up:', this.x, this.y);
        };
        this.moveLeft = function(){
            this.x -= this.speed;
            console.log('Player moved Left:', this.x, this.y);
        };
        this.moveDown = function(){
            this.y += this.speed; // Canvas Y轴向下为正，向下移动Y值增大
            console.log('Player moved Down:', this.x, this.y);
        };
    };
}

// `arrows` 函数现在直接调用 player 对象上的方法
function arrows(e){
    // 确保 player 对象已定义
    if (typeof player === 'undefined') {
        console.error("Player object is not initialized.");
        return;
    }
    switch(e.which){
        case 37: player.moveLeft(); break;
        case 38: player.moveUp(); break;
        case 39: player.moveRight(); break;
        case 40: player.moveDown(); break;
    }
}

var draw = new drawCanvas();
var game = new Game();
var player = new game.Player(250,250); // player 是 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);
    requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

// functions.js 节选 - 仅展示 Game 和 Player 的修改
function Game(){
    this.sprites = [];
    this.Player = function(x,y){
        this.x = x;
        this.y = y;
        this.speed = 5;
        // Move 构造函数现在接受一个 player 实例作为参数
        this.MoveController = function(playerInstance){
            this.Right = function(){
                playerInstance.x += playerInstance.speed;
                console.log('Player moved Right (via controller):', playerInstance.x, playerInstance.y);
            };
            this.Up = function(){
                playerInstance.y -= playerInstance.speed;
                console.log('Player moved Up (via controller):', playerInstance.x, playerInstance.y);
            };
            this.Left = function(){
                playerInstance.x -= playerInstance.speed;
                console.log('Player moved Left (via controller):', playerInstance.x, playerInstance.y);
            };
            this.Down = function(){
                playerInstance.y += playerInstance.speed;
                console.log('Player moved Down (via controller):', playerInstance.x, playerInstance.y);
            };
        };
    };
}

// main.js 节选
var draw = new drawCanvas();
var game = new Game();
var player = new game.Player(250,250);
// 创建 MoveController 实例，并传入 player 实例
var moveController = new player.MoveController(player);

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

// functions.js 中的 arrows 函数需要修改为调用 moveController 的方法
function arrows(e){
    if (typeof moveController === 'undefined') {
        console.error("MoveController object is not initialized.");
        return;
    }
    switch(e.which){
        case 37: moveController.Left(); break;
        case 38: moveController.Up(); break;
        case 39: moveController.Right(); break;
        case 40: moveController.Down(); break;
    }
}