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");
var i;
for (i = 0; i < num.length; i++) {
              num[i].onclick = function() {
                  alert(i); //內建函式可以訪問外部函數變數,i的最終值是3，
//而不是建構函式時的i值，所以此處都彈出3
              }
          }
          alert(i); //3
      }
      test();

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

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