[JavaScript/자바스크립트] this 이해하기

console.log(this);
//출력
//Window {0: Window …}

this란

자바스크립트에서 this 는 자신이 속한 객체를 나타내는 자기 참조 변수이다.
함수 내부에서 this를 사용하게 되면, 호출한 함수에 따라서 그 값이 상대적으로 변하게 된다. 

이때 this값에 특정한 객체의 값을 지니게 되는 것을 바인딩(binding)이라 한다. 

 

전역 객체 window

빈 콘솔창에 this를 출력해보면

console.log(this); //Window {0: Window, ... }

다음과 같이 Window 객체가 출력된다.
이는 브라우저의 최상위 객체가 Window이고, 아무 것도 없는 상태에서 this 를 출력하였기 때문이다.

this 익히기

일반 함수에서 호출

function getName() {
  console.log(this);
  
  function getAge() {
    console.log(this);
  }
  getAge(); //Window 객체
}

getName(); //Window 객체

일반 함수에서의 경우 전역 객체를 바인딩한다. 
또, 함수 내부에서 선언된 또 다른 함수가 호출되어도 this는 전역 객체를 바인딩한다. 

메소드에서 호출

function getName() {
  console.log(this);
  return this.name;
}

const user1 = {
  name: 'P1su',
  age: 25,
  getName: getName,
};

const user2 = {
  name: 'Si1',
  age: 24,
  getName: getName,
}

console.log(user1.getName());
//{ name: 'P1su', age: 25, getName: [Function: getName] }
//P1su

console.log(user2.getName());
//{ name: 'Si1', age: 24, getName: [Function: getName] }
//Si1

 

다음과 같은 경우는 메소드를 호출한 객체에 바인딩된다. 

생성자 함수에서 호출

function User(name) {
  this.name = name;
}

const user1 = new User('P1su');
const user2 = new User('Soo');

console.log(user1); // User { name: 'P1su' }
console.log(user2); // User { name: 'Soo' }

생성자 함수를 통하여 새로운 객체를 생성할 때,  생성자 함수 내부에 있는 this 는 새롭게 생성되는 객체를 바인딩한다.

apply, call, bind를 통한 호출

모두 첫번째 인자로 전달하는 객체를 바인딩한다. 

call의 경우 두번째 인자를 각각의 변수로 넘겨준다.

function user(age, color){
  console.log(this.name, age, color); //P1su 25 navy
}

const userInfo ={
  name:'P1su',
};

user.call(userInfo, 25, 'navy');

 

apply는 두번째 인자를 배열로 넘겨준다.

function user(age, color){
  console.log(this.name, age, color); //P1su 25 navy
}

const userInfo ={
  name:'P1su',
};

user.apply(userInfo, [25, 'navy']);

 

bind는 새로운 함수를 반환하고 이를 바탕으로 함수를 실행시켜야 한다. 

function user(age, color){
  console.log(this.name, age, color);
}

const userInfo ={
  name:'P1su',
};

const newUser = user.bind(userInfo);
newUser(25, 'navy'); //P1su 25 navy

화살표 함수에서의 this

화살표 함수는 Lexical this를 바인딩하며, 화살표 함수가 선언되기 이전에 유효한 this 값을 바인딩한다. 

const getName = () => {
  console.log(this);
  return this.name;
}

const user1 = {
  name: 'P1su',
  age: 25,
  getName: getName,
};

console.log(user1.getName()); // {} undefined

화살표 함수로 선언한 getName 에서 이전 this값이 유효하지 않기 때문에, 빈 객체와 undefined가 반환된다.

 

참고)

https://velog.io/@chojs28/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-this%EC%97%90-%EB%8C%80%ED%95%B4#%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%97%90%EC%84%9C%EC%9D%98-this

https://enjoydev.life/blog/javascript/5-this#%EA%B8%80%EC%9D%84-%EB%A7%88%EC%B9%98%EB%A9%B0