JavaScriptコンストラクタ：これはプロパティか変数ですか？

Question

私は、JavaScriptのゲームで使用するために、canvas要素でサーフィンして、私はこのコードを見つけました：

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); 
} 

私の質問はctxプロパティで何ですか？またはプライベート変数？

ctxは、このコンストラクタの外側では（var ctxのように）宣言されていない、または使用されていません。これはこのコードの中だけです。

私はあなたがvar予約語なしで直接値で変数を設定している場合、あなたはグローバルに宣言している聞きます。しかし、そのctx変数は、そのコンストラクタの外で使用されていないので、役に立たないですか？

また、keyプロパティをオブジェクトのインスタンスに設定するときも同じことが行われます。

完全コード...

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

はい、少なくともVARとしてそれを宣言しないでかなり悪い習慣であると思われます。変数がvar/let/constで宣言されていない場合、Javascriptエンジンはそれらをグローバル名前空間に定義し、未知の副作用を持つ可能性があります。 myGameAreaグローバル（？）変数へのアクセスがあることを少し心配しています。なぜこれはコンストラクタに注入されないのですか？そのようなことが明確にされているでしょう：

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

その関数が他の関数の内部にそれ自体によるものではない場合、可能性がctxあるグローバル変数です。ローカル変数を使用する場合は、代わりにvar ctxを使用する必要がありますが、外部からはアクセスできません。変数ctxへのアクセスが必要な場合は、this.ctxと宣言する必要があります。

それは別の関数内にある場合、それは、キャプチャ変数のようになります。

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

あなたは関数の本体内部変数を参照する場合、JS変数を見つけるために、機能のscope chainを検索します。変数は関数自体の内部で宣言されていない場合は

、それがグローバルスコープで最後に、任意の外側の機能（複数可）の範囲になります。

あなたが提示したフラグメントから、ctxが囲み関数で宣言されているかどうか、またはグローバル変数かどうかはわかりませんが、コンストラクタの外側では使用されていないと言われます。バランスの取れたところでは、作者が誤ってローカル変数の代わりにグローバルを使用していたと言います。余談として

：私は、このような誤ってグローバル変数を使用したなどのエラーをピックアップするなどjshintなどのツールを使用することをお勧めします。