[JavaScript] this에 대해 이해하기
안녕하세요. 이제 막 기획자로 시작한 아기 기획자 소소한G 입니다.
비전공자 출신으로 IT 웹 기획자로서 살아남기위해 일주일에 두번 프로트엔드 개발 수업을 듣고 있어요.
온전히 비전공자의 시선으로 꼼꼼하게, 원초적으로 설명드리려고 합니다.
저처럼 초보자 웰컴이에용.
오늘은
Javascript에서의 this에 대해 이야기해볼게요.
This
this는 대부분 프로그래밍 언어에서는 자기 자신을 뜻한다.
하지만, 자바스크립트에서는 자기 자신을 나타내는 것이 아닐 때도 있다.
Javascript에서의 this.
Javascript에서 함수의 역할은 두 가지가 있다.
1. 실행시킬 수 있는 함수 (다른 언어에서는 이것만 해당한다.)
2. 객체를 만들어 내는 틀
>> 이 두가지의 경우에 따라 this가 가리키는 것이 다르다.
즉, 프로그래밍 언어에서는 this가 자기 자신일 경우가 많지만 Javascript에서는 this가 자기 자신이 아닐 수도 있다.
1. 함수 실행
기본적으로 자바스크립트의 기본 this(자기자신)는 window이다. 즉, this는 따로 설정되어 있지 않으면 window이다.
기본적으로 window이고 new나 bind 같은 상황에서 this가 바뀐다.
아래와 같이 function me (_a)는 window의 a에 _a라는 property가 추가된다.
widnow는 창, 브라우저 자기 자신을 뜻하는데 this는 설정하지 않는 이상 기본적으로 브라우저 그 자체이다.
그렇기 때문에 브라우저 console 창에 this를 작성하면 window가 나온다.
즉, this를 객체 메서드에서 사용하지 않는 경우 this는 전역 객체가 된다.
2. 객체 생성
객체를 생성하면 독자적인 this를 가질 수 있게 된다. 즉, this는 새로운 객체가 된다.
하지만 this는 기본적으로 전역 객체(브라우저에서는 window와 같다)이므로 객체 메서드 내부에서 호출하지 않아도 사용할 수 있다.
"this에서 가장 중요한 것은 무엇일까? "
[ 함수를 실행할 때 this의 값을 window가 아닌 다른 값을 지정하고 싶을 때 ]
(Javacsript에서 this를 커스터마이징 하는 방법)
this를 커스터마이징 한다는 것이 과연 어떤 뜻일까? 이는 this를 내가 원하는 객체 및 { } (오브젝트)로 변경하겠다!라는 뜻이다.
1. this.bind
2. this.call, this.apply (동일한 동작을 하지만 함수의 parameter 등이 조금 다른 것이다.)
1. bind
: this를 첫 번째 인자 값으로 바꾼 함수를 반환한다.
.bind(첫 번째 인자) = 첫번째 인자가, me 함수 안의 this로 된다.
아래의 코드를 가지고 함수를 실행했을 경우와 bind를 사용했을 경우를 살펴보자.
1. 함수를 실행했을 경우 : this는 window이고 window에 a가 추가되어 나온다.
2. bind를 사용했을 경우 (window가 아닌 me만 나왔으면 좋겠다!할 경우)
변수(bindMe)를 만든 후 .bind 첫 번째 인자
- me.bind : 함수 내부의 this를 바꾸겠다.
- me.bind( { } ) : this를 { }로 바꾸겠다.
즉, me는 함수 그 자체이고 me(1)은 함수의 실행 결과 값이다.
아래와 같이 정리할 수 있다.
bind의 사용방법은 일반적으로 변수에 함수를 담아서 그 함수를 실행시킨다.
