【事前パース、スコープ、変数アクセス規則、再帰関数、関数とイベントの併用】

事前解析 (強調)

事前解析は、実際には js コードのコンパイルと実行について話している
js はインタープリター型言語です。つまり、コードが実行される前に、コードが読み取られ (最初に var、function などの宣言された型を見つけます)、説明されてから、コードが実行されます。
つまり、js コードが実行されている場合、コードの解釈とコードの実行という 2 つのリンクを経由します。

コードを説明する

すべてのコードが実行される前に解釈されるため、事前

説明することは2つあります

宣言関数

メモリ内で、最初に変数名が関数名であり、この名前で表される内容が関数であることを宣言します

var

キーワード
最初にメモリ内で変数名を宣言します
次のコードを見てください

<script>
fn()
console.log(num)
function fn() {
      
      
console.log('我是 fn 函数')
}
var num = 100
</script>

準備後、次のように変換できます。

<script>
function fn() {
      
      
console.log('我是 fn 函数')
}
var num//变量提升只提升声明部分,只提升到当前作用域的最顶端，赋值还是在下边
fn()
console.log(num)
num = 100
    //函数提升优先于变量提升，变量提升只提升声明部分
</script>

代入関数は、var キーワードの規則に従って事前に解析されます

スコープ (強調)

スコープとは、コードの一部が有効になるスコープです
このコードはどこでも利用できるわけではなく、この変数の使用範囲はスコープです。

グローバルスコープ

場所: 関数の外側のスクリプトタグで変数定義を定義し、グローバルスコープを持ち、どこでも使用できます。

ライフサイクル: ページを開くことはグローバルスコープを形成するようなものであり、グローバルスコープが閉じられるとページは破棄されます。関数内に宣言はありませんが、割り当てられた値はグローバル変数として理解できます。

注: グローバルスコープには、直接アクセスできる window オブジェクトがあります。

グローバルスコープは最大のスコープです
グローバルスコープで定義された変数はどこでも使用できます
ページが開かれると、ブラウザーは自動的にグローバルスコープウィンドウを生成します。

このスコープは、ページが閉じられて破棄されるまで常に存在します

// 下面两个变量都是存在在全局作用域下面的，都是可以在任意地方使用的
var num = 100
var num2 = 200

ローカルスコープ

場所: 関数内で定義され、変数は関数内でのみアクセスでき、外部ではアクセスできません

ライフサイクル: 関数が呼び出されたときに生成され、関数が呼び出されたときに破棄されます

一度関数を呼び出すとローカルスコープが生成され、複数のローカルスコープは互いに独立しています

注: 関数内で定義された変数には、if または for ではなく、ローカルスコープがあります。

ローカルスコープは、グローバルスコープの下に開かれた比較的小さなスコープです。
ローカルスコープで定義された変数は、このローカルスコープ内でのみ使用できます
JS では、関数のみがローカルスコープを生成できます。

すべての関数はローカルスコープです

// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用
var num = 100

function fn() {
  // 下面这个变量就是一个 fn 局部作用域内部的变量
  // 只能在 fn 函数内部使用
  var num2 = 200
}

fn()

可変アクセスルール (強調)

スコープとは、変数には使用範囲があり、使用規則があります。
変数の使用規則は、アクセス規則と割り当て規則の 2 種類に分けられます。

アクセス規則

変数の値を取得したい場合、この動作をアクセスと

変数を取得するための規則: 近接性の原則

まず、自分のスコープ内を調べて、ある場合はそれを直接使用します
そうでない場合は、上位レベルのスコープに移動して見つけ、ある場合はそれを使用します
そうでない場合は、上位のスコープで検索を続けます。
グローバルスコープまでそのような変数がない場合、エラーが直接報告されます（変数は定義されていません）

var num = 100

function fn() {
  var num2 = 200
  
  function fun() {
    var num3 = 300
    
    console.log(num3) // 自己作用域内有，拿过来用
    console.log(num2) // 自己作用域内没有，就去上一级，就是 fn 的作用域里面找，发现有，拿过来用
    console.log(num) // 自己这没有，去上一级 fn 那里也没有，再上一级到全局作用域，发现有，直接用
    console.log(a) // 自己没有，一级一级找上去到全局都没有，就会报错
  }
  
  fun()
}

fn()

変数アクセスルールは、スコープルックアップメカニズムとも呼ばれます。

スコープ検索メカニズムは上方向のみ検索でき、下方向は検索できません。

function fn() {
  var num = 100
}
fn()

console.log(num) // 发现自己作用域没有，自己就是全局作用域，没有再上一级了，直接报错

割り当てルール

変数に値を代入する場合は、まず変数を見つけて代入する必要があります
変数割り当て規則: 近接の原則
- 最初に自分のスコープ内を調べて、スコープがある場合は直接割り当てます
- そうでない場合は、上部のスコープに移動して見つけ、ある場合は直接割り当てます
- 上位のスコープに検索がない場合は、値を直接割り当てます
- グローバルスコープがない場合は、この変数をグローバル変数として定義し、値を割り当てます。
```
function fn() {
  num = 100
}
fn()

// fn 调用以后，要给 num 赋值
// 查看自己的作用域内部没有 num 变量
// 就会向上一级查找
// 上一级就是全局作用域，发现依旧没有
// 那么就会把 num 定义为全局的变量，并为其赋值
// 所以 fn() 以后，全局就有了一个变量叫做 num 并且值是 100
console.log(num) // 100
```

再帰関数

再帰関数とは
プログラミングの世界では、再帰は自分自身を呼び出す手段です
再帰関数: 関数自体を直接または関数内で間接的に呼び出す
再帰には出口が必要であり、出口がない場合はデッド再帰が形成されます (最大呼び出しスタックサイズを超えました: スタックオーバーフロー\メモリオーバーフロー)
```
// 下面这个代码就是一个最简单的递归函数
// 在函数内部调用了自己，函数一执行，就调用自己一次，在调用再执行，循环往复，没有止尽
function fn() {
  fn()
}
fn()
```
実際、再帰関数はループに非常に似ています
初期化、自己インクリメント、コード実行、および条件判断が必要です。それ以外の場合は、デッド

再帰の単純な実装

最初に再帰関数を使用して単純に効果を達成しましょう
要件: 1 から 5 までの和を求めてください
- 最初に 1 + 2 を数えて 3 を取得します
- 3 + 3 を足すと 6 になります
- 次に、6 + 4 を数えて 10 を求めます。
- 次に、10 + 5 を数えて 15 を取得します。
- 終了
書き込みを開始し、最初に再帰関数を記述して終了条件を記述します (「dead recursion」を回避するため)
```
function add(n) {
  // 传递进来的是 1
  // 当 n === 5 的时候要结束
  if (n === 5) {
    return 5
  }
}

add(1)
```

次に、条件が満たされない場合の再帰処理を記述します

function add(n) {
  // 传递进来的是 1
  // 当 n === 5 的时候要结束
  if (n === 5) {
    return 5
  } else {
    // 不满足条件的时候，就是当前数字 + 比自己大 1 的数字
    return n + add(n + 1)
  }
}
add(1)

関数とイベントの組み合わせ

イベント：

onclick: クリックイベント

onmouseover: マウスオーバーイベント

onmouseout: マウスアウトイベント

簡単な例: (ちょっとした電卓の実装例)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
      
      
            width: 1000px;
            margin: 100px auto;
            text-align: center;
            line-height: 200px;
        }

        input,select,button{
      
      
            display: inline-block;
            border: none;
            width: 50px;
            height: 50px;
            background-color: rgba(127, 255, 212, 0.548);
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <main>
        <input type="text" id="text1">
        <select id="select">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
            <option>%</option>
        </select>
        <input type="text" id="text2">
        <button id="btn">=</button>
        <input type="text" id="text3">
    </main>
</body>

</html>
<script>
    var oText1 = document.getElementById("text1")
    var oText2 = document.getElementById("text2")
    var oText3 = document.getElementById("text3")
    var oselect = document.getElementById("select")
    var oBtn = document.getElementById("btn")
    oBtn.onclick = function () {
      
      
        switch (oselect.value) {
      
      
            case "+":
                oText3.value = Number(oText1.value) + Number(oText2.value);
                break;
            case "-":
                oText3.value = Number(oText1.value) - Number(oText2.value);
                break;
            case "*":
                oText3.value = Number(oText1.value) * Number(oText2.value);
                break;
            case "/":
                oText3.value = Number(oText1.value) / Number(oText2.value);
                break;
            case "%":
                oText3.value = Number(oText1.value) % Number(oText2.value);
                break;
            default:
                break;
        }
    }
</script>

わかりやすいオブジェクト

オブジェクト: すべてがオブジェクトであり、オブジェクトは一連の属性と動作の組み合わせです

オブジェクトは複雑なデータ型です
実際には複雑ですが、それほど複雑ではなく、いくつかの基本的なデータ型を格納するコレクションにすぎません。
```
var obj = {
  num: 100,
  str: 'hello world',
  boo: true
}
```
ここ{}は関数と{}同じではありません
コードは関数に記述され、一部のデータはオブジェクトに記述されます
オブジェクトはキーと値のペアのコレクションです
{}その中の各キーはメンバーです
言い換えれば、オブジェクトにいくつかのデータを入れることができ、それらは互いに干渉しません
実際には、家を用意し、その中に必要なデータを入れ、その家の住所を変数名に与えます. 特定のデータが必要な場合、変数に格納された住所に従って、対応する家を見つけることができます.名前、次に家に行き、対応するデータを見つけます

showメソッドは情報を表示するために使用でき、呼び出された後にのみ表示できます(オブジェクト内のメソッド)。

<script>
    var obj={
        
        
        //name:"张三",----》键值对，  键值对与键值对之间用，隔开，最后一个不用，
        name："张三"，
        age:14,
        eat(){
        
        
            console.log("火锅")
        },//show方法是可以用来展示信息的，调用后才能展示出来（对象内的方法）调用时需要对象.方法去调用
            show(){
        
         console.log("name"+obj["name"]+"age"+obj["age"])
            }
    }
    console.log(obj);//打印对象
    obj.show();//对象调用方法   .语法
    obj["show"];//对象调用方法   []语法
    //对象访问语法   .语法/[]语法
    var obj = {
        
        }
    //  .  语法
    	obj.name = "张三";
        obj.age = 16; 
     
    //  [ ]语法
    	obj["name"] = "张三";
        obj["age"] = 16;  
    //增：obj.name = "张三"
   // 删：delete obj.name
    //改：
    	obj.name = "李四";
</script>

オブジェクトを作成する

オブジェクトを文字通り作成する

// 创建一个空对象
var obj = {}

// 像对象中添加成员
obj.name = 'Jack'
obj.age = 18

組み込みコンストラクターを使用してオブジェクトを作成する
オブジェクトは、オブジェクトを作成するために使用される js に組み込まれたコンストラクター関数です。
```
// 创建一个空对象
var obj = new Object()

// 向对象中添加成员
obj.name = 'Rose'
obj.age = 20
```