> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 객체 매개변수_javascript 기술을 참조하여 전달

JavaScript 객체 매개변수_javascript 기술을 참조하여 전달

WBOY
풀어 주다: 2016-05-16 15:19:59
원래의
1089명이 탐색했습니다.

오늘 다음과 같은 함수 외부의 매개변수 변경에 영향을 미치는 방법에 대한 문제에 직면했습니다.

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

  function A(n) {
    n = "Yao";
  }
</script>
로그인 후 복사

출력 결과는 여전히 wood입니다. 이는 myname이 함수 A에 전달될 때 함수 본문에 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()에서 반복적으로 호출하도록 구현할 수도 있습니다.

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿