JS作用域、同名标识符提升、函数提升

87 阅读1分钟

作用域:标识符(变量和函数名)能够被访问的地方

规则:

  • 1.函数内部的代码可以访问函数内部的标识符,也可以访问函数外部的标识符
  • 2.函数外部可以访问函数外部的标识符,但是不能访问函数内部的标识符
  • 通常函数内部的标识符为局部标识符

相关案例:

<script type="text/javascript">
			function fn(){
				//这里就改变了外部的a的值
				a=100;
			}
			var a=200;
			fn()
			console.log(a)
		</script>
                    

image.png

<script type="text/javascript">
			function fn(a){
				//这里就隐式声明了一个a
				a=100;
			}
			var a=200;
			fn()
			console.log(a)
		</script>
                    

image.png

同名标识符提升:就是在作用域内,如果存在声明变量的代码在其他代码的后面,会先提前声明变量,但是给变量赋值的位置还是不变

代码:

<script type="text/javascript">
			var a=10;
			function fn(){
			   console.log(a);//undefined
			   a=40;
			   var a=20;
			   console.log(a);//20
			}
			console.log(a);//10
			fn();
			console.log(a)//10
		</script>

相当于:

   <script type="text/javascript">
			var a=10;
			function fn(){
				var a;
				console.log(a);
				a=40;
				a=20;
				console.log(a);
			}
			console.log(a);
			fn();
			console.log(a);
		</script>

函数隐式提升:变量只提升声明,但函数提升整个函数体(注意:变量提升大于函数提升)

小窍门:形(形参和变量的提升)实(实际的数据)函(函数的提升)运(函数的运行)

形实函运的流程:

  • 1.先隐式提升当前作用域内部的所有形参变量和局部变量(这是声明提升,不会提升赋值)
  • 2.在把实参赋值给形参变量
  • 3.然后执行函数的隐式提前声明
  • 4.再按照代码顺序运行代码

代码:

<script type="text/javascript">
			fn()
			function fn(){
				console.log(3)
			}
		</script>
                    

image.png

代码:

<script type="text/javascript">
			var a=20;
			function fn(a){
				console.log(a,1);
				a=90;
				console.log(a,2);
				var a=100;
				console.log(a,3);
				function a(){
					console.log(666)
				}
				console.log(a,4)
			}
			fn(a)
                            //相当于下面的代码:
			/*var a=20;
			function fn(a){
				var a=20;
				function a(){
					console.log(666)
				}
				console.log(a,1);//fun
					a=90;
					console.log(a,2);//90
					a=100;
					console.log(a,3);//100
					console.log(a,4)//100
				}
				fn(a)//20
			*/
		</script>

答案:

image.png