原生js面试题：js中的变量声明提升

阳光穿透心脏的1/2处 2022-05-22 11:28 245阅读 0赞

### \--------------------------**预编译**阶段--------------------------------------------- ###

//编写代码  ---预编译---》编译执行  
  
//预编译阶段会做很多的事情:  
//1、没有赋值的变量，默认赋值为undefined；  
//2、变量的声明提升  
//3、函数的处理  
//4、优化。

//5、等等

### \--------------------------变量声明提升--------------------------------------------- ###

//变量声明提升：  
  
  
//一、先看一段代码：  
//以下这段代码，因为，没有用var声明，所以出错

function testf(){
    	console.log(myName);//这句话会提示 myName is not definded;
    }

//二、再看一段代码：

function testf(){
    	var myName;//声明一个变量，没有赋值，但是经过预编译，会给该变量赋值为undefined;
    	console.log(myName);//这句话就显示undefined；
    }

//三、变量声明提升  
//1)、下面这段代码

function testf(){
    	console.log(myName);//这句话不会出错，因为有变量声明提升，变量myName的值是undefined；
    	var myName;//定义（声明）了一个变量
    }

//经过预编译后，会成为以下代码:

function testf(){
    	var myName;//这句话（声明变量的代码）被预编译程序提升到了函数的开始，这就是变量声明提升
    	console.log(myName);
    }

//2)、下面这段代码

function testf(){
    	console.log(myName);//undefined
    	var myName="刘德华";//声明变量，并赋值；
    	console.log(myName);//刘德华
    }

//经过预编译后，会成为以下代码:

function testf(){
    	var myName;
    	console.log(myName);//undefined
    	myName="刘德华";//
    	console.log(myName);//刘德华
    }

### \--------------------------以下为测试代码-------------------------------------------- ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>		
    	</head>
    	<body>
    		<input type="button" value="  测试  " onclick ="testf()" />		
    	</body>
    </html>
    <script type="text/javascript" src="js/tools.js"></script>
    <script type="text/javascript">
    //变量声明提升：
    
    //一、先看一段代码：
    //以下这段代码，因为，没有用var声明，所以出错
    /*
    function testf(){
    	console.log(myName);//这句话会提示 myName is not definded;
    }
    */
    
    //二、再看一段代码：
    /*
    function testf(){
    	var myName;//声明一个变量，没有赋值，但是经过预编译，会给该变量赋值为undefined;
    	console.log(myName);//这句话就显示undefined；
    }
    */
    
    //三、变量声明提升
    //1)、下面这段代码
    /*
    function testf(){
    	console.log(myName);//这句话不会出错，因为有变量声明提升，变量myName的值是undefined；
    	var myName;//定义（声明）了一个变量
    }
    //经过预编译后，会成为以下代码:
    function testf(){
    	var myName;//这句话（声明变量的代码）被预编译程序提升到了函数的开始，这就是变量声明提升
    	console.log(myName);
    }
    */
    //2)、下面这段代码
    function testf(){
    	console.log(myName);//undefined
    	var myName="刘德华";//声明变量，并赋值；
    	console.log(myName);//刘德华
    }
    //经过预编译后，会成为以下代码:
    function testf(){
    	var myName;
    	console.log(myName);//undefined
    	myName="刘德华";//
    	console.log(myName);//刘德华
    }
    
    </script>