js预解析

最新推荐文章于 2024-10-30 10:49:39 发布

原创最新推荐文章于 2024-10-30 10:49:39 发布 · 127 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文探讨了JavaScript中的预解析和变量提升现象，通过实例分析了函数声明、变量定义在代码执行过程中的提升规则，以及如何影响函数内部作用域和变量的生命周期。预解析使得变量和函数在执行前被声明，而作用域链决定了变量在不同范围内的访问。文章通过一个经典的案例展示了如何理解和避免因变量提升导致的错误。

最近看到这个预解析，非常有意思，能够帮助我们更深刻的了解这个语言在浏览器中是怎么运行的。下面我们来通过几个小案例了解一下：

	// 预解析
		var num = 20;
		
		function fun1() {
			console.log(num);
			var num = 10;
			console.log(num);
		}

        fun1();

这个会在控制台打印出什么呢。我们来分析一下，首先进行预解析，直接将定义提起，即像下面这样运行代码。让我们来看看运行出什么结果吧。

	// 预解析
		var num;
		
		function fun1() {
            var num；
			console.log(num);
			num = 10;
			console.log(num);
		}

        num = 20;

        fun1();

undefined

10

浏览器运行代码，一开始进来就找定义变量和函数，找到就直接提升到最前面。然后再逐句执行。根据作用域链，在函数体里面也会进行变量提升，然后逐句执行。这有一个经典案例，这个会得到一个什么结果呢？

fun1();
		
		console.log(c);
		console.log(b);
		console.log(a);
		
		function fun1() {
			var a = b = c = 9;
			console.log(a);
			console.log(b);
			console.log(c);
		}

// 相当于
		function fun1() {
			var a = 9;
			b = 9;
			c = 9;
			// var a = b = c = 9; 相当于 var a = 9; b = 9;c = 9;	并非相当于var a = 9, b = 9,c = 9;  里面没有var的变量为全局变量
			console.log(a);
			console.log(b);
			console.log(c);
		}
		fun1();
		console.log(c);
		console.log(b);
		console.log(a);

所以这个控制台输出应该为9 9 9 9 9 报错未定义