5월 취업대비 - this가 동작하는 원리와 용법 (w.Javascript)

자바스크립트의 this는 타 언어와 개념이 다르다.

this에 바인딩되는 객체가 한 가지가 아니라 해당 함수 호출 방식에 따라 this에 바인딩할 객체가 동적으로 결정된다.

 

함수의 호출 방식은 아래와 같다.

1. 일반 함수 호출
2. 메소드 호출
3. 생성자 함수 호출 ( new 키워드를 사용한 함수 ) 
4. apply/call/bind  호출 ( 명백한 바인딩 ) 

 

1. 일반 함수 호출

이때의 this값은 Global Object로, 브라우저 상 window객체를 의미한다.

 

2. 메소드 호출

해당 메소드를 호출한 객체에 바인딩된다.

 

3. 생성자 함수 호출 ( 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다. )

new 연산자와 함께 생성자 함수를 호출하면 

빈 객체 생성 및 this 바인딩 -> this를 통한 프로퍼티 생성 -> 생성된 객체 반환 순으로 동작한다.

 

4. 명백한 마인딩 

this의 역할을 직접 명확하게 지정해준다. 

 function.prototype.call, function.prototype.bind, function.prototype.apply 와 같은 메소드를 사용한다.

 

 

 

 

 

 

 

reference.

[JS/this]자바스크립트, this의 4가지 역할.Code playground.(2019.05).23.05검색.https://im-developer.tistory.com/96#recentEntries

함수의 호출 방식에 의해 결정되는 this.모던 자바스크립트 Deep Dive.https://poiemaweb.com/js-this