欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript的预解释机制 变量提升概念及示例讲解

程序员文章站 2022-05-17 14:51:35
1. 概念 当加载html页面时,会先提供一个供全局js代码执行的环境(即全局作用域,window或者global),在这个环境中,浏览器默认会把所有带var和function的...
1. 概念

当加载html页面时,会先提供一个供全局js代码执行的环境(即全局作用域,window或者global),在这个环境中,浏览器默认会把所有带varfunction的变量进行提前声明或者定义

(1) 理解声明和定义;

var num = 12;
// 声明: 告诉浏览器在全局作用域中有一个num变量
// 定义: 给变量进行赋值
// 使用只声明未定义的变量值为undefined;使用未声明未定义的变量直接报错

(2) 对于带varfunction关键字的变量在预解释时的操作不一样;

var关键字的提前声明,含function的提前声明并且定义。

(3) 此时的预解释只发生在当前的全局作用域下,函数内部的变量不发生预解释。执行函数时,函数内部的作用域同样会发生预解释。(关于函数执行时,内部发生的流程,见下一篇《javascript函数执行内部原理》)


2.预解释机制的槽点

(1) 由于javascript没有块级作用域(es6有),在条件判断语句中的var也会被预解释,会带来如下问题。

console.log(str);   // undefined
var str = "test1";  // 预解释阶段声明全局变量str

console.log(str2);  // 报错
str2 = "test2";     // 不会参与预解释,只相当于给window添加了属性str2

console.log(fn1);   // 1
function fn1(){
    return 1;
}

关于全局变量和window属性的区别,点击这里。

例2:

 console.log(total);         // undefined
 var total = 0;
 function fn(num1,num2) {
     console.log(total);     // undefined
     var total = num1 + num2;
     console.log(total);     // 300
 }
 fn(100,200);
 console.log(total);         // 0