Javascript教程（五）——作用域与声明提前

JS作用域

1.全局作用域

• 直接编写在script标签中的JS代码，都在全局作用域

• 全局作用域在页面打开时创建，在页面关闭时销毁

• 在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建，我们可以直接使用

  console.log(window); //"[object Window]"
  

• 在全局作用域中：

  • 创建的变量都会作为window对象的属性保存（※）

  var a = 10; //加window.可以
  console.log(window.a);
  var b = 10;//不加window.也可以
  console.log(b);
  
  console.log(window.c);  //"undefine"
  console.log(c);  //报错
  

  • 创建的函数都会作为window对象的方法保存

  function fun(){
        
        
      console.log("我是fun函数");
  }
  //加不加 window. 去调用都可以
  window.fun();
  //fun();
  -----------
  window.alert();
  //alert();
  

• 全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到

---

2、函数作用域

• 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
• 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
• 在函数作用域中可以访问到全局作用域的变量
  在全局作用域中无法访问到函数作用域的变量
• 就近原则：
  • 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，
    ​ - 如果有就直接使用
    ​ - 如果没有则向上一级作用域中寻找，直到找到全局作用域，
    ​ - 如果全局作用域中依然没有找到，则会报错ReferenceError
• 在函数中想要访问全局变量可以直接使用window对象
• 在函数作用域也有声明提前的特性。
• 在函数中，不使用var声明的变量都会成为全局变量

var c = 33;

function fun5(){
    
    
	console.log("c = "+c);   // c=33  所以根据就近原则，找到了全局中声明的c=33,所以console打印的值还是33
	c = 10; //但此处的c没有var声明，
			
	//d没有使用var关键字，则会设置为全局变量
	d = 100;  //相当于window.d
}
//在全局输出c
console.log(c);  //此时输出是10，因为函数中c=10没有var声明，所以它是全局变量，10覆盖了之前的33，所以最终结果是10
console.log(d);  //输出为100

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

  function fun6(e){
    
     //相当于var e;
  	alert(e);
  }
  fun6(); //所以此处必须传参，否则e为undefined

---

补充：变量和函数的声明提前

1、变量的声明提前

• 使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），
• 但是如果声明变量时不使用var关键字，则变量不会被声明提前

<script type="text/javascript">
	console.log("a = "+a);   //这里不会报错，是因为声明提前了，认为这句之前已经有了var a;了，所以只是没有赋值，输出"undefined"
	var a = 123;
</script>

2、函数的声明提前

• 使用函数声明形式创建的函数 function 函数名(){}, 它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数。
• 使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用

fun();  //放在function fun()前面也没问题，不会报错，会被执行
//函数声明，会被提前创建
function fun(){
    
    
    console.log("我是一个fun函数");
}
-----------------------------------------------------------
//函数表达式，不会被提前创建
var fun2 = function(){
    
    
    console.log("我是fun2函数");
};
fun2(); //必须放在var fun2 = function(){}之后，不然会报错