なぜこのオブジェクトで未定義のプロパティを読み取ることができませんか？

Question

問題が何であるか把握するのに役立つ人がいますか？「TypeError：未定義（...）のプロパティ 'draw_map'機能

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

が自己オブジェクトを返さないため

おそらくあなたがそうCH構築機能としてそれを使用したい

おそらく

$(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

：ブラウザに以下のコードを実行するときアンジュnew演算子を使用して、この行：

ここ

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

Answer 2

は（コメントアウトHTML要素を持つ）作業コードです。問題は、関数コンストラクタ内で参照を使用していないことと、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>