[자바스크립트] 자바스크립트에서의 this

this란?

---

• '이것'이란 뜻입니다.
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 property나 method를 참조할 수 있습니다.
• 선언이 아닌 호출 방식에 따라 동적으로 달라집니다.

 

각 상황별로 this의 쓰임

---

1. 전역에 선언한 this의 경우

• this를 호출하는 경우엔 전역 변수(Global variable)를 가리킵니다.
• 브라우저라는 자바스크립트 런타임의 경우에 this는 항상 window라는 전역 변수를 참조합니다. 

 

function thisFn () {
	return this;
}

thisFn(); //window 객체 출력

 

알고 가자!

전역 변수(Global Variable)와 지역 변수(Local Variable)
 - 변수는 유효 범위에 따라 전역 변수(Global Variable)와 지역 변수(Local Variable)로 구분할 수 있습니다.
- 전역 변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수입니다.
- 지역 변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수입니다. 함수 외부에서는 접근할 수 없습니다.

 

 

 

2. 함수 내부에서 쓴 this의 경우

• 함수 안에서 this는 함수의 주인에게 바인딩됩니다.

 

var num = 0;
function addNum() {
  this.num = 100; //this.num의 this는 window 객체를 가리킵니다. num은 전역 변수를 가리키게 됩니다.
  num++;
  
  console.log(num); // 101
  console.log(window.num); // 101
  console.log(num === window.num); // true
}
 
addNum();

 

 

알고 가자!

바인딩이란?
- 식별자와 값을 연결하는 과정을 말합니다. 

 

3. 메서드 안에서 쓴 this의 경우

• 메서드 호출 시 메서드 내부 코드에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩됩니다.

 

const thisFn = {
	title: 'Hello World!',
    thisTitle() {
    	console,log(this.title);
    }
};

thisfFn.thisTitle(); // 'Hello World!'

 

 

4. 이벤트 핸들러 안에서 쓴 this의 경우

• 이벤트 핸들러에서 this는 이벤트를 받는 HTML 요소를 가리킵니다.

 

var btn = document.querySelector('#btn')
btn.addEventListener('click', function () {
  console.log(this); //#btn
});

 

5. 생성자 안에서 쓴 this의 경우

• 생성자 함수가 생성하는 객체로 this가 바인딩됩니다.

 

function Person(name) {
  this.name = name;
}
 
var Sam = new Person('Sam');
var White = new Person('White');
 
console.log(Sam.name); //Sam
console.log(White.name); //White

 

BUT!

 new  키워드가 빠지면 일반 함수 호출과 같아지기 때문에, this가 window에 바인딩됩니다.

var name = 'window';
function Person(name) {
  this.name = name;
}
 
var Sam = Person('Sam');
 
console.log(window.name); //Sam

 

 

Reference

this - JavaScript | MDN