this
this?
공부를 하면서도 뭔가 애매한 개념 this. 그래서 핵심부터 말하고 더 자세하게 설명하도록 하겠습니다.
this의 값은 함수를 호출할 때(호출하는 방법에 의해) 결정되는 것이고, 호출한 객체가 바로 this이다.
그리고 예외적으로 this를 호출과 무관하게 묶어줄 수 있는(고정시킬 수 있는)함수가 bind이다.(ES5)
자바스크립트에서 this는 샐행 컨텍스트가 생성 될 때 호출되고, 실행 컨텍스트는 함수를 호출할 때 생성됩니다.
그럼 this는 함수가 호출될 때 결정되는 것이라 할 수 있습니다.
이제는 자세하게 this가 어디서 어떻게 호출되는지 아는 것이 중요합니다.
다양한 상황에 따라 this가 어떤 것을 바라보게 되는지 알아보겠습니다.
상황에 따라 달라지는 this
전역 공간에서 this
전역 공간에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서 전역객체는 window이고, Node.js에서는 global 입니다.
2023년 2월 19일 추가
(2021년에는 node가 뭔지 사실 잘 와닿지 않았어서 실행을 못해봤었다보다)
그런데 삭제를 할 때에는 전역변수 선언과 전역객체의 프로퍼티 할당이 전혀 다르게 동작합니다.
처음부터 전역 객체의 프로퍼티로 할당 한 경우에는 configurable속성(변경 및 삭제 가능성)이 true로 삭제가 가능하지만
전역 변수로 선언한 경우에는 configurable속성이 false로 되기 때문입니다.
메서드로서 호출할 때, 그 메서드 안에서 this
함수를 실행하는 방법이는 그냥 함수로 호출하는 방법과 메서드로서 호출하는 방법이 있습니다.
이 둘을 구분하는 기준은 독립성입니다. 함수는 혼자 독립적인 기능을 수행하지만 메서드는 자신을 호출한 대상 객테에 관한 동작을 수행합니다.
함수로서의 호출과 메서드로서의 호출을 구별하는 방법은 아주 간단한데, 함수 앞에 객체가 명시되어있는 경우 메서드로 호출된 것입니다.
즉, .점 또는 [] 대괄호 표기법으로 어떤 함수를 호출할 때 입니다.
그리고 점 표기법의 경우 마지막 점 앞에 명시 된 객체가 this 입니다.
함수로서 호출할 때, 그 함수 안에서 this
반대로 어떤 함수를 그냥 함수로 호출하면 this는 전역객체를 참조하고, 메서드 안의 함수에서도 똑같이 전역 객체를 참조합니다.
ES5에서는 내부 함수에서 this를 우회하기 위해 var self = this; 와 같은 선언의 방법을 사용하였는데
ES6에서는 함수 내부에서 this가 전역객체를 참조하는 것을 보완하기 위해 this를 바인딩 하지 않는 arrow function을 도입하였습니다.
arrow function은 상위 스코프의 this를 그대로 활용할 수 있습니다.
콜백함수 호출할 때, 콜백한수 안에서 this
콜백함수 또한 함수이기 때문에, 일반 함수를 호출할 때와 같이 this가 전역객체를 참조합니다.
하지만 제어권을 받은 함수에서는 콜백함수에 별도로 this가 될 대상을 지정 할 경우, 그 대상을 참조합니다.
생성자 함수 안에서 this
생성자 함수란 어떤 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수입니다.
생성자가 클래스, 클래스를 통해 만들어진 객체가 인스턴스 입니다.
프로그래밍에서 생성자란 '구체적인 인스턴스를 만들기 위한 틀'입니다.
자바스크립트에서는 new 명령어와 함수를 호출하면 해당 함수가 생성자로 동작합니다.
그리고 어떤 함수가 호출 된 경우 내부에서 this는 새로 만들어지는 인스턴스 자신이 됩니다.
