Udemy/Ts/section5/61: this & binding

[4BFC]

✍Udemy/Ts/section5/61: this & binding

본 PR은 청강 1회독을 마친 후 N회독으로 작성된 PR입니다.

🔥KeyWord

• this
• copy to function in class
• undefined
• binding

📝Description

• this
  • 🚩: this를 사용해서 출력한 class 내 전역 name 프로퍼티 정상 출력
  • this는 class기준 전역에 있는 프로퍼티를 참조하는 역할을 한다. 위의 코드처럼 name이란 class 전역 필드를 class 함수 내 log에서 참조해서 사용하고 있다.
• undefined(복제된 class 함수 사용)와 this의 주의 사항
  • 🚩: this키워드를 다시 한번 객체로 감싼 복제 함수 할당 후 출력 undefined 결과 확인, this를 사용시 주의 사항
  • 🚩: undefined 재확인
  • 위 코드처럼 accountingCopy라는 변수에 새로운 객체구조로 값들을 할당하고 accounting.describe로 접근을 하게 되면 의도하지 않은 error가 발생하게 된다. 물론 log는 출력되지만 undefined로 출력된다. 이유는 다음과 같다. 우선 undefined가 발생한 위치를 파악해야한다. 우리가 descrbie 프로퍼티를 불러온 대상은 accountingCopy이다. 즉, accountingCopy는 describe: accounting.describe로 accounting이라는 객체에 접근한것 같지만 사실상 어느 무엇도 참조하지 못한다. describe 함수는 원래 accounting 객체에서 정의된 것이지만 accountingCopy로 복사되었을 때 describe 함수를 호출하는 객체는 이제 accountingCopy가 된다. this는 함수가 호출된 시점의 객체를 참조하므로 accountingCopy에서 describe를 호출할 경우 this는 accountingCopy를 가리킨다. 그러나 accountingCopy는 Department 클래스의 인스턴스가 아니므로 this.name은 undefined로 출력된다. 정확하게는 js의 동작원리로 바라본다면 변수를 할당하는 스택이 참조하기 위해서는 힙영역을 통해서 참조해야 하는데 스택에서 스택을 참조하고 있기 때문에 서로 연결되지 않아 더미객체로 인지하고 undefined를 출력하게 되는 불상사가 발생하는 것이다. 문제는 JavaScript에서 this가 함수 호출 방식에 따라 동적으로 바인딩되기 때문이다. 함수가 객체의 메서드로 호출될 때 this는 그 객체를 참조한다. 하지만 describe: accounting.describe로 메서드를 복사해 다른 객체(accountingCopy)에서 호출하면, this는 원래의 객체 accounting이 아닌 accountingCopy를 참조하려고 하며 accountingCopy는 Department 클래스의 인스턴스가 아니므로 this.name은 undefined가 된다. 이로 인해 undefined가 출력된다.
  • 참고로 왜 새로 할당한 accountingCopy의 describe 객체에 ()가 없는 accounting.describe로 할당한 이유는 함수를 실행하지 않고 _함수의 참조만 전달_하기 위함이다.
• 해결 방안
  • 🚩: 복제한 class의 함수를 사용 가능하게 하기 위한 방법과 에러 임시적인 해결 단, 똑같이 구현 불가능
  • 앞서 보았던 문제를 해결하기 위해서는 this키워드를 사용해야 하는데 위 코드와 같이 매개변수를 통해 this로 청사진 class형식을 참조하게 하면서 새로 할당한 객체 name 을 참고하도록 유도해야 undefiend와 같은 결과를 회피 할 수 있다.
  • 이 문제를 해결하려면 this를 명시적으로 고정시켜야 한다. 이를 위해 **bind()**를 사용하여 this를 accounting 객체에 고정시킬 수 있다. 예를 들어 accountingCopy.describe = accounting.describe.bind(accounting);와 같이 작성하면, describe 메서드가 항상 accounting 객체를 참조하게 된다. 따라서 this.name은 accounting 객체의 name 속성을 참조하게 되어, undefined 대신 올바른 값이 출력된다.

📌Summary

• js의 동작 방식을 이해하면 좀 더 쉽게 이해할 수 있을 것 같다. 나의 얄팍한 개념과 지식으로 js 동작 방식과 연결해서 설명 했으나 잘 설명된 것인진 모르겠다. 기회가 된다면 js가 동작하는 방식을 좀 더 디테일하게 다루어 보면서 this를 다시 설명하면 좋을 듯하다.
• 참고로 힙과 스택 부분을 조금 더 다루자면 위의 undefined의 오류가 발생하는 코드는 힙과 스택이 정상적으로 참조하고 동작하고 있다. 그렇기 때문에 undefined가 출력된다. 문제는 this이다. 함수는 정상적으로 힙 메모리를 참조할 수 있지만 this가 제대로 바인딩(binding)되지 않아 undefined가 발생하는 것이다. 따라 바인딩(binding)도 기회가 되면 다시 다루어보고 싶다. (바인딩(binding)을 간단히 설명하면 다음과 같다. 특정 변수나 함수가 특정 객체 또는 값에 연결되는 것)