[자바스크립트] javascript - this

자바스크립트에서 함수를 호출할 때 기존 매개변수로 전달되는 인자 값에 더해, arguments 객체 및 this 인자가 함수 내부로 암묵적으로 전달되어집니다.

 

this 인자는 이해하기 조금 까다롭습니다.

this가 이해하기 어려운 이유는 자바스클비트의 여러가지 함수가 호출 패턴에 따라 this가 다른 객체를 참조(this 바인딩)하기 때문입니다.

아래와 같이 this 바인딩에는 3가지 패턴이 있습니다.

1. 객체의 메소드를 호출 -> 해당 메소드를 호출한 객체로 바인딩
2. 함수를 호출 -> 전역 객체에 바인딩
3. 샘성자 함수를 호출 -> 새로 생성되는 객체에 바인딩

오늘 차근차근 이 this 바인딩에 대해서 정복해 나가도록 하겠습니다.

1. 객체를 호출할 때 this 바인딩

객체의 메소드를 호출할 경우, 메소드 내부 코드에서 사용된 this는 해당 메소드를 호출한 객체로 바인딩이 됩니다.

아래 코드로 쉽게 설명해보도록 하겠습니다.

음.. 이해가 잘 안되신다구요?

그렇다면 좀 더 시각화 시켜서 설명을 드려보겠습니다!

sayName 메소드를 호출할 때 이 this를 마주하면 자바스크립트 엔진은 이렇게 이해하고 처리할 것입니다.

"만약 test 객체를 호출한다면,

 음.. this네? 그럼 이걸 부른 객체가 누구야? 아 test 객체구만?

 this.name -> test.name (이렇게 오버랩된다고 생각하면 이해하기 쉽겠죠?)

 오 test 객체의 name 프로퍼티는 "박경두"구만 ! "

 

 other_test 객체를 호출할 때도 똑같은 작업을 자바스크립트 엔진은 진행할 것입니다.

이 말을 조금 고급스럽게 바꾸면, 

객체의 메서드를 호출하면 this는 자신을 호출한 객체에 바인딩된다고 하는 것입니다.

조금 있어보이죠?

2. 함수를 호출할 때 this 바인딩

함수를 호출하면, 해당 함수 내부 코드에서 사용된 this는 전역 객체에 바인딩됩니다.

브라우저 호스팅환경에서는 전역 객체는 window 객체죠.

*** 내부함수 ***

주의할 점은 메소드의 내부 함수(inner function)를 호출했을 경우에도 그대로 적용된다는 점입니다.

이러한 문제점을 해결하려면 부모 함수의 this를 다른 변수에 저장을 해야합니다.

보통 이 this를 that이라는 변수에 넣어서 해결하곤 합니다.

의도에 맞게 결과가 나옴을 알 수 있습니다.

3. 생성자 함수를 호출

생성자(constructor)로서 사용하게 되면 다른 객체지향 언어와 비슷한 방식. 즉, 생성된 객체의 멤버변수를 참조하게 된다. 이것은 prototype을 사용해서 정의한 객체의 메소드에서도 동일하다.

이렇게 this는 부모 객체 그리고 생성자이냐 그냥 함수냐에 따라서 this 바인딩이 완전히 달라지니 꼭 숙지해야될 개념입니다.