Análisis previo de JavaScript (simple y fácil de entender, paquete para ver paquete)

Preanálisis

• Primero comprenda el mecanismo de ejecución del código js
• Pre : pre, antes de que se ejecute todo el código
• Análisis : explique, lea y explique el código
• js es pre-analizar primero, luego ejecutar el código

¿Qué se analizó?

1. Var palabra clave

• El análisis previo declarará las variables definidas por la palabra clave var antes de que se ejecute el código, pero no asignará valores en este momento

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

• El proceso de ejecución real

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

2. Funciones declarativas

• En la memoria, primero declare que un nombre de variable es un nombre de función y que el contenido representado por este nombre es una función

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

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

• El proceso de ejecución real

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

Nota:

• Función de asignación:var fn = function(){}
• Analizar de acuerdo con las reglas de var

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

• El proceso de ejecución real

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

Caso resuelto previamente

• Cuando una función y una variable tienen el mismo nombre, la función prevalecerá en la etapa de preanálisis.
• primera pregunta:

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

• Análisis de código

预解析阶段
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 步就中断了，这里不执行

• La segunda pregunta:

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

• Análisis de código

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

Pre-análisis de peligros ocultos

1. Ya sea que se establezca la condición if o no, el código interno se analizará previamente

• Esto es lo que piensas:

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

• Realmente:

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

• Es equivalente a:

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

2. Aunque el código detrás de return no se ejecuta, también se analizará previamente

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

• Es equivalente a:

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

Sugerencias de análisis previo

• Sugerencias para escribir código:

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

Artículo siguiente: Alcance de la función https://blog.csdn.net/qq_45677671/article/details/114988263