javascript 作用域總結

1.作用域

1.1作用域概念

通常來說，一段程序代碼中所用到的名字並不總是有效和可用的，而限定這個名字的可用性的代碼範圍就是這個名字的作用域。
作用域的使用提高了程序邏輯的侷限性，增強了程序的可靠性，減少了名字衝突

/*1.javascript作用域：就是代碼名字（變量）在某個範圍內起作用和效果
目的是爲了提高程序的可靠性更重要的是減少命名衝突
2.js的作用域（es6）之前：全局作用域  局部作用域 
3.全局作用域：整個script標籤或者是一個單獨的js文件
var num = 10;
4.局部作用域（函數作用域）：在函數內部就是局部作用域，這個代碼的名字只在函數內部起效果和作用
function fn(){
	//局部作用域
	var num = 10;
}*/

2.變量的作用域

//變量的作用域：根據作用域的不同我們變量分爲全局變量和局部變量
//1.全局變量：在全局作用域下的變量 在全局下都可以使用
//注意：如果在函數內部，沒有聲明直接賦值的變量也屬於全局變量
var num = 10; //num就是一個全局變量
console.log(num);   //10
function fn(){
	console.log(num);  //10
}
fn();
//2.局部變量：在局部作用域下的變量 在局部內部的變量
//注意：函數的形參也可以當做看做是局部變量
function fn(){
	var num1 = 10;   //num1就是局部變量，只能在函數內部使用
	num2 = 20;
}
fn();
console.log(num1); //num1是未定義的，局部變量外面是不能使用的
console.log(num2); //num2沒有聲明，是全局變量
//3.從執行效率來看全局變量和局部變量
//（1）全局變量：只有瀏覽器關閉的時候纔會銷燬，比較佔內存資源
//（2）局部變量：當我們程序執行完畢就會銷燬，比較節約內存資源

2.1 全局變量

在全局作用域下聲明的變量叫做全局變量（在函數外部定義的變量）

• 全局變量在代碼的任何位置都可以使用
• 在全局作用域下var聲明的變量是全局變量
• 特殊情況下，在函數內不使用var聲明的變量也是全局變量（不建議使用）

2.2 局部變量

在局部作用域下聲明的變量叫做局部變量（在函數內部定義的變量）

• 局部變量只能在該函數內部使用
• 在函數內部var聲明的變量是局部變量
• 函數的形參實際上就是局部變量

2.3 全局變量和局部變量的區別

• 全局變量：在任何一個地方都可以使用，只有瀏覽器關閉時纔會被銷燬，因此比較佔內存
• 全局變量：只有函數內部使用，當其所在的代碼塊被執行時，會被初始化；當代碼塊運行結束後，就會被銷燬，因此更節省內部空間

2.4 js沒有塊級作用域

//js中沒有塊級作用域  js的作用域：全局作用域 局部作用域 現階段js沒有塊級作用域
//js也是在es6的時候新增的塊級作用域
//塊級作用域 {}   if{}  for{}
if(3<5){
	var num = 10;
}
console.log(num);

• 全局變量：在任何一個地方都可以使用，只有瀏覽器關閉時纔會被銷燬，因此比較佔內存
• 全局變量：只有函數內部使用，當其所在的代碼塊被執行時，會被初始化；當代碼塊運行結束後，就會被銷燬，因此更節省內部空間

3.作用域鏈

3.1 作用域鏈

• 只要是代碼，就至少有一個作用域
• 寫在函數內部的局部作用域
• 如果函數中還有函數，那麼在這個作用域中就又可以誕生一個作用域
• 根據在內部函數可以訪問外部函數變量的這種機制，用鏈式查找決定哪些數據能被內部函數訪問，就稱作作用域鏈

//作用域鏈：內部函數訪問外部函數的變量，採取的是鏈式查找的方式來決定取那個值，這種結構我們稱爲作用域鏈  就近原則
var num = 10;
function fn(){  //外部函數
	var num = 20;
	function fun(){  //內部函數
		console.log(num);
	}
	fun();
}
fn();

3.2 作用域鏈案例

//案例1：結果是幾？
function f1(){ 
	var num = 123;
	function f2(){  
		//console.log(num);   //123
		var num = 0;
		console.log(num);   //0
	}
	f2();
}
var num = 456;
fn();

//案例2：結果是幾？
var a = 1;
function fn1(){ 
	var a = 2;
	var b = '22';
	fn2();
	function f2(){ 
		var a = 3;
		fn3(); 
		function f2(){ 
			var a = 4;
			console.log(a);   //4
			console.log(b);   //22
		}
	}
}
fn1();