gpt4 book ai didi

javascript - 类变量在 JavaScript 中返回 undefined

转载 作者:行者123 更新时间:2023-12-03 23:53:36 25 4
gpt4 key购买 nike

我是 JavaScript 新手。因此,这个问题有点令人困惑。我试图简单地定义一个计数器并在类方法中递增它,但它的行为不像我期望的那样。具体console.log(this.tick_count);打印 undefined .

JavaScript:

function Game() {
this.fps = 50;
this.ticks = 3;
this.current_time = (new Date).getTime();
this.draw_object = document.getElementById('game_canvas').getContext('2d');
this.tick_count = 0;
}

Game.prototype.update = function (time) {
this.current_time = time;
}

Game.prototype.draw = function () {
this.draw_object.fillRect(10, 10, 55, 50);
}

Game.prototype.run = function () {
self.setInterval(this.tick, 1000 / (this.fps * this.tick));
}

Game.prototype.tick = function () {
this.tick_count++;
console.log(this.tick_count);
}

function start_game() {
var game_object = new Game();
game_object.run();
}

HTML:
<body onload="start_game()">
<canvas id="game_canvas" width="1024" height="1024"></canvas>
</body>

来自 Python 背景,我觉得这种行为很奇怪。我应该如何正确设置我的类变量?

最佳答案

这就是正在发生的事情。

本质上是你tick函数不再在您的 game_object 的上下文中运行目的。这听起来很奇怪,来自 Python 背景,但基本上是 this对象被设置为别的东西。

那么它设置成什么?简单,window对象,我们怎么知道这个?因为setInterval的上下文是 window目的。

将示例作为代码移动,下面的格式将不正确

绑定(bind)示例

setInterval(this.tick.bind(this), 1000 / (this.fps * this.tick)); //Native (JS v1.8+)
$.proxy(this.tick, this); //jQuery
_.bind(this.tick, this); //underscore / lodash

显式上下文示例
Game.prototype.run = function () {  
var _this = this;
setInterval(function() {
//So what is this at the moment? window.
//Luckily we have a reference to the old this.
_this.tick();
}, 1000 / (this.fps * this.tick));
};

你可以通过这两种方式来解决。
  • 将您的函数绑定(bind)到您希望它位于的对象Bind JS v1.8 (看到您使用的 Canvas 应该不是问题。
  • 使用其上下文显式调用该方法。 (见上文)
  • 关于javascript - 类变量在 JavaScript 中返回 undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19033569/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com