我刚开始在
javascript中使用oop,我遇到了一些问题,试图从另一个方法中引入一个方法.
这里是我的代码:
- var Game = {
- initialize: function () {
- if (canvas.isSupported()) {
- sprites[0] = new Player();
- this.update();
- }
- },update: function() {
- for (var i = 0; i < sprites.length; i++) {
- sprites[i].update();
- }
- this.draw();
- },draw: function() {
- this.clear();
- for (var i = 0; i < sprites.length; i++) {
- sprites[i].draw();
- }
- setTimeout(this.update,10);
- },clear: function() {
- canvas.context.clearRect(0,canvas.element.width,canvas.element.height);
- }
}
但是调用Game.update()给出了一个未定义draw方法的错误.
我找不到一个真正的解决方案.
最终我发现这个How to call a method inside a javascript object
答案似乎是我需要安全的这样的参考:
var _this = this;
但是我不能用字面符号来表达,所以我把代码改成了对象构造函数(我猜这就是调用它)并添加了变量.
然后我改变了
- this.draw();
至
- _this.draw();
它工作.
虽然
- this.clear();
而this.update()仍然是一样的,他们从来没有出现过错误.
任何人都可以解释为什么会这样吗?也许指点一个更好的解决方案?
提前致谢.
更新
这是它应该是:
- var Game = function () {
- var _this = this;
- this.initialize = function () {
- if (canvas.isSupported()) {
- sprites[0] = new Player();
- this.update();
- }
- }
- this.update = function () {
- for (var i = 0; i < sprites.length; i++) {
- sprites[i].update();
- }
- this.draw();
- }
- this.draw = function () {
- this.clear();
- for (var i = 0; i < sprites.length; i++) {
- sprites[i].draw();
- }
- setTimeout(function () { _this.update(); },10);
- }
- this.clear = function () {
- canvas.context.clearRect(0,canvas.element.height);
- }
}
解决方法
当你这样做:
- setTimeout(this.update,10);
这正确地将对您的“更新”功能的引用传递给系统,但是当浏览器实际上稍后调用该函数时,它将不知道这应该是什么.可以做的是:
- var me = this;
- setTimeout(function() { me.update(); },10);
这将确保当“更新”被调用时,它将被正确地调用,作为对象的引用.
与其他一些语言不同,函数最初定义为对象的属性的事实并不会将该函数内在地绑定到该对象.以同样的方式,如果你有一个对象具有一个简单的数字:
- maxLength: 25,
值“25”与物体无关;这只是一个价值.在JavaScript中,函数也只是值.因此,程序员有义务确保每当以某种“特殊”方式调用函数时,这将被设置为适当的值.