variable d'objet est indéfini

Question

je suis nouveau à oop concepts si s'il vous plaît aidez-moi ici, Chaque fois que je suis en utilisant une variable d'objet la valeur stockée dans il est défini. S'il vous plaît vérifier le code ci-dessous

---

function Bubble(q, w, e) { 
    var x= q; 
    var y= w; 
    var r = e; 
    var canvas= document.getElementById('mycanvas'); 
    var ctx = canvas.getContext('2d'); 

    ctx.beginPath(); 
    ctx.arc(x,y,r,0,2*Math.PI); 
    ctx.stroke(); 
} 

var b1 = new Bubble(100,100,50); 
var b2 = new Bubble(160,160,30); 
alert(b1.x);  

Answer 1

Utilisation this au lieu de var. Avec var vous créez une variable étendue qui est accessible dans le function scope, avec this vous attachez votre variable au contexte actuel. Reportez-vous au x, y, r avec le préfixe this..

function Bubble(q,w,e) 
 
{ 
 
    this.x = q; 
 
    this.y = w; 
 
    this.r = e; 
 
    var canvas = document.getElementById('mycanvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    
 
    ctx.beginPath(); 
 
    ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI); 
 
    ctx.stroke(); 
 
} 
 

 
var b1 = new Bubble(100,100,50); 
 
var b2 = new Bubble(160,160,30); 
 
alert(b1.x);

<canvas id="mycanvas"></canvas>

Answer 2

Vous ne pouvez pas accéder à la variable x jusqu'à ce que vous ajoutez comme une propriété de bulle essayez d'utiliser this, pour accéder x extérieur. Dans votre exemple, x est une variable privée et vous ne pourrez pas y accéder

function Bubble(q,w,e) 
{ 
    this.x= q; 
    this.y= w; 
    this.r = e; 
    this.canvas= document.getElementById('mycanvas'); 
    var ctx = canvas.getContext('2d'); 

    ctx.beginPath(); 
    ctx.arc(this.x, this.y, this.r,0,2*Math.PI); 
    ctx.stroke(); 
    } 
    var b1 = new Bubble(100,100,50); 
    var b2 = new Bubble(160,160,30); 
    alert(b1.x);