JavaScriptの事前解析（シンプルで理解しやすい、パッケージを見てパッケージを確認する）

事前分析

• まず、jsコードの実行メカニズムを理解します
• Pre：pre、すべてのコードが実行される前
• 分析：コードを説明し、読み通し、説明する
• jsは最初に事前解析し、次にコードを実行します

何が解析されましたか？

1.Varキーワード

• 事前解析は、コードが実行される前にvarキーワードで定義された変数を宣言しますが、現時点では値を割り当てません

console.log(num);	// undefind
var num = 100;
console.log(num);	// 100

• 実際の実行プロセス

/*
预解析先声明var num，但此时并未赋值
*/
var num;
console.log(num);	// undefind
num = 100;
console.log(num);	// 100

2.宣言関数

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

fn();	// 第一句
/*
预解析在所有代码执行之前，告诉浏览器，fn 这个名字可以使用，并且 fn 代表的是一个函数
*/

function fn(){
    
    
	console.log("我是fn函数");
}

• 実際の実行プロセス

/*
	会把函数定义阶段提到调用阶段的上面
*/
function fn(){
    
    
	console.log("我是fn函数");
}
fn();	// 第一句

注意：

• 代入機能：var fn = function(){}
• varのルールに従って解析します

fn();	// 报错
var fn = function fn(){
    
    
	console.log("我是fn函数");
}

• 実際の実行プロセス

/*
	在预解析，只是告诉浏览器，fn 这个名字可以使用，但是没有赋值
*/
var fn;
fn()	// 报错
fn = function fn(){
    
    
	console.log("我是fn函数");
}
fn();

事前に解決されたケース

• 関数と変数の名前が同じである場合、その関数は分析前の段階で優先されます。
• 最初の質問：

fn();	// 能打印
var fn = 100;
fn();	// 报错：不是一个函数
function fn(){
    
    
	console.log("我是 fn 函数");
}
fn();

• コード分​​析

预解析阶段
1. var fn
2. function fn(){
    
    ...}
3. 声明 fn 变量
4. 声明 fn 变量 并且赋值为一个函数
5. 预解析结束的时候，浏览器记录的 fn 变量是一个函数
代码开始执行
1. fn()			// 此时 fn 当做函数，并执行
2. fn = 100;	// 此时 fn 当做变量，值为100
3. fn()			// 相当于 100(), 直接报错,程序中断
4. fn()			// 第 3 步就中断了，这里不执行

• 2番目の質問：

fn();	// 能打印
function fn(){
    
    
	console.log("我是 fn 函数");
}
fn();	// 能打印
var fn = 100;
fn();	// 报错

• コード分​​析

预解析阶段
1. function fn(){
    
    ...}
2. var fn
代码开始执行
1. fn()			// 此时 fn 当做函数，并执行
2. fn()			// 此时 fn 当做函数，并执行
3. fn = 100;	// 此时 fn 当做变量，值为100
4. fn()			// 相当于 100(), 直接报错,程序中断

分析前の隠れた危険

1. if条件が確立されているかどうかに関係なく、内部のコードは事前に解析されます

• これはあなたが思うことです：

console.log(num);	// undefined
if(false){
    
    
	var num = 100;
}
console.log(num);	// 100

• 実際：

console.log(num);	// undefined
if(false){
    
    
	var num = 100;
}
console.log(num);	// undefined

• と同等です：

console.log(num);	// undefined
if(false){
    
    
	var num;
	num = 100;
}
console.log(num);	// undefined

2. returnの背後にあるコードは実行されませんが、事前に解析されます

function fn(){
    
    
	var num = 100;
	console.log(num);	// 100
	console.log(n);	// undefined
	return;
	var n = 200;
}
fn();

• と同等です：

function fn(){
    
    
	var num;
	var n;
	num = 100;
	console.log(num);	// 100
	console.log(n);	// undefined
	return;
	n = 200;
}
fn();

分析前の提案

• コードを書くための提案：

1. 函数名 不要与 变量同名
2. 变量名以名词为主，2个或3个单词组合使用
如：username，userInfoAge
3. 函数名以功能区分，尽量语义化
如：getColor()，setColor()
4. 尽量使用 赋值式函数 来定义

次の記事：関数スコープhttps://blog.csdn.net/qq_45677671/article/details/114988263