DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript對象參數的引用傳遞
JavaScript對象參數的引用傳遞
編輯:關於JavaScript     

今天碰到一個問題,怎樣把參數變更影響到函數外部,如:

<script>
  var myname = "wood";
  A(myname);
  document.write(myname);

  function A(n) {
    n = "Yao";
  }
</script>

輸出結果還是wood,說明當myname傳入A函數後,在函數體內,相當於有一個myname的副本,這個副本的值等於myname,之後在函數體內對其做的操作是在這個副本上進行的。

但情況有所不同,當傳入的參數是 數組 、 對象 時,在函數體內對參數所做的更改會反映到原變量上。

<script>
  var myname = ["wood"];
  A(myname);
  document.write(myname[0]);

  function A(n) {
    n[0] = "Yao";
  }
</script>

可以看出,上面代碼中已經把friut數組的第一個元素更改了。

下面是關於對象的例子:

<script>
  var myname = {name1:"wood"};
  A(myname);
  document.write(myname.name1);

  function A(n) {
    n.name1 = "Yao";
  }
</script>

可以很明顯地看到函數體內對參數的改動影響到了原來的變量,這與通常情況下的傳參有質的區別了。需要特別注意。

But,當在函數體內對傳入的數組或對象賦值時,這個更改不會反映到函數體外的原變量身上!

請看:

<script>
  var myname = {name1:"wood"};
  A(myname);
  document.write(myname.name1);

  function A(n) {
    n = {name1:"Yao"};
  }
</script>

按照上面函數內部的更改會反映到原變量的理論,你肯定覺得執行完A()後myname變量的name1屬性的值已經變成'Yao'了吧。但結果讓人有點難以接受。

原因在於,當在函數體內使用賦值操作時,系統就創建了一個變量名為p的變量。這個p是函數內部的變量,對它進行賦值當然只在函數體內起作用,外面的myname還是原來的myname。

這一步與原來代碼的操作差別僅在於在 函數體內是對參數賦新值呢還是對參數的屬性或數組的元素進行更改 。

下面我們用傳遞對象的方式,重新實現一個時鐘數字格式化輸出的例子:

<script>
  var mytime = self.setInterval(function() {
    getTime();
  }, 1000);
  //alert("ok");
  function getTime() {
    var timer = new Date();
    var t = {
        h: timer.getHours(),
        m: timer.getMinutes(),
        s: timer.getSeconds()
      }
      //將時間對象t,傳入函數checkTime(),直接在checkTime()中改變對象中的值。
      //而無需再去接收返回值再賦值
    checkTime(t);
    document.getElementById("timer").innerHTML = t.h + ":" + t.m + ":" + t.s;
  }

  function checkTime(i) {
    if (i.h < 10) {
      i.h = "0" + i.h;
    }
    if (i.m < 10) {
      i.m = "0" + i.m;
    }
    if (i.s < 10) {
      i.s = "0" + i.s;
    }
  }
</script>

例子使用setInterval()函數定時調用刷新事件,也可以用setTimeout()在getTime()中遞歸調用來實現。

以上就是本文的全部內容,希望對大家學習javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved