javascript作用域及声明提前

---

title: javascript作用域及提前声明
date: 2020-08-09 17:23:09
tags: javascript

---

1 全局作用域

-直接编写在script标签中的JS代码，都在全局作用域
-全局作用域在页面打开时（javascript解释器启动时）创建，页面关闭时销毁
-在全局作用域中，有一个全局对象Window，它代表的是一个浏览器的窗口，由浏览器创建，可以直接使用。
-在客户端javascript中，在其表示的浏览器窗口中的所有JavaScript代码中，Window对象充当了全局对象。这个全局Window对象有一个window属性引用其自身。
-在全局作用域中，创建的变量都会作为window对象的属性保存，创建的函数都会作为window对象的方法保存

2 函数作用域

-调用函数时创建函数作用域，函数执行完毕销毁
-每调用一次函数就会创建一个新的函数作用域，他们之间相互独立
-在函数作用域中操作一个变量时，它会先在自身作用域中寻找，若无，则向上一级作用域寻找（例如上一级嵌套的函数），直至全局作用域
-在函数作用域中访问同名全局变量，可以使用window全局对象

var a=10;
function fun()
{
 var a="局部变量a";
 function fun2()
  {
      console.log("a="+window.a);
  }
  fun2();
}

输出结果"a=10"
-在函数作用域中也有声明提前的特性，
使用var关键字声明的变量，会在函数中所有代码执行之前被声明，即变量在声明它们的函数体以及这个函数体嵌套的任意函数体都是有定义的（此处也应⭐️）
函数声明也会在函数中所有代码执行之前声明

var scope="global";
function f()
{
    console.log(scope); //输出"undefined",而不是"global"
    var scope="local";
    console.log(scope) //输出“local”
}

你可能会误以为第一句输出是"global",其实是:“undefined”.根据语法，它在自身作用域中找到了var的声明提前，所以不会选择上一级全局变量scope

在函数中，不使用var声明的变量都会成为全局变量，必须使用！！

定义形参就相当于在函数作用域中声明变量⭐️⭐️⭐️

var e=23;
function fun(e){
    alert(e)      // 相当于var e;alert (e);
}
fun();
输出undefined  

---

3 变量声明提前

-使用var关键字声明的变量，会在所有的代码执行前被声明。
若不使用var关键字声明，变量不会被声明提前

console.log("a="+a);       
a=123;                     
此处输出结果报错  
console.log("a="+a); 
var a=123;（相当于在console语句上面var a；在此处 a=123;)           
此处输出undifined（声明但未赋值）

---

4 函数声明提前

-使用函数声明形式创建的函数function函数（）{}
他会在所有的代码执行前就被创建，我们可以在函数声明语句前调用
-但使用函数表达式创建的函数，不会被声明提前，不能在声明前调用

5 练习

1 var a=123;             
function fun(){          
    alert(a);               
    var a=456;              
}                           
fun();                     
alert(a);     

2 var a=123;             
function fun(){          
    alert(a);               
    a=456;              
}                           
fun();                     
alert(a);    

3 var a=123;            
function fun(a){        
     alert(a);               
     a=456;                  
}                       
fun();                  
alert(a);               

4 var a=123;            
function fun(a){        
     alert(a);               
     a=456;                  
}                       
fun(123);                  
alert(a);  

1 undefined;123
2 undefined;456
3 undefined;123 形参=var a;alert(a);a=456 即var a=456;alert(a);
4 123;123

参考文献

Javascript权威指南
尚硅谷javascript基础