JavaScript-Konstruktor: Ist das eine Eigenschaft oder eine Variable?

Question

ich auf dem Canvas-Element war das Surfen mit JavaScript-Spiele zu verwenden und fand ich diesen Code:

function component(width, height, color, x, y) { 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y; 
    ctx = myGameArea.context; // **why not: var ctx= myGameArea.context ???** 
    ctx.fillStyle = color; 
    ctx.fillRect(this.x, this.y, this.width, this.height); 
} 

Meine Frage ist, was ctx ist eine Eigenschaft? Oder eine private Variable?

ctx ist nicht deklariert oder sogar außerhalb dieses Konstruktors verwendet (wie: var ctx). Es ist nur innerhalb dieses Codes.

Ich höre, wenn Sie eine Variable mit einem Wert direkt ohne das reservierte Wort var setzen, deklarieren Sie eine globale. Aber diese ctx Variable wird nicht außerhalb dieses Konstruktors verwendet, ist also nutzlos?

Auch sie tun dasselbe, wenn sie die Eigenschaft key auf eine Instanz eines Objekts setzen.

Der ganz Code ...

var myGamePiece; 

function startGame() { 
    myGameArea.start(); 
    myGamePiece = new component(30, 30, "red", 10, 120); 
} 

var myGameArea = { 
    canvas : document.createElement("canvas"), 
    start : function() { 
     this.canvas.width = 480; 
     this.canvas.height = 270; 
     this.context = this.canvas.getContext("2d"); 
     document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
    } 
} 

function component(width, height, color, x, y) { 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y;  
    ctx = myGameArea.context; 
    ctx.fillStyle = color; 
    ctx.fillRect(this.x, this.y, this.width, this.height); 
} 

Answer 1

Ja, es scheint, dass es eine ziemlich schlechte Praxis ist es nicht zumindest als var zu deklarieren. Wenn eine Variable nicht mit var/let/const deklariert ist, definiert das Javascript-Modul sie im globalen Namespace und kann unbekannte Nebenwirkungen haben. Es ist ein wenig beunruhigend, dass es einen Zugriff auf die globale Variable myGameArea (?) Gibt. Warum wird dies nicht in den Konstruktor eingefügt? So etwas hätte klarer sein:

function component(width, height, color, x, y, myGameArea) { 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y; 

    var ctx = myGameArea.context; 
    ctx.fillStyle = color; 
    ctx.fillRect(this.x, this.y, this.width, this.height); 
} 

Answer 2

Wenn diese Funktion für sich allein und nicht in einer anderen Funktion dann sind die Chancen ctx eine globale Variable ist. Wenn eine lokale Variable gewünscht wird, sollte var ctx stattdessen verwendet werden, aber von außen nicht zugänglich sein. Wenn der Zugriff auf die Variable ctx gewünscht wird, sollte sie als this.ctx deklariert werden.

Wenn es innerhalb einer anderen Funktion ist dann könnte es ein erfasstes variabel sein:

function parent() { 
    var ctx = parentArea.context; 

    function component(width, height color, x, y) { 
     this.width = width; 
     this.height = height; 
     this.x = x; 
     this.y = y; 
     ctx = myGameArea.context; // References parent's ctx variable 
     ctx.fillStyle = color; 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
    } 
} 

Answer 3

Wenn Sie auf eine Variable im Innern des Körpers einer Funktion beziehen, JS die scope chain die Funktion sucht die Variable zu finden.

Wenn die Variable nicht innerhalb der Funktion selbst deklariert wurde, wird sie im Bereich der einschließenden Funktion (en) und schließlich im globalen Gültigkeitsbereich angezeigt.

Aus dem fraglichen Fragment können wir nicht sehen, ob ctx in einer einschließenden Funktion deklariert ist, oder ist eine globale Variable, obwohl Sie sagen, dass es außerhalb des Konstruktors nicht verwendet wird, was bedeutet, dass es nirgendwo deklariert ist. Unter dem Strich würde ich sagen, dass der Autor versehentlich eine globale statt einer lokalen Variable verwendet hat.

Als Nebenbemerkung: Ich empfehle, ein Tool wie jshint zu verwenden, um Fehler wie globale Variablen versehentlich zu erfassen.