本文深入探讨了javascript中`this`关键字在面向对象编程，特别是游戏开发场景下，因上下文错误导致对象属性`undefined`或`nan`的问题。通过分析原始代码结构，我们揭示了嵌套构造函数中`this`指向的误区，并提供了一种将移动逻辑直接集成到玩家对象的方法，从而确保`x`和`y`属性能够被正确访问和修改，实现角色流畅移动。
理解JavaScript中的this上下文
在JavaScript中，this关键字的行为是一个常见的难点，其值取决于函数被调用的方式，而不是函数被定义的位置。这被称为“执行上下文”。以下是几种常见的this绑定规则：
- 全局上下文： 在全局作用域中，this指向全局对象（浏览器中是window，Node.js中是global）。
- 方法调用： 当函数作为对象的方法被调用时，this指向该对象。例如，obj.method()中，this指向obj。
- 构造函数调用： 当函数使用new关键字作为构造函数调用时（例如new MyObject()），this会指向新创建的实例对象。
- 普通函数调用： 在严格模式下，普通函数调用（例如func()）中的this是undefined；在非严格模式下，this指向全局对象。
- 显式绑定： 可以使用call()、apply()或bind()方法显式地设置this的值。
- 箭头函数： 箭头函数没有自己的this绑定，它会捕获其所在词法作用域的this值。
原始代码问题分析
在提供的代码中，核心问题在于Game构造函数内部的Player构造函数，以及Player构造函数内部的Move构造函数。
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 move = new player.Move()时，move成为player.Move的一个新实例。此时，move对象本身并没有x和y属性。当调用move.Right()时，Right方法内部的this指向的是move这个Move实例，而不是player这个Player实例。因此，this.x和this.y在Right方法内部试图访问的是move实例上的属性，而这些属性不存在，导致它们的值为undefined，进一步操作可能产生NaN。
为了让移动方法能够正确修改玩家的x和y坐标，这些方法需要能够访问到player实例的x和y。
立即学习“Java免费学习笔记（深入）”；
解决方案：重构玩家移动逻辑
最直接且符合逻辑的解决方案是将玩家的移动方法直接作为Player对象的方法。这样，在这些方法内部，this将正确地指向Player实例，从而能够访问和修改其x和y属性。
修正后的functions.js
我们将Move构造函数内部的移动逻辑直接提升到Player构造函数中，作为Player实例的方法。
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)
}
}
}修正后的main.js
由于移动方法现在直接在player对象上，我们不再需要创建move实例。
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)解释修正
通过将moveRight, moveUp, moveLeft, moveDown方法直接定义在this.Player构造函数内部，它们成为了Player实例的方法。当player.moveRight()等方法被调用时，this的上下文将自动绑定到player实例。这样，this.x和this.y就能正确地访问和修改player实例自身的x和y属性。
注意事项与最佳实践
this的明确性： 在JavaScript中，this的行为有时会让人困惑。始终考虑函数被调用的方式，以确定this的指向。
避免不必要的嵌套： 在设计对象结构时，尽量避免创建不必要的嵌套构造函数。如果一个功能（如移动）是某个对象（如玩家）的核心行为，那么它应该直接作为该对象的方法。
-
使用原型链： 对于性能敏感或需要创建大量相同类型对象的场景，可以将方法定义在构造函数的原型（Player.prototype）上，而不是直接在构造函数内部。这样可以避免为每个实例重复创建方法。
function Game(){ this.sprites = []; this.Player = function(x,y){ this.x = x; this.y = y; }; // 方法定义在原型上 this.Player.prototype.moveRight = function(){ this.x += 10; console.log("Player moved right:", this.x, this.y); }; // ... 其他移动方法类似 } 箭头函数与this： 箭头函数不绑定自己的this，它会继承其父级作用域的this。在某些场景下，这可以帮助解决this上下文丢失的问题，尤其是在回调函数中。但在此案例中，直接将方法作为对象属性更清晰。
变量命名： 确保变量名清晰、具有描述性，避免混淆。
总结
正确理解和使用JavaScript中的this关键字对于构建健壮的面向对象应用至关重要。本教程通过一个游戏角色移动的实例，详细解释了因this上下文误用而导致的问题，并提供了一种简洁有效的重构方案。核心思想是确保方法在被调用时，其内部的this能够正确指向其所属的对象实例。通过将移动逻辑直接集成到Player对象中，我们解决了x和y属性无法被正确访问的问题，使得游戏角色能够按照预期进行移动。
