javaScript快速入门之作用域

作用域(scope)

• 作用域指一个变量的作用范围

• function fun(){
  	var a = 12;
  }
  console.log(a); // 无法查询到
  

全局作用域

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

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

• 在全局作用域中有一个全局对象 window ,可以直接使用

  – 代表一个浏览器的窗口，由浏览器直接使用‘

  console.log(window); // object
  

• 在全局作用域中，都会作为window的对象保存

  –

   var a = 10; // window对象的属性
   alert(window.a);
  

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

变量的声明提前

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

console.log(a);
var a = 123;

函数的声明提前

• 使用函数声明创建 function 函数(){}，会在所有代码执行之前就被创建

  扫描二维码关注公众号，回复： 11332176 查看本文章

• 可以在声明前调用函数

• 使用函数表达式创建的函数，不能被声明提前

• fun(); // 函数声明，会被提前创建
  function fun(){
  	console.log('1');
  }
  
  var fun2 = function(){  // 必须要等到这一行，函数才会赋值给变量
  	console.log('2'';)   // 不能在代码之前被创建
  }
  

函数作用域

• 调用函数时创建函数作用域，函数执行完毕，函数作用域销毁

• 每调用一次函数就会创建一个新的函数作用域，互相独立

• 函数作用可以访问全局作用域，全局无法访问到局部

• 当在函数作用域中操作一个变量，先在自身作用域查找，没有，往上面查找，如果找不到，会出现报错

• 在函数中不使用var声明的变量都会成为全局变量

• var a = 10;
  function fun(){
  	var a = '20';
  	function fun2(){
  		console.log(a);   // 20
  		console.log(window.a); // 10
  	}
  }
  
  var a = 20;
  function fun2(){
  	console.log(a);
  	var a = 10;   // undefined 声明提前了
  }
  相当于
  
  var a = 20;
  function fun2(){
  	var a;
  	console.log(a);
  	a = 10;
  }	
  	
  var a = 20;
  function fun2(){
  	console.log(a);  // 20
  }
  
  
  var c = 10;
  function fun2(){
  	console.log(c); // 没有声明变量往上一级去找
      c = 20;  // 从上到下执行代码，然后改变c的值
      a = 100; // 相当与 window.a
  }
  
  fun2(); // 10
  console.log(c); // 20
  console.log(a); // 100
  
  
  // 定义形参就相当于在函数作用域中声明了变量
  var a = 20;
  function fun(e){
  	alert(e);
  }
  fun(); // undefined
  fun(20); // 20
  

巩固题

var a = 10;
function fun(){
	alert(a);
}
fun();   // 10
---------------------
var a = 10;
function fun(){
	alert(a);
	var a = 20;
}
fun();  // undefined
alert(a);10
---------------------
var a = 10;
function fun(a){
	alert(a);
	a = 20;
}
fun(); // undefined
alert(a); // 10   因为函数定义了形参 var a; alert(a);  a = 20;
---------------------
var a = 10;
function fun(a){
	alert(a);
	a = 20;
}
fun(10); // 10
alert(a); // 10