자바스크립트 this
자바스크립트의 this... 그때마다 달라지는 this라는 아이에 대해 다시한번 개념을 정리하고자하여 정리해 보았다
binding : 호출한 대상에게 실제 함수를 연결 짓는것
전역객체
- 전역을 감싸는 객체, 즉 코드 전체를 아우르는 객체이다.
브라우저 환경에서 전역객체를 window , Node.js 환경에서는 global이라고 부른다
자바스크립트의 this의 바인딩
- 일반함수를 호출했을때의 this
- 객체를 호출했을때의 this
- 생성자함수를 호출했을때의 this
- 화살표 함수의 this
생성자함수의 경우 : new 연산자를 붙여 실행하고 함수이름의 첫글자가 대문자로 시작하는 함수
일반함수 호출 this
일단 기본적으로 단독으로 사용한 this는 전역객체에 바인딩이 된다. 일반함수의 경우에도 함수내에서 사용한 this는 전역 객체에 바인딩이 된다
즉 , 일반함수의 호출과정에서 this는 전역객체를 가르킨다
여기서 this.name 은 'joo'를 가르킨다. 전역객체에 바인딩이 되기 때문이다.
객체 메서드 this
객체메서드에서의 this는 호출한 메서드의 객체로 바인딩이 된다.
obj.sayHi()는 'joo'를 obj2.sayHi()는 'moon'을 가르킨다
즉 this의 바인딩이 호출한 메서드의 객체로 바인딩 되었음을 알 수 있다.
생성자 함수의 this
생성자 함수의 this는 생성자 함수를 통해 생성되어 반환되는 객체에 바인딩 된다
student.name을 호출하면 this는 student 객체에 바인딩이 된다. 즉 생성자 함수의 this는 생성되어 반환되는 객체에 바인딩 됨을 알 수 있다.
new로 새로운 객체를 만들면 생성자 함수, 없으면 일반함수인데 일반함수의 경우 this는 전역에 바인딩 됨을 잊지말자 !
또한 , 일반함수 내의 함수의 this, 생성자 함수 내의 함수의 this의 경우 this는 윈도우에 바인딩 되므로 주의하자
화살표 함수의 this
화살표 함수의 경우 전역컨텍스트에서 실행되더라도 this를 새로이 정의하는 것이 아니라, 바로 바깥함수나 클래스의 this를 사용한다. 일반함수에서 this가 전역을 가르켜 나타나는 오류를 잡을 수 있는 ES6 문법이라 할수 있겠다
