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>

関数本体内のパラメーターの変更が元の変数に影響を与えることが明らかにわかります。これは、通常のパラメーターの受け渡しとは質的に異なります。特別な注意が必要です。

ただし、関数本体内で渡された配列またはオブジェクトに値を代入する場合、この変更は関数本体外の元の変数には反映されません。

以下を参照してください:

<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 プログラミングを学習する皆さんのお役に立てれば幸いです。