JavaScript中this上下文的正确使用：解决对象属性访问与方法调用问题

function Game(){
    this.Player = function(x,y){ // (1) Player是一个构造函数
        this.x = x
        this.y = y
        this.Move = function(){ // (2) Move也是一个构造函数，作为Player的属性
            this.Right = function(){ // (3) Right是Move实例的方法
                this.x = 10 // (4) 这里的this指向Move实例，而非Player实例
                console.log(this.x,this.y)
            }
            // ... 其他移动方法类似
        }
    }
}
// main.js中的调用
var player = new game.Player(250,250) // player是Player的实例
var move = new player.Move() // move是Move的实例

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

function arrows(e){
    // 现在直接调用player对象的移动方法
    switch(e.which){
        case 37: player.moveLeft(); break;
        case 38: player.moveUp(); break;
        case 39: player.moveRight(); break;
        case 40: player.moveDown(); break;
    }
}

function getImage(path){
    var img = new Image
    img.src = path
    return img
}

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 = []
    this.Player = function(x,y){
        this.x = x // Player实例的x坐标
        this.y = y // Player实例的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 // 注意：通常y轴向上是减小
            console.log("Player moved up:", this.x, this.y)
        }
        this.moveLeft = function(){
            this.x -= 10
            console.log("Player moved left:", this.x, this.y)
        }
        this.moveDown = function(){
            this.y += 10 // 注意：通常y轴向下是增大
            console.log("Player moved down:", this.x, this.y)
        }
    }
}

var draw = new drawCanvas()
var game = new Game()
var player = new game.Player(250,250) // player是Player的实例

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

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