为什么得到“无法读取该对象的未定义属性...”？

Question

有人可以帮我找出问题所在。 运行以下代码时，在浏览器中出现错误“ TypeError：无法读取undefined（…）的属性'draw_map'”：

$(document).ready(function() {

Maps = function(id, img_src, width, height) {
    var self = {
        id: id,
        img: new Image(),
        width: width,
        height: height
    }

    self.img.src = img_src;

    self.draw_map = function() {
        ctx.drawImage(self.img, 0, 0, self.img.width, self.img.height, 100, 100, self.img.width * 2, self.img.height * 2);
    }
}

function update_canvas() {

    current_map.draw_map();

}

///////////////////////////////////////////

// get context to draw on canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Load Image for map
var current_map = Maps("field", "img/dirt.jpeg", 120, 480);

// Drawing
setInterval(update_canvas, 500); 

}); // End of Document.ready

Answer 1

可能是因为功能

Maps = function(...) { ... }

不返回自身对象。

可能您想将其用作构造函数，因此请使用new运算符更改此行：

var current_map = new Maps("field", "img/dirt.jpeg", 120, 480);

Answer 2

这是一个工作代码（HTML元素已注释掉）。 问题是您没有在函数构造函数中使用this引用，然后没有使用new运算符创建实例。

 $(document).ready(function() { Maps = function(id, img_src, width, height) { this.id = id; this.width = width; this.height = height; this.img = new Image() // replace with your Image this.img.src = img_src; var self = this; // Required for the draw_map function this.draw_map = function() { console.log("Draw image", self.img.width, self.img.height); // Uncomment in your code: ctx.drawImage(self.img, 0, 0, self.img.width, self.img.height, 100, 100, self.img.width * 2, self.img.height * 2); } } function update_canvas() { current_map.draw_map(); } /////////////////////////////////////////// // get context to draw on canvas. Uncomment //var canvas = document.getElementById("canvas"); //var ctx = canvas.getContext("2d"); // Load Image for map var current_map = new Maps("field", "img/dirt.jpeg", 120, 480); // Drawing setInterval(update_canvas, 500); }); // End of Document.ready 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>