Question

这是我的代码，我正在尝试使用canvas：

function Map(){

    this.personnages = new Array();

}

Map.prototype.addPersonnage = function(perso) {

    this.personnages.push(perso);
    console.log(this.personnages);

}

Map.prototype.drawMap = function(){

    console.log(this.personnages);

    for(var i = 0; i < this.personnages.length; i++) {
        this.personnages[i].dessinerPersonnage(context);
    }

}

问题是：第一个console.log打印数组就好了，但第二个（在Map.prototype.drawMap中）返回“undefined”（因此循环无法执行）... 我猜这些函数的调用顺序正确：

var canvas = document.getElementById('main');
var ctx = canvas.getContext('2d');    
var tilesetImage = new Image();
tilesetImage.src = 'img/tileset.png';

var map1 = new Map();
var player = new Personnage("img/player.png", 7, 14, DIRECTION.BAS);
map1.addPersonnage(player);
tilesetImage.onload = map1.drawMap;

我在这里有点新鲜，如果我给了足够的元素，请告诉我。在此先感谢，任何小小的帮助表示赞赏！

Answer 1

tilesetImage.onload = map1.drawMap;

执行map1.drawMap时，this会引用tilesetImage事件的目标load。如果您想this引用map1，可以使用Function.bind：

tilesetImage.onload = map1.drawMap.bind(map1);

或者您可以使用直接在drawMap上调用map1的函数。

tilesetImage.onload = function () { map1.drawMap() };

有关this的详情，请参阅this question。

Answer 2

当你这样做时

map1.drawMap();

在drawMap函数中，this将引用具有map1变量的personnages对象。这就是map1.addPersonnage(player);正常工作的原因。

现在，您只需将drawMap功能分配给tilesetImage.onload即可。因此，在调用tilesetImage.onload时，this会引用tilesetImage，而personnages不会有console.log变量。

这就是为什么第二个undefined打印map1。

要解决此问题，您应该将this对象绑定到此tilesetImage.onload = map1.drawMap.bind(map1);对象

{{1}}

Answer 3

当将实例函数作为事件处理程序

传递时，this的值不是实例

传递闭包或使用bind

在此变量

下的以下答案https://stackoverflow.com/a/16063711/1641941中对此进行了解释

Answer 4

在tilesetImage的帮助下调用methode drawMap，这是一个没有属性personnages的Image-Object，除非你定义它。

此代码可能对您有所帮助：

tilesetImage.onload = map1.drawMap.bind(map1);

希望这有点帮助。

Answer 5

在这里，采取我写的丛林功能。它适用于标准数组和关联数组和jep它也适用于对象添加键/值对。还添加了instanceof defineproperty，用于检查我们是否有新的浏览器或旧的资源管理器，如果是这样，它不会使您创建子节点的每个数组或对象。

    // DIE BUSCHFUNKTION: OBJEKT.BUSCH FUNKTION
// Object/Array.bush() native function that adds a new
// arrayelement to the beginning of the specified.
// Included it also to work for Object Stacks key/value
// pairs and is 2x to 10x times better then default push
if(!('bush' in Object.prototype)){/****/
if((Object.defineProperty instanceof Function))
{(Object.defineProperty(Object.prototype,'bush',{ //modern
  enumerable:false,configurable:true,value:function(key,value)
  {if(key&&value){return this[key]=value;}
     return this[this.length]=key;}}))}
   else{Object.prototype.bush=function(key,value) // compatible
    {if(key&&value){return this[key]=value;}
     return this[this.length]=key;}}};

Javascript - 原型中的数组未定义？

5 个答案: