* JavaScriptの基礎5スコープ・事前分析・オブジェクト・トラバーサルオブジェクト

1スコープ

1.1範囲の概要

一般的に、プログラムコードで使用されている名前は、常に有効で使用できるとは限りません。名前の可用性を制限するコードの範囲は、名前の範囲です。スコープを使用すると、プログラムロジックの局所性が向上し、プログラムの信頼性が向上し、名前の競合が減少します。

JavaScriptには2つのスコープがあります（es6より前）。

グローバルスコープ
ローカルスコープ（関数スコープ）

1.2グローバルスコープ

	作用于所有代码执行的环境(整个script标签内部)或独立的js文件。

1.3ローカルスコープ

	作用于函数内的代码环境，就是局部作用域。 
	因为跟函数有关系，所以也称为函数作用域。

1.4jSにはブロックレベルのスコープがありません

ブロックスコープは{}でカバーされています。
他のプログラミング言語（java、c＃など）では、ifステートメントとループステートメントで作成された変数は、次のJavaコードなど、このifステートメントとループステートメントでのみ使用できます：

Javaにはブロックレベルのスコープがあります。
```
if(true){
      
      
  int num = 123;
  system.out.print(num);  // 123
}
system.out.print(num);    // 报错
```
{}はコード内のスコープであり、宣言された変数numは "{}"の外部では使用できないため、上記のJavaコードはエラーを報告します。同様のJavaScriptコードはエラーを報告しません。

jsにはブロックレベルのスコープはありません（ES6より前）
```
if(true){
      
      
  var num = 123;
  console.log(123); //123
}
console.log(123);   //123
```

2-変数のスコープ

在JavaScript中，根据作用域的不同，变量可以分为两种：

グローバル変数
ローカル変数

2.1グローバル変数

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。

グローバル変数は、コード内のどこでも使用できます
グローバルスコープでvarによって宣言された変数はグローバル変数です
特別な場合、関数でvarなしで宣言された変数もグローバル変数です（非推奨）

2.2ローカル変数

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

ローカル変数は関数内でのみ使用できます
関数内でvarによって宣言された変数はローカル変数です
関数の正式なパラメーターは実際にはローカル変数です

2.3グローバル変数とローカル変数の違い

グローバル変数：任意の場所で使用でき、ブラウザを閉じたときにのみ破棄されるため、より多くのメモリを消費します
ローカル変数：関数内でのみ使用されます。コードブロックが実行されると初期化されます。コードブロックが終了すると破棄されるため、メモリスペースを節約できます。

3スコープチェーン

コードが同じスコープ内にある限り、関数内のローカルスコープに書き込まれ、関数内に記述されていない場合はグローバルスコープ内にあります。関数内に関数がある場合は、別の1つはこのスコープスコープで生まれることができます。** [内部関数は外部関数変数にアクセスできます] **のこのメカニズムに従って、チェーン検索を使用して、スコープチェーンと呼ばれる内部関数からアクセスできるデータを決定します。

案例分析1：
function f1() {
    
    
    var num = 123;
    function f2() {
    
    
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

ここに画像の説明を挿入

作用域链：采取就近原则的方式来查找变量最终的值
var a = 1;
function fn1() {
    
    
    var a = 2;
    var b = '22';
    fn2();
    function fn2() {
    
    
        var a = 3;
        fn3();
        function fn3() {
    
    
            var a = 4;
            console.log(a); //a的值 ?
            console.log(b); //b的值 ?
        }
    }
}
fn1();

ここに画像の説明を挿入

4-事前解析

4.1事前分析の関連概念

JavaScriptコードは、ブラウザーのJavaScriptパーサーによって実行されます。

JavaScriptパーサーは、JavaScriptコードを実行するときに2つのステップに分けられます。

事前解析とコード実行。

事前分析：現在のスコープでは、JSコードが実行される前に、ブラウザーはデフォルトで、事前にメモリ内の変数および関数宣言を使用して変数を宣言または定義します。事前分析は、変数および関数の昇格とも呼ばれます。
コードの実行：JSステートメントは上から下に実行されます。

注：事前分析は、コードが実行される前に変数と関数の宣言を完了します。

4.2変数の事前分析

変数の宣言は現在のスコープの最上位にプロモートされ、変数の割り当てはプロモートされません。

console.log(num);  // 结果是多少？
var num = 10;      // ？

結果：未定義
注：変数の昇格は宣言のみを昇格させ、割り当ては昇格させません

4.3機能の事前分析

関数の宣言は現在のスコープの最上位にプロモートされますが、関数は呼び出されません。

fn();
function fn() {
    
    
    console.log('打印');
}

結果：コンソール印刷文字列— "print"

注：関数宣言は関数全体を表すため、関数がプロモートされた後、関数名は関数全体を表しますが、関数は呼び出されません。

4.4関数式宣言関数の問題

関数式は関数を作成し、変数の昇格を実行します

fn();
var  fn = function() {
    
    
    console.log('想不到吧');
}

結果：「fnは関数ではありません」というエラープロンプト

説明：このコードが実行される前に、変数宣言がプロモートされます。プロモート後のfnの値は未定義であり、fnの呼び出しは、fnの値が関数本体に割り当てられる前です。この時点で、値はfnのは未定義であるため、正しく呼び出すことができません。

5-オブジェクト

5.1オブジェクトの関連概念

オブジェクトとは何ですか？

JavaScriptでは、オブジェクトは関連するプロパティとメソッドの順序付けられていないコレクションです。すべてのものは、文字列、数値、配列、関数などのオブジェクトです。
オブジェクトは、プロパティとメソッドで構成されています。
- 属性：オブジェクト（固有名詞）の属性によって表されるものの特性
- メソッド：オブジェクト内のメソッド（一般的な動詞）で表される、物事の動作

ここに画像の説明を挿入

なぜオブジェクトが必要なのですか？

値を保存するときは変数を使用でき、複数の値（値のセット）を保存するときは配列を使用できます。
```
  如果要保存一个人的完整信息呢？

  例如，将“张三疯”的个人的信息保存在数组中的方式为：
```
```
var arr = [‘张三疯’, ‘男', 128,154];
```
上記の例で配列を使用してデータを格納することの欠点は、データにアクセスできるのはインデックス値のみであるということです。開発者は、データを正確に取得するためにすべてのデータのランキングをクリアする必要があり、データの量が膨大な場合は、すべてを記憶することは不可能です。データのインデックス値。

データのセットをより適切に保存するために、オブジェクトが誕生しました：オブジェクト内のデータの各アイテムに属性名が設定され、データにさらに意味的にアクセスでき、データ構造が明確で、意味が明白です、開発者が使用すると便利です。

使用オブジェクトレコードのデータセットは次のとおりです。
```
var obj = {
      
      
    "name":"张三疯",
    "sex":"男",
    "age":128,
    "height":154
}
```
JSのオブジェクト式の構造は、より明確で強力です。

5.2オブジェクトを作成する3つの方法

リテラルを使用してオブジェクトを作成する

	花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示

キー：属性名と同等
値：属性値と同等で、任意のタイプの値（数値タイプ、文字列タイプ、ブールタイプ、関数タイプなど）にすることができます。

コードは次のように表示されます。
```
var star = {
      
      
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
      
      
        alert('大家好啊~');
    }
};
```
上記のコードの星は、作成されたオブジェクトです。
オブジェクトの使用
- オブジェクトのプロパティ
  - 記憶オブジェクト特定データをオブジェクトエントリ特定データに格納され、「キー」と呼ばれるオブジェクトのプロパティで、「キーに」
- オブジェクトメソッド
  - 関数をオブジェクトに格納する「キーと値のペア」の「キー」は、オブジェクトのメソッド、つまり関数をオブジェクトに格納するアイテムと呼ばれます。
- オブジェクトのプロパティにアクセスします
  - オブジェクト内のプロパティ呼び出し：オブジェクト。プロパティ名、この小さなポイント。「の」として理解されます。
  - オブジェクトのプロパティを呼び出す別の方法：object ['property name']、角括弧内のプロパティは引用符で囲む必要があることに注意してください
    
    サンプルコードは次のとおりです。
```
console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性
```
- オブジェクトメソッドを呼び出す
  - オブジェクト内のメソッド呼び出し：object .method name（）、メソッド名の後の括弧に注意してください
    
    サンプルコードは次のとおりです。
```
star.sayHi(); // 调用 sayHi 方法,注意一定要带后面的括号
```
- 変数、属性、関数、およびメソッドの要約
  
  属性はオブジェクトの一部であり、変数はオブジェクトの一部ではありません。変数はデータを個別に保存するためのコンテナです。
  - 変数：個別の宣言と割り当て、単独で存在
  - 属性：オブジェクト内の変数は属性と呼ばれ、宣言する必要はありません
    
    メソッドはオブジェクトの一部であり、関数は操作を個別にカプセル化するコンテナーです
  - 関数：単独で存在し、「関数名（）」で呼び出すことができます
  - メソッド：オブジェクト内の関数はメソッドと呼ばれ、メソッドを宣言する必要はありません。「object.methodname（）」を使用して呼び出すことができます。

新しいオブジェクトを使用してオブジェクトを作成します

空のオブジェクトを作成する
```
var andy = new Obect();
```
組み込みのコンストラクターObjectを使用してオブジェクトを作成します。この時点で、andy変数は作成された空のオブジェクトを保存しています。
空のオブジェクトにプロパティとメソッドを追加する
- オブジェクトのプロパティとメソッドを操作して、オブジェクトにプロパティとメソッドを追加します
  
  サンプルコードは次のとおりです。
```
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
      
      
    alert('大家好啊~');
}
```
注意：
- Object（）：最初の文字を大文字にします
- new Object（）：新しいキーワードが必要です
- 使用される形式：object.attribute = value;

コンストラクターを使用してオブジェクトを作成します

コンストラクタ
- コンストラクター：これは主にオブジェクトを初期化するため、つまりオブジェクトメンバー変数に初期値を割り当てるために使用される特別な関数です。常にnew演算子で使用されます。オブジェクトからいくつかのパブリック属性とメソッドを抽出し、それらをこの関数にカプセル化できます。
- コンストラクターのカプセル化形式：
```
function 构造函数名(形参1,形参2,形参3) {
        
        
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}
```
- コンストラクターの呼び出し形式
```
var obj = new 构造函数名(实参1，实参2，实参3)
```
  上記のコードでは、objはコンストラクターによって作成されたオブジェクトを受け取ります。
- 予防
  1. コンストラクター規則の最初の文字は大文字です。
  2. 現在のオブジェクトのプロパティとメソッドを示すには、関数のプロパティとメソッドの前にこれを追加する必要があります。
  3. 結果を返すためにコンストラクターに戻る必要はありません。
  4. オブジェクトを作成するときは、newを使用してコンストラクターを呼び出す必要があります。
- その他
  
  Stars（）などのコンストラクターは、オブジェクトのパブリック部分を抽象化し、それを関数にカプセル化します。これは通常、特定のクラス
  を具体的に参照するnew Stars（）などの特定のクラスでのオブジェクトの作成を指します。1.オブジェクトは新しいキーワードで作成されますオブジェクトのインスタンス化のプロセス
新しいキーワードの役割
1. コンストラクターコードの実行を開始する前に、空のオブジェクトを作成します。
2. これのポイントを変更して、作成された空のオブジェクトを指すようにします。
3. 関数を実行するコード
4. 関数が完了したら、これ、つまり作成されたオブジェクトを返します
5.3トラバースオブジェクト

for ... inステートメントは、配列またはオブジェクトの属性をループするために使用されます。

構文は次のとおりです。
```
for (变量 in 对象名字) {
      
      
    // 在此执行代码
}
```
文法の変数はカスタムであり、命名規則に準拠する必要があります。通常、この変数はkまたはkeyとして記述します。
```
for (var k in obj) {
      
      
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}
```