為什么得到“無法讀取該對象的未定義屬性...”？

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>