javascript的执行过程

最新推荐文章于 2025-05-17 14:45:45 发布

转载最新推荐文章于 2025-05-17 14:45:45 发布 · 481 阅读

本文深入解析JavaScript执行过程中的变量和函数提升机制，通过具体案例阐述声明函数与赋值函数的区别，以及函数加载时的覆盖处理过程。帮助开发者理解JavaScript执行过程的核心原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript的执行分为两部分：

一部分为：预处理编译阶段，此阶段进行变量和函数的声明，将变量和函数提到对应的作用域的最前面，但是不对变量进行赋值，变量的默认值为undefined；（主要是正对用声明方式声明的函数，用var定义的变量）；

第二部分：代码的执行阶段，此阶段对变量进行赋值和函数声明；

声明函数与赋值函数的区别在于，声明函数会在预编译期被整体提升到作用域前面：

foo();//foo
function foo(){//声明式函数
    console.log("foo");
}
foo2();//foo2 is not a function
var foo2=function(){//赋值式函数声明，其实是函数表达式
    console.log("foo2");
}
console.log(str);//undefined
var str="str";
console.log(str);//str

案例：

function myFn(){
    console.log("Fn1");
}
myFn();//Fn2
function myFn(){
    console.log("Fn2")
}
myFn();//Fn2

原因：函数加载时进行了覆盖

案例二：

var myFn = function(){console.log('Fn1');};
myFn();//Fn1
myFn = function(){console.log('Fn2');};
myFn();//Fn2
//处理过程
var myFn;
myFn = function(){console.log('Fn1');};
myFn();//Fn1
myFn = function(){console.log('Fn2');};
myFn();//Fn2

案例三：

function myFn(){console.log('Fn1');};
myFn();//Fn1

myFn = function (){console.log('Fn2');};
myFn();//Fn2

案例四：

var myFn = function(){console.log('Fn1');};
myFn();
function myFn(){onsole.log('Fn2');};
myFn();
//处理过程
var myFn;
function myFn(){
    console.log("Fn2");
}
myFn=function(){
    console.log("Fn1")
};
myFn();//Fn1
myFn();//Fn1

案例五：

myFn();
var myFn = function(){console.log('Fn1');};
myFn();

function myFn(){console.log('Fn2');};
myFn();
//处理过程
var myFn;
function myFn(){
console.log("Fn2");
}
myFn();//Fn2
myFn=function(){console.log("Fn1");}
myFn();//Fn1
myFn();//Fn1

新手学js,执行过程老师说变量和函数提升，用案列证明确实如此；