मेरे पास एक साधारण जावास्क्रिप्ट कंस्ट्रक्टर-फ़ंक्शन है जो एक ऐसी वस्तु का निर्माण करता है जिसे जीवन के खेल को आकर्षित करने वाला माना जाता है:

function startGame() {
    var myGameOfLife = new GameOfLife();
    myGameOfLife.initialize(500, 500);	
}



function GameOfLife() {
    this.canvas = document.createElement("canvas");
    this.initialize = function(width, height) {
        this.canvas.width = width;
        this.canvas.height = height;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(this.update, 20);
    }
    this.update = function(){
	this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }	
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>


</script>
</body>
</html>

जब मैं इस स्क्रिप्ट को डीबग करता हूं, तो मैं देख सकता हूं कि प्रारंभिक-फ़ंक्शन this.context में असाइन किया गया है। लेकिन जब अंतराल द्वारा अद्यतन-फ़ंक्शन को कॉल किया जाता है, तो this.context अपरिभाषित होता है।

यह अपरिभाषित क्यों है जब मैं स्पष्ट रूप से इसे पहले परिभाषित किया जा रहा देख सकता हूं?

0
Olli 19 अक्टूबर 2018, 12:14

1 उत्तर

सबसे बढ़िया उत्तर

आप update फ़ंक्शन में गलत this की बात कर रहे हैं।

बस सही संदर्भ को बांधें (यह GameOfLife कंस्ट्रक्टर का संदर्भ है)

this.interval = setInterval(this.update.bind(this), 20);

या वैकल्पिक रूप से एक तीर फ़ंक्शन का उपयोग करें ताकि इसे बाहरी दायरे का उत्तराधिकारी बनाया जा सके।

this.update = () => {
  this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}   
2
Karim 19 अक्टूबर 2018, 09:25