[Javascript] this 란?

👉 this 란?

메서드에게, 자신이 관리해야하는 객체를 알려주는 것

// foo1() 메서드는 cat 객체를 관리해야 하므로, 이때 this로 cat을 전달한다.
const cat = {
  name: 'meow',
  foo1: function(){
    console.log(this.name);
  }
};

 

this가 필요한 이유

메서드는, 객체 내부의 멤버변수(property)들을 다루기 위해 존재한다. ( 객체 지향 프로그래밍 이므로 )

그러려면, 자신이 속한 객체에 대한 정보(this)를 알고있어야 한다.

 

this없이, 자신이 속한 객체 정보 전달하기

// this를 사용하지 않고, 자신이 속한 객체를 직접 적어준 경우
let cat = {
  name: 'meow',
  foo1: function(){
    console.log(cat.name);
  },
}

// cat 객체 복사
let cat2 = cat

// 기존 cat 객체 삭제
cat = null

// cat2 객체의 foo1() 메서드 실행
cat2.foo1()

 cat2의 메서드는, cat2 객체의 요소들을 다루기 위해 만들어져야 한다.
  
 하지만 cat2.foo1() 메서드는
cat.foo1() 메서드를 복사한 것이므로,
 cat2가 아닌, cat에 접근하고 있다.

이는 객체 지향 프로그래밍의 메소드의 역할에 위배되므로,
객체를 복사하더라도, 메서드가 관리할 객체를 정확히 알려줄 변수가 필요해졌다.

그 변수를 만들고, this라고 이름 붙였다. 

 

👉 JS에서의 this

[ Javascript에서 this는, 다른 언어의 this와 다르다. ]

1. javascript 런타임(실행)시, 메서드가 위치한 곳에서 결정
  ( 메서드가 정의 된 곳과는 상관없다 )

2. 함수를 감싸는 객체가 보이지 않으면, 전역객체를 참조
  - 브라우저 런타임 : window 객체
  - Node.js 런타임 : global 객체
  ( 최근 전역객체의 이름이 globalThis로 병합되어 가고 있다. )

// 함수정의시, this를 정하지 않음
function getUser(){
  return {
    name: "John",
    ref: alert(this.name)
  }
}


// 함수호출됨 => javascript 런타임 => this가 결정됨
// getUser()는 함수로 호출됐으므로, this는 전역객체로 전해진다. ( window )
let user = getUser()


console.log(user.ref())
// window.name은 존재하지 않으므로, undefined 출력

 

👉 this와 화살표 함수

[ 화살표함수는 고유한 this가 없음 ]

화살표함수 속에서 this를 참조하면, 평범한 외부 함수에서 this를 빌려온다.

let user = {
  firstName: "보라",
  sayHi() {
    // arrow() 함수 밖의 sayHi의 this를 빌려온다
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi()
// 보라 출력

 

👉 바인딩이란?

기존의 this를 무시하고, 사용자가 원하는 객체로 this를 설정하는 것

const cat = {
  name: 'meow',
  foo1: function(){
    // this : cat
    console.log(this.name);
  }
};

const dog = {
  name: 'wak',
  foo1: function(){
    // this : cat
    console.log(this.name);
  }
};

// cat객체의 foo1()메서드가 관리해야할 객체를 dog로 바꿔서 실행한다.
cat.foo1.bind(dog)

/*
  cat객체의 foo1()메서드 실행결과 : wak
*/

 

바인딩이 필요한 이유

setTimeout에 데서드를 전달할 때처럼,
객체 메서드를 콜백으로 전달할때,
this가 사라지는 문제가 발생