[JavaScript，ES6]函数声明提升和预解析的总结和试验

最新推荐文章于 2022-06-22 09:44:40 发布

Alcantara6

最新推荐文章于 2022-06-22 09:44:40 发布

阅读量1.2k

点赞数

分类专栏：前端文章 JavaScript文章文章标签：变量提升预解析 ES6

本文链接：https://blog.csdn.net/Alcantara/article/details/78760834

版权

前端文章同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

JavaScript文章

14 篇文章 0 订阅

订阅专栏

1. 变量的声明被提前到作用域顶部，赋值保留在原地
2. 函数声明整个“被提前” （且后面不再重新“赋值”）
3. 函数表达式时，只有变量“被提前”了，函数没有“被提前”

4. 在块中定义的函数声明或函数表达式：

ES6：会把函数声明当作带var的函数表达式，把函数变量提升到全局作用域或函数作用域的头部；也会把整个函数声明提升到本块级的头部。
ES5：会把整个函数声明提升到全局作用域或函数作用域的头部。
//不要在块中声明函数。

5.如果在提升的时候发生重命名了怎么办？
首先还是都会提升（函数声明整个“被提前”，且后面不再重新“赋值”），但是编译器在遇到变量声明时，如果发现已经有同名的声明了，就忽略执行这一条声明。
6.全局作用域下，不带var声明变量，相当于window对象的属性值名，不会提升，带var则是全局变量，会提升。
7.不管条件是否成立，都要把带var的进行提前的声明.——if（false）{//带var的变量}
8.立即执行函数定义的function在全局作用域下不进行预解析，当代码执行到这个位置的时候，定义和执行一起完成了。

9.函数体内return之后的代码，该预解析的依然会进行预解析。

—— ES6没有变量提升

请看以下代码的：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>变量提升发生重名的情况</title>
<style type="text/css">
   
</style>
</head>
<body>

<script>
	(function () {
		var a = 12;
		console.log(a);         //12
		function a() {};
		console.log(a);         //12
		a = 'aaa';
		console.log(a);			//'aaa'	
	})()
	//相当于
		(function () {
			//变量提升
			var a;
			function a() {};  //编译时忽略
			var a;            //编译时忽略
			//变量赋值
			a = 12;
			//执行
			console.log(a);   //12 
			console.log(a);   //12
			//变量赋值
			a = 'aaa';
			//执行
			console.log(a);	  //'aaa'			
	})()

	(function () {
		var fn = 13;                                       
		var fn =  function () {                                    
		    console.log('ok');                               
		}                                                  
		fn();    //ok
	})()
	//相当于
	(function () {
		//变量提升
		var fn;
		var fn;   //编译时忽略
		//变量赋值，函数表达式只提升了声明部分，还会再赋值
		fn = 13;
		fn =  function () {                                    
		    console.log('ok');                               
		}
		//执行
		fn();    // ok             
	})()

	(function () {
		var fn = 13;                                       
		function fn() {                                    
		    console.log('ok');                               
		}                                                  
		fn();    //fn in not a function
	})()
	//相当于
	(function () {
		//变量提升
		var fn;
		fn =  function () {                                    
		    console.log('ok');                               
		}              //编译时忽略
		//变量赋值,函数声明已全部提升，不再赋值        
		fn = 13;
		fn();    //fn in not a function            
	})()



</script>
</body>
</html>