Javascript變量函數淺析

一、變量 

在javascript變量中可以存放兩種類型的值：原始值和引用值。 

原始值存儲在棧上的簡單字段，也就是值直接存儲在變量所標示的位置內。 

引用值存儲在堆內的對象，棧內變量保存的是指向堆內對象的指針值。 

在javascript中有5種基本類型：Undefined,Null,Boolean,Number,String。 

引用類型其實就是對象，類似其他語言中類實例的概念。 

var b = true; // 存儲在棧上 
var num = 20; //存儲在棧上 
var b = new Boolen(true); //存儲在堆內 
var num = new Number(20); // 存儲在堆內 

通常生成對象的方式 : 

new +類型名稱 var obj = new object() 

如果沒有參數也可以寫成 var obj = new object; 

還可以用對象字面量生成對象 var obj = {} 

二、函數 
在javascript 中函數就是對象，應該像對待javascript中其他對象一樣對待函數，每個函數都隱式附加兩個額外參數this,arguments。 

函數可以：賦值給變量，作爲其他對象的屬性，作爲其他函數的參數，作爲返回值，還可以用字面量來創建函數。 

函數上下文： 

在面嚮對象語言裏用this關鍵字引用類對象的當前實例。javascript裏的this關鍵字卻不同於面嚮對象語言中的this。在javascript中，函數就是對象， this引用的是調用當前函數的函數上下文。 

可以通過call()和apply()方法來顯式的指定函數上下文。Call的第一個參數被用來作爲調用函數的上下文，其他參數作爲被調用函數的參數傳入被調用函數。Apply()和Call()差不多，只不過第二個參數是數組。 

var obj = { m:"hello" } 
var m="hi"; 
var say=function() { 
	alert(this.m); //this指向函數調用上下文 
} 
say();//hi，window爲調用上下文 
say.call(obj);// hello，此時obj爲函數調用上下文 
say.call(window);// hi，window爲調用上下文 

作用域： 
定義在函數中的參數和變量在函數外部是不可見的，而且在一個函數中的任何位置定義的變量在該函數中的任何地方都是可見的。 

var obj = function() { 
	var num = 1; 
	return { getValue: function() { 
			alert(num); //undefined 
			var num = 2; 
			alert(num); //2 
		}
	} 
}(); 
obj.getValue(); 

閉包 
所謂閉包就是函數能使用函數外定義的變量,函數可以訪問創建時的上下文環境。 

var hello = "hello word!"; 
function sayHello() { alert(hello); } 
sayHello(); 
var obj = function() { 
	var value = 0; 
	return { 
		setValue: function(val) { value += typeof val === 'number' ? val : 1; }, 
		getValue: function() { return value; } 
	} 
}(); 
obj.setValue('a'); 
alert(obj.getValue()); //1 

注意最後一行的(),()是調用運算符，它表示函數立即調用並返回調用結果。所以obj並不是引用函數，而是引用該函數返回的一個包含兩個方法的對象，而且這兩個方法享有訪問value變量的特權。 

再舉個網上流傳很廣的內部函數訪問外部函數局部變量例子來說明閉包。點擊相應的列表項彈出對應的順序編號。 

<li id="a">test1</li> 
<li id="b">test2</li> 
<li id="c">test3</li> 

var test = function() { 
	var num = document.getElementsByTagName("li"); 
	for (var i=0,len=num.length; i < len; i++) { 
		num[i].onclick = function() { 
			alert(i); //內部函數可以訪問外部函數變量,i的最終值是3， 
			//而不是構造函數時的i值，所以此處都彈出3 
		} 
	}
	alert(i); //3 
} 
test(); 

下面這個寫法可以獲得正確的結果： 

var test = function() { 
	var num = document.getElementsByTagName("li"); 
	for (var i = 0,len = num.length; i < ; i++) { 
		num[i].onclick = function(i) { 
			return function() { 
				alert(i + 1); 
			} 
		}(i); //每次構造函數時立即把i值傳進去執行，現在onclick綁定的函數是執 
		//行後返回的函數 
	} 
	alert(i); //3 
} 
test();