개요
Class 내부에 선언했던 객체를 호출하려던 차 함수 내부의 this가 undefined라는 오류를 발견했습니다.
아래는 에러가 발생한 코드와 비슷한 샘플 코드입니다.
해결 방법
에러를 해결하기 위해 검색하던 중 해결가능해 보이는 글을 발견했습니다.
위 글에서 두 가지 해결방법을 제시하였는데,
함수를 arrow function으로 작성하는 방법과 함수 선언으로 작성한 함수들을 bind 하는 코드를 추가하는 방법
두 가지 방법을 제시했습니다.
각각 두 가지 방법으로 테스트를 해본결과 일단 잘 실행되는 것을 확인하였습니다.
아래부터는 제가 공부한 내용을 적어 놓았습니다.
두 방식의 차이
함수를 arrow function으로 작성하는 것과 명시적으로 bind 하는 코드를 작성하는 것 무엇이 다른지 조사해보았습니다.
arrow function의 경우
우선 arrow function은 함수(method)가 될 수 없습니다. 그래서 컴파일 시 arrow function 식으로 작성된 함수는
class 생성자 함수 내부의 멤버변수로써 함수가 작성됩니다.
아래는 위 코드에서 class 함수를 화살표 함수로 변경한 후 complie 한 결과입니다.
명시적으로 bind 하는 경우
생성자 내부에 this를 사용할 함수들을 bind 할 경우, bind함수의 결괏값에 따라서 새로운 함수가 생성이 되고
첫 번째 인자는 this를 가지는 함수로 변경합니다.
아래는 컴파일된 에러가 발생한 코드에 bind를 명시적으로 추가한 코드의 compile 결과입니다.
class 함수 내부에서 this가 undefined가 뜨는 이유
Lexical Scope는 함수와 변수의 Scope를 선언된 위치를 기준으로 정합니다.
Dynamic Scope는 함수나 변수의 Scope를 호출된 시점을 기준으로 사용합니다.
javascript는 Lexical scope을 사용합니다.
Lexical Scope는 함수와 변수의 Scope를 선언된(컴파일) 위치를 기준으로 정합니다..
그 결과 런타임과 상관없이 미리 정의가 된 Scope에 접근이 가능하게 됩니다.
Lexical scope는 자신 내부에 찾는 것이 없다면 상위 Scope에서 찾습니다.
(중첩 함수의 경우 상위 함수에서 선언한 변수를 내부 함수(클로저)에서 참조 가능한 것)
화살표 함수가 아닌 선언식 함수의 경우
함수의 컨텍스트가(this) Dynamic Scope와 유사하게 동작합니다.
즉 런타임에 의해서 함수의 컨텍스트가 정해 지므로,함수의 호출에 따라서 this가 바뀌게 됩니다.
위 같은 이유로 클래스 내부에 선언식 함수의 this가 undefined가 되었습니다.
화살표 함수의 경우
Lexical Scope를 사용하므로 선언 시 자신이 속한 this를 계속적으로 참조가 가능하여
따로 바인딩 없이 this가 제대로 호출이 된 이유입니다.
참조 링크
에러 해결: https://stackoverflow.com/questions/55088050/ts-class-method-is-undefined-in-callback
에러 해결(상속문제): https://stackoverflow.com/questions/53997107/allow-subclass-to-override-with-either-a-function-property-or-a-method/53997455#53997455
scope 설명: https://medium.com/sjk5766/lexical-scope-closure-%EC%A0%95%EB%A6%AC-41f5d1c928e4
javascript scope: https://medium.com/front-end-weekly/the-strange-case-of-arrow-functions-and-mr-3087a0d7b71f
javascript context: https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0
번외
class 내 모든 함수를 바인딩하는 함수