JS的变量和函数提升

1.js的运行和预编译过程

<1>.语法分析

查找基本语法有无错误;

<2>、预解析/预编译

执行之前进行预解析;

var,function关键字提前到当前作用域顶部,即变量提升或函数提升,变量默认值为undefined,函数默认值为函数体代码块,当函数与变量重名时,保留函数。

<3>、解释执行

2.例题

1)、变量可以在使用后声明,也就是变量可以先使用后声明

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 

elem.innerHTML = x; // 在元素中显示 x

var x; // 声明 x

变量 提升之后

var x; // 声明 x

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 

elem.innerHTML = x;  

2)只有声明的变量会提升,而初始化的不会

例1.var x = 5; // 初始化 x

var y = 7; // 初始化 y

elem = document.getElementById("demo"); // 查找元素 

elem.innerHTML = x + " " + y;// 显示 x 和 y

对比

例2、var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素 

elem.innerHTML = x + " " + y;// 显示 x 和 y

var y = 7; // 初始化 y

此例中y的输出值为undefined,这是因为变量声名(var y)提升了,但是y=7没有提升,所以y变量是一个没有定义的变量。

变量提升之后

var x = 5; // 初始化 x

var y; // 声明 y

elem = document.getElementById("demo"); // 查找元素

elem.innerHTML = x + " " + y; // 显示 x 和 yy = 7; // 设置 y 为 7

3)、其他一些例题

//预编译

/* console.log(a);

var a = 10; //变量提升

console.log(a); */

/* 提升之后的结果

var a;

console.log(a);

a = 10; */

4)、局部作用域中的变量提升

/* var b = 10;

function foo(){

console.log(b);

var b = 20;

}

foo(); */

/*// 提升之后的结果

var b = 10;

function foo(){

var b;

console.log(b);

b = 20;

}

foo();

*/



函数提升

例题

//函数提升(包括函数体一块提升)

/* bar();

function bar(){

alert(123);

} */

//通过function关键字申明的函数会连着函数体一块提升到当前作用域顶部

//但是通过变量名赋值为一个匿名函数的方式申明的函数,只会提升变量的申明,函数体不会提升

/* bar();

var bar = function(){

alert(456);

} */

/* 提升之后的,会报错

var bar;

bar();

bar = function(){

alert(456);

} */

注意:1.局部变量只作用于函数内部,所以不同的函数可以使用相同名称的变量

2、局部变量在函数开始时创建,在函数执行完成之后销毁。(局部变量出栈即销毁)

3、如果变量在函数内没有var即没有声明,该变量为全局变量。



例题
/* alert(a);

var a = 1;

alert(a);

function a(){alert(2);}

alert(a);

var a = 3;

alert(a);

function a(){alert(3);}

alert(a);*/

预编译之后

/* function a(){alert(3);}

alert(a); //function a(){alert(3);}

a = 1;

alert(a); //1

alert(a); //1

a = 3;

alert(a); //3

alert(a); //3 */

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容