[JS] this란 무엇일까

1. 단독으로 this를 호출하였을때

let x = this;
console.log(x); // Window

전역 실행 문맥(global execution context) 에서는 묻지도 따지지도 않고 전역 객체를 반환한다.

즉, Window 객체를 반환한다.

2. 함수에서 this를 호출하였을때

함수 안에서 this는 함수의 주인에게 바인딩된다.

함수의 주인은?  window객체이다!

function myFunction() {
  return this;
}
console.log(myFunction()); //Window

var num = 0;
function addNum() {
  this.num = 100;
  num++;
  
  console.log(num); // 101
  console.log(window.num); // 101
  console.log(num === window.num); // true
}
 
addNum();

위 코드에서 this.num의 this는 window 객체를 가리킨다.

따라서 num은 전역 변수를 가리키게 된다.

 

 

다만, strict mode(엄격 모드)에서는 조금 다르다.

함수 내의 this에 디폴트 바인딩이 없기 때문에 undefined가 된다.

"use strict";
 
function myFunction() {
  return this;
}
console.log(myFunction()); //undefined

"use strict";
 
var num = 0;
function addNum() {
  this.num = 100; //ERROR! Cannot set property 'num' of undefined
  num++;
}
 
addNum();

따라서 this.num을 호출하면 undefined.num을 호출하는 것과 마찬가지기 때문에 에러가 난다.

3. 메서드 안에서 this를 호출하였을때

그럼 일반 함수가 아닌 메서드라면 어떨까?

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

var person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  },
};
 
person.fullName(); //"John Doe"

var num = 0;
 
function showNum() {
  console.log(this.num);
}
 
showNum(); //0
 
var obj = {
  num: 200,
  func: showNum,
};
 
obj.func(); //200

4. 이벤트 핸들러에서 this를 호출하였을때

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

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

5. 생성자에서 this를 호출할때

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

new는 생성자 함수이다. 생성자 함수는 객체를 생성하기 때문에 같은 결과가 나온다.

하지만 new 키워드를 빼먹는 순간 일반 함수 호출과 같아지기 때문에, 이 경우는 this가 window에 바인딩된다.

 

 

nykim.work/71