web-dev-qa-db-ja.com

window.variableまたはvarを使用する必要がありますか？

他の多くのJSファイルで使用されるパネル、ボタンなどを定義する多くのセットアップJSコードがあります。

通常、次のようなことを行います。

grid.js

var myGrid = .....

combos.js

var myCombo = .....

次に、アプリケーションコードで、次のことを行います。

application.js

function blah() {
    myGrid.someMethod()
}

someother.js

function foo() {
    myCombo.someMethod();
    myGrid.someMethod();
}

したがって、var myGridを使用するか、window.myGridを使用する方が良いでしょうか

違いは何ですか？

javascriptglobal-variables
55
cbmeeks

名前空間変数var App = {};を作成することをお勧めします

App.myGrid = ...

これにより、グローバル名前空間の汚染を制限できます。

編集：変数の問題について-2つの可能な解決策が思い浮かびます：

  1. タイプ（グリッド、ボタンなど）またはリレーションシップ（ClientInfoSection、AddressSectionなど）でさらに名前空間を指定できます。
  2. 所有するコンポーネントでインスタンス化されるオブジェクトにメソッドをカプセル化します

例：あなたは持っています

function foo() {
    myCombo.someMethod();
    myGrid.someMethod();
}

になる：

var Foo = function(combo, grid) {
    var myCombo = combo;//will be a private property
    this.myGrid = grid;//will be a public property
    this.foo = function() {//public method
        myCombo.someMethod();
        myGrid.someMethod();
    }
}
App.myFoo = new Foo(someCombo, someGrid);
App.myFoo.foo();

このようにして、小さなオブジェクトの量を制限し、必要なものだけを公開します（つまり、foo関数）

PS：内部コンポーネントを公開する必要がある場合は、コンストラクタ関数内でこれに追加します

40
Liviu T.

機能の潜在的に重要な違いは、window.myGridはdeletedであり、var myGridできません。

var test1 = 'value';
window.test2 = 'value';


console.log( delete window.test1 ); // false ( was not deleted )
console.log( delete window.test2 ); // true  ( was deleted )


console.log( test1 );  // 'value'         ( still accessible )
console.log( test2 );  // ReferenceError  ( no longer exists )
58
user113716

window.variableの便利な使用法の1つは、javascriptエラーなしでチェックできることです。たとえば、次の場合：

if (myVar) {
    //do work
}

myVarがページのどこにも定義されていない場合、javascriptエラーが発生します。しかしながら：

if (window.myVar) {
    //do work
}

エラーは発生せず、期待どおりに機能します。

var myVar = 'test'とwindow.myVar = 'test'はほぼ同等です。

それとは別に、他の人が言ったように、グローバル名前空間を汚染しないように、1つのグローバルオブジェクトから派生する必要があります。

11
aepheus

グローバルスコープでは、2つは実際には機能的に同等です。関数スコープでは、クロージャーの動作が必要な場合、varが確実に望ましいです。

常にvarを使用します。まず、クロージャーで通常好まれる動作と一貫性があります（したがって、後で行う場合はクロージャーにコードを移動しやすくなります）。ウィンドウのプロパティをアタッチするよりも変数を作成していると言ったほうが意味があります。しかし、この時点ではほとんどがスタイルです。

8
Jeremy Roman

この質問に対する一般的な答えは、varを使用することです。

より具体的には、常にコードを Immediately Invoked Function Expression（IIFE） に入れます。

(function(){
  var foo,
      bar;
  ...code...
})();

これにより、fooやbarなどの変数がグローバル名前空間を汚染しないようにします。次に、グローバルオブジェクト（通常window）上にある変数を明示的にwantする場合、次のように記述できます。

window.foo = foo;

JavaScriptには機能的なスコープがあり、それを最大限に活用するのは本当に良いことです。他のプログラマーがタイマーハンドルを上書きしたような愚かなことをしたからといって、アプリが壊れるのは望ましくありません。

6
zzzzBov

他の答えに加えて、変数の宣言中に関数内でvarを使用しない場合、それはleaksを自動的にwindowオブジェクト（またはグローバルスコープ）のプロパティにすることです。

3
Mrchief

Liviuが言ったことを拡張するには、次を使用します。

App = (function() {
    var exports = {};
    /* code goes here, attach to exports to create Public API */
    return exports; 
})();

そうすることで、実装固有のコードの一部を隠すことができます。コードは、varの内部を使用して公開したくない場合があります。ただし、exportsオブジェクトにアタッチされたものにはアクセスできます。

1
Justin Long