JS作用域和作用域链（包含部分预解析）_js 链式作用域结构-优快云博客

本文链接：https://blog.youkuaiyun.com/taiyongzheng/article/details/122091479

作用域

作用域链

作用域

作用域：变量或函数可以起作用的访问。

全局作用域：在script中或者一个独立的js文件中，在全局作用域中定义的变量称为全局变量。在任何位置都可以访问。

局部作用域：任何一个函数的内部都有一个局部作用域，在局部作用域中定义的变量称为局部变量。局部变量只有在定义该变量的函数中可以访问。

块级作用域：ES6之前没有块级作用域。

作用域链

只有函数可以制造作用域结构，那么只要是代码，就至少有一个作用域，即全局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。

将这样的所有的作用域列出来，可以有一个结构：函数指向函数外的链式结构。就称作作用域链。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script>
    // 全局作用域         --0级作用域
    var num = 5;
    function f1(){
        // f1局部作用域    --1级作用域
        var num = 15;
        function f2(){
            // f2局部作用域     --2级作用域链
            console.log(num);    // 输出结果为15
        }
        f2();
    }
    f1();
</script>

作用域链的本质就是，函数如果在自己本身中找不到需要的变量，会往祖先环境（即向上）去寻找，直到找到最外层为止。如果某一层祖先环境中有本身函数的执行代码，那么这层环境这个执行代码以下的变量他不会往下寻找。所以执行函数的代码一定要能放在下面就放在下面。

var a = 1
	function fn1(){
	    function fn3(){  
			function fn2(){     
				console.log(a)    
			}    
			fn2()    
            // 由于执行函数的代码在此局部作用域变量上方，故输出undefined
			var a = 4
		}  
		var a = 2  
		return fn3
	}
	var fn = fn1()
	fn() //输出undefined

预解析

1.变量提升，把变量的声明提升到当前作用域的最上面，不包括变量的赋值

2.函数提升，把函数的声明提升到当前作用域的最上面，不包括函数的调用

案例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script>
    var a = 25;
	function abc(){
		alert(a);
		var a = 10;
	}
	abc();
	// 预解析
	var a;
	function abc(){
		var a;
		alert(a); 	// 输出结果undefined
		a = 10;
	}
	a = 10;
	abc();
</script>

<script type="text/javascript">
	console.log(num); 		//num在输出语句下为 undefiend,如果注释num变量即报错
	var num = 5;
</script>

二次更新时间：22年/2/10