me_javascript スキルで JavaScript グローバル変数を学習する

1. グローバル オブジェクトはできるだけ使用しない

グローバル変数の問題は、これらのグローバル変数が JavaScript アプリケーションと Web ページのすべてのコードで共有されるため、プログラムの 2 つの異なる部分で同じ名前が定義されている場合に発生します。さまざまな関数 グローバル変数を使用する場合、名前の競合は避けられません。

Web ページには、ページの開発者が作成したものではないコードが含まれることもよくあります。たとえば、

• サードパーティの JavaScript ライブラリ
• 広告主のスクリプト コード
• サードパーティのユーザー追跡および分析スクリプト コード
• さまざまなタイプのウィジェット、フラグ、ボタン

たとえば、サードパーティのスクリプトは result という名前のグローバル変数を定義し、関数内でも result という名前のグローバル変数を定義します。その結果、後の変数が前の変数を上書きし、サードパーティのスクリプトが突然げっぷをすることになります。

コード内のどこかで誤ってグローバル変数を変更すると、そのグローバル変数に依存する他のモジュールでエラーが発生するためです。さらに、エラーの原因をデバッグして見つけることは困難です。

さらに、Web ページを実行するにはウィンドウ オブジェクトを使用する必要があり、ブラウザ エンジンはウィンドウのプロパティを再度トラバースする必要があるため、パフォーマンスが低下します。

• グローバル変数は、異なるモジュール間のリンクです。モジュールは、グローバル変数を介して相互に提供される関数にのみアクセスできます。
• ローカル変数を使用できる場合は、グローバル変数を決して使用しないでください

var i,n,sum//globals
function averageScore(players){
 sum =0;
 for(i = 1, i = player.length; i<n; i++){
  sum += score(players[i]);
 }
 return sum/n;
}

これらの変数はローカルに保持し、それらを使用する必要があるコードの一部としてのみ使用してください。

function averageScore(players){
var i,n,sum;
 sum =0;
 for(i = 1, i = player.length; i<n; i++){
  sum += score(players[i]);
 }
 return sum/n;
}

ブラウザでは、this キーワードはグローバル ウィンドウ オブジェクトを指します
JavaScript のグローバル名前空間は、プログラムのグローバル スコープでアクセス可能なグローバル オブジェクトとしても公開され、this キーワードの初期値として機能します。 Web ブラウザでは、グローバル オブジェクトはグローバル ウィンドウ変数にバインドされます。グローバル変数を追加または変更すると、グローバル オブジェクトが自動的に更新されます。

this.foo; //undefined
foo ="global foo"; //"global foo"
this.foo; //"global foo"

同様に、グローバル オブジェクトを更新すると、グローバル名前空間も自動的に更新されます。

var foo ="global foo";
this.foo; //"global foo"
this.foo ="changed";
foo; //"changed"

グローバル オブジェクトを変更する 2 つの方法: var キーワードを使用して宣言する方法と、(this キーワードを使用して) グローバル オブジェクトに属性を設定する方法

グローバル オブジェクトを使用して、現在の実行環境の機能検出 (Feature Detection) を実行します。たとえば、ES5 は JSON データを操作するための JSON オブジェクトを提供し、if (this.JSON) を使用して現在の実行環境かどうかを判断できます。 JSON

をサポートしています。

if(!this.JSON){
 this.JSON ={
  parse:...,
  stringify:...
 }
}

2. グローバル変数を回避する方法

方法 1: グローバル変数を 1 つだけ作成します。

MYAPP.stooge = {
 "first-name": "Joe",
 "last-name": "Howard"
};

MYAPP.flight = {
 airline: "Oceanic",
 number: 815,
 departure: {
  IATA: "SYD",
  time: "2004-09-22 14:55",
  city: "Sydney"
 },
 arrival: {
  IATA: "LAX",
  time: "2004-09-23 10:42",
  city: "Los Angeles"
 }
};

方法 2: モジュール モードを使用する

var serial_maker = function ( ) {

// Produce an object that produces unique strings. A
// unique string is made up of two parts: a prefix
// and a sequence number. The object comes with
// methods for setting the prefix and sequence
// number, and a gensym method that produces unique
// strings.

 var prefix = '';
 var seq = 0;
 return {
  set_prefix: function (p) {
   prefix = String(p);
  },
  set_seq: function (s) {
   seq = s;
  },
  gensym: function ( ) {
   var result = prefix + seq;
   seq += 1;
   return result;
  }
 };
}( );

var seqer = serial_maker( );
seqer.set_prefix = 'Q';
seqer.set_seq = 1000;
var unique = seqer.gensym( ); // unique is "Q1000"

いわゆる モジュール モード は、プライベート変数と特権オブジェクトを含む関数を作成します。特権オブジェクトの内容は、プライベート変数にアクセスできることです。クロージャ関数を使用し、最後に特権オブジェクトを返します。

まず、方法 2 はグローバル変数として使用できるだけでなく、グローバル変数をローカルで宣言するためにも使用できます。なぜなら、seqer を未知の場所で変更したとしても、それは文字列ではなくオブジェクトであるため、すぐにエラーが報告されるからです。

方法 3: グローバル変数をゼロにする

ゼロ グローバル変数は、実際には、閉じられたコードの小さなセクションに適応するために採用されたローカル変数処理方法であり、一部の特殊なシナリオでの使用にのみ適しています。最も一般的なのは、他のスクリプトからアクセスされない完全に独立したスクリプトです。
ゼログローバル変数を使用するには、即時実行関数を使用する必要があります。使用方法は次のとおりです。

( function ( win ) {

 'use strict' ;
 var doc = win.document ;
 //在此定义其他的变量并书写代码
} )

3. 予期しないグローバル変数

JavaScript の 2 つの特性により、無意識のうちにグローバル変数を作成するのは驚くほど簡単です。まず、変数は宣言しなくても使用できます。第 2 に、JavaScript には暗黙的なグローバルの概念があり、宣言していない変数はグローバル オブジェクト プロパティになります。以下のコードを参照してください:

function sum(x, y) {
 // 不推荐写法: 隐式全局变量
 result = x + y;
 return result;
}

このコードの結果は宣言されていません。コードは引き続き正常に動作しますが、関数を呼び出した後、余分なグローバル名前空間が作成されることになり、これが問題の原因となる可能性があります。

改良された sum() 関数で示されているように、経験則として変数の宣言には常に var を使用する必要があります。

function sum(x, y) {
 var result = x + y;
 return result;
}

暗黙的なグローバル変数の作成に対するもう 1 つの反例は、部分的な var 宣言にタスク チェーンを使用することです。次のスニペットでは、a はローカル変数ですが、b はグローバル変数です。これはおそらくあなたが望むものではありません:

// 反例，勿使用
function foo() {
 var a = b = 0;
 // ...
}

此现象发生的原因在于这个从右到左的赋值，首先，是赋值表达式b = 0，此情况下b是未声明的。这个表达式的返回值是0，然后这个0就分配给了通过var定义的这个局部变量a。换句话说，就好比你输入了：

var a = (b = 0);
如果你已经准备好声明变量，使用链分配是比较好的做法，不会产生任何意料之外的全局变量，如：

function foo() {
 var a, b;
 // ... a = b = 0; // 两个均局部变量
}

然而，另外一个避免全局变量的原因是可移植性。如果你想你的代码在不同的环境下（主机下）运行，使用全局变量如履薄冰，因为你会无意中覆盖你最初环境下不存在的主机对象

  总是记得通过var关键字来声明局部变量

 使用lint工具来确保没有隐式声明的全局变量

以上就是对javascript的全局变量介绍，希望对大家的学习有所帮助。