本文深入探讨了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属性无法被正确访问的问题，使得游戏角色能够按照预期进行移动。
以上就是JavaScript中this上下文的正确使用：解决对象属性访问与方法调用问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588602.html
微信扫一扫 
支付宝扫一扫 
