[JS] this

2021. 6. 24. 11:47프론트엔드/JAVASCRIPT

728x90

 

 

 

this 

this는 함수의  실행컨텍스트를 가리키는 예약어인데, 다시 말해 '함수가 실행되는 환경(함수가 실행될 때의 컨텍스트)'라고 할 수 있음.

 

 


console.log(this); //window

- this의 가장 기본적인 컨텍스트는 글로벌(전역) 컨텍스트이기 때문에 여기서 출력된 window는 자바스크립트의 최상위 객체를 가리킴

 

 

 


var obj = {
	num:10,
    printNum: function(){
    	console.log(this.num); 
    }
}
obj.printNum(); //10

- 객체 속성 함수 안에서의 this는 기본적으로  해당 객체를 가리킴

 


function showComment(){
	consloe.log(this);
}
shoeComment(); //window

- 위 함수를 실행시키면, window객체를 가리키는데, 일반 함수의 this는 전역 컨텍스트이기 때문

 

 


function Developer(){
	console.log(this);
}
var dev = new Developer(); //Developer {}

 

- new로 인스턴스를 생성하는 순간 함수가 실행되기 때문에 생성자 함수에서의 this는 위와 같이 실행됨. 생성자 함수의 this는 함수의 내부를 가리킴.

 


function fetchData(){
	axios.get('domain.com/products').then(function(){
    	console.log(this);
    });
}
fetchData(); //window

- 기본적으로 HTTP요청과 같은 비동기 처리 코드는 전역 컨텍스트를 가지게 됨. 비동기 처리 코드의 콜백 함수는 전역 컨텍스트를 가리킨다고 볼 수 있음.

728x90

'프론트엔드 > JAVASCRIPT' 카테고리의 다른 글

[JS] 객체  (0) 2021.07.11
[JS] 자바스크립트 객체 KEY 동적 할당  (0) 2021.07.11
[JS] EVENT  (0) 2021.06.14
[JS] 자바스크립트의 Data Type  (0) 2021.06.13
[JS] BOM(Browser Object Model)  (0) 2021.06.13