JS中的变量提升与函数提升

一段JS代码在执行的时候,大致可以分为两步。第一步为对代码的编译阶段,第二步才是真正去执行各语句。代码中用关键字var的变量声明和函数声明(非函数表达式)会在编译阶段提升到其所在作用域的顶端,之后这些声明在第二步各语句执行阶段就不会再被处理了,可以理解为直接跳过。

1.对于用var声明的变量,声明会提升到其所在作用域的顶端,但赋值操作不会提升。

console.log(a);
var a = 1;
console.log(a);
打印结果分别为undefined和1,在该例中,var a会被提升到顶端,而a=1赋值操作不会被提升,该段代码也可以写成:

var a;
console.log(a);
a = 1;
console.log(a);
当var a被提升到顶端的时候,变量a其实也被赋值为undefined ,所以第一次打印输出为undefined。

2.函数声明同样也会提升,这里仅限于函数声明,并不包含函数表达式。

a();
function a() {
console.log(1);
}
打印结果为1,同样的,上述代码可以改写为:

function a() {
console.log(1);
}
a();
如果是函数表达式,

a();
var a = function () {
console.log(1);
};
结果会报错:a is not a function。这段代码可以改写如下:

var a;
a();
a = function () {
console.log(1);
};
此时a的值为undefined。

3.如果变量名和函数名一样的话,函数提升优先级高于变量提升,举个例子:

console.log(a);
var a = 1;
function a() {}
console.log(a);
打印结果分别为ƒ a() {}和1。function a() {}提升优先级高于var a,所以第一次打印出函数本身而不是undefined,到了第二步语句执行阶段,a=1语句覆盖了变量a的值,所以第二次打印为1。

4.如果存在两个函数声明,则先出现的声明先提升,后出现的声明后提升,函数名相同的时候,后提升的会覆盖先提升的。

a();
function a() {
console.log(1);
}
function a() {
console.log(2);
}
打印结果为2。
————————————————
版权声明:本文为CSDN博主「sam前端」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_45153972/article/details/125793761

posted @ 2022-11-28 11:59  net-sky  阅读(44)  评论(0编辑  收藏  举报