자바스크립트 리터럴 객체 내부에서의 참조
조회수 2464회
정말 간단한 질문입니다만.. 리터럴 객체를 활용해서 자바스크립트를 좀더 간결하게 하고 있습니다. 그런데 객체 내 프로퍼티가 메서드일때에는 this나 상위 객체명을 통해서 다른 프로퍼티를 참조할 수 있는데 그렇지 않을때는 안되더군요.. 예를 들면 이런식입니다.
//메서드 없이 선언했을 때
> var lit = {
a: 'a',
b: lit.a+'b'
}
TypeError: lit is undefined
//메서드를 사용했을 때
> var lit = {
a: 'a',
b: function(){return lit.a+'b'}
}
unrefined
> lit.b()
"ab"
> lit.a
"a"
물론 참조가 필요할 때마다 익명함수를 동원해서 리턴시키면 되겠지만 그러면 쓸데없이 코드가 늘어나는것 같기도 하네요. 다른 방법은 없나요? 방법이 이것뿐이라면 왜 그런지도 궁금합니다.
2 답변
-
문제가 발생하는 원인은 값이 평가되는 시점 때문입니다.
먼저 말씀드리면 리터럴을 사용한 객체 생성으로는 자신을 참조하는 값에 대한 원하시는 값을 얻을 수 없습니다.
아래 코드에서 에러가 발생하는 이유는
b: lit.a+'b'
를 수행하는 시점에 아직lit
가 존재하지 않기 때문입니다.var lit = { a: 'a', b: lit.a+'b' } TypeError: lit is undefined
반대로 아래 코드가 동작하는 이유는
b
의 값이function
이기 때문에 함수 안쪽에 존재하는lit.a+'b'
의 평가 시점이 늦춰지기(함수 호출시 평가) 때문입니다.인터프리터가
lit.b()
를 평가할 때b()
함수 안에서 참조하는lit
객체는 존재하며 이 경우에lit
에는a
프로퍼티 값이 존재하기 때문에 위 코드가 정상적으로 동작하는 것입니다.var lit = { a: 'a', b: function(){return lit.a+'b'} } unrefined > lit.b() "ab" > lit.a "a"
-
(•́ ✖ •̀)
알 수 없는 사용자
-
-
getter를 이용하는 방법이 있긴 합니다.
var lit = { a: "a", get b() { return this.a + "b"; }, }; console.log(lit.b);
댓글 입력