> 웹 프론트엔드 > JS 튜토리얼 > javascript 참조 유형 포인터 작동 방식_javascript 팁

javascript 참조 유형 포인터 작동 방식_javascript 팁

WBOY
풀어 주다: 2016-05-16 16:04:40
원래의
874명이 탐색했습니다.

먼저 예를 살펴보겠습니다.

 <script>
 var a = {n:1}; 
 var b = a; 
 a.x = a = {n:2}; 
 console.log(a.x);// --> undefined 
 console.log(b.x);// --> [object Object] 
 </script>
로그인 후 복사

위의 예는 간단해 보이지만 결과는 이해하기 쉽지 않고 사람들을 혼란스럽게 하기 쉽습니다. - "a.x가 객체 a를 가리키지 않습니까? 왜 log(a.x)가 정의되지 않습니까?" a.x와 같아야 하나요? 왜 로그에 객체가 2개 있나요?"

물론, 먼저 그 이유와 작동 메커니즘을 알면 계속 읽을 필요가 없습니다.

js 참조 유형의 "할당"이 어떻게 작동하는지 더 자세히 이해하기 위해 이 간단한 코드의 작업 단계를 분석해 보겠습니다.

우선

var a = {n:1}; var b = a;

여기서 a는 객체 {n:1}(객체 A라고 부르자)을 가리키고, b는 a가 가리키는 객체를 가리킨다. 즉, 이때 a와 b는 모두 객체 A를 가리킨다. :

이 단계는 이해하기 쉽습니다. 다음 매우 중요한 코드 줄을 계속 진행하세요.

a.x = a = {n:2};

js의 할당 작업 순서는 항상 오른쪽에서 왼쪽이라는 것을 알고 있지만 "."이 우선 순위가 가장 높은 연산자이므로 이 코드 줄은 a.x를 먼저 "계산"합니다.

이때 일어난 일은 다음과 같습니다. a가 가리키는 객체 {n:1}에는 새로운 속성 x가 있습니다(이 x는 정의되지 않음).

그림에서 볼 수 있듯이 b는 a와 마찬가지로 객체 A를 가리키므로 a.x를 사용하여 A의 x 속성을 나타내는 것 외에도 자연스럽게 b.x를 사용하여 나타낼 수도 있습니다.

그런 다음 "오른쪽에서 왼쪽으로" 할당 연산 순서에 따라 먼저 a={n:2}가 실행됩니다. 이때 변경 사항이 가리키는 객체는 새로운 객체 {n:2}가 됩니다(우리는 호출합니다). it 객체 B)의 경우:

그런 다음 a.x=a를 계속 실행합니다. 많은 사람들은 "객체 B도 새로운 속성 x를 추가하고 객체 B 자체를 가리킵니다"라고 생각할 것입니다.

그러나 실제로는 그렇지 않습니다. js는 이미 처음에 a.x를 계산했기 때문에 a.x가 객체 A의 x라고 이미 분석했기 때문에 다시 돌아와서 a.x를 다음과 같이 구문 분석합니다. x 객체 B.

따라서 a.x=a는 객체 A의 속성 x가 객체 B를 가리키는 것으로 이해되어야 합니다.

그렇다면 이때 결과는 뻔할 것입니다. console.log(a.x)인 경우 a는 객체 B를 가리키지만 객체 B에는 x 속성이 없습니다. 괜찮습니다. 객체에서 속성을 찾을 때 JavaScript는 주어진 이름을 가진 속성을 찾을 때까지 프로토타입 체인을 따라 이동합니다. 그러나 검색이 프로토타입 체인의 맨 위에 도달하면(즉, Object.prototype) 지정된 속성 B.prototype.x가 여전히 발견되지 않으며 undefound가 자연스럽게 출력됩니다.

console.log(b.x)의 경우, b.x는 객체 B를 가리키는 객체 A의 x 속성을 나타내기 때문에 당연히 [object Object]가 출력됩니다. 여기서 [object Object]는 2가 아닙니다. 객체의 문자열 형식인 은 "[object Object]" 형식의 Object 객체의 toString() 메서드에 대한 암시적 호출입니다. 그래서 [객체 Object]는 단지 객체를 나타냅니다

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

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