[Javascript] this

this

this는 자신이 속한 객체나 인스턴스를 가르키는 자기 참조 변수이다.
자신이 속한 객체 또는 생성할 인스턴스의 프로퍼티나 메소드를 참조할수 있다.

🤔 어떻게 써먹나요?

this가 가리키는 값, this 바인딩은 함수 호출 방식에 의해 동적으로 결정되기 때문에 특정한 함수 호출 방식에서 자주 사용된다.

🙌 원리

this이름과 같이 한마디로 그것이다. 목적어가 있어야 한다는 소리. 객체 리터럴을 예를 들면,
아래의 예제는 circle 객체의 안에 속해 있기 때문에 목적어가 정의 되어있다. 이처럼 다양한 호출 방식에 따라 가리키는 대상이 다르다.

// 객체 리터럴
const circle = {
  radius: 5,
  getCircle(){
    // 호출한 객체를 가르킴
    return redius 2 * this.radius;
  }
}

// 생성자 함수
function Circle(radius){
  // 생성한 인스턴스를 가르킴
  this.radius = radius;
}

Circle.porototype.getCircle = function(){
  // 생성한 인스턴스를 가르킴
  return 2 * this.radius;
}

// 인스턴스 생성
const circle = new Circle(5);
console.log(circle.getCircle());

👀 다양한 호출 방식

this는 다양한 호출 방식이 많은데, 시간은 한정적이니 중요한 포인트만 짚어보자. (극히 주관적)

• 일반 함수 호출
• 메서드 호출
• 생성자 함수 호출
• Function.prototype.apple/call/bind 메서드에 의한 간접 호출

❗ 조심

이렇게 4가지 정도가 있는데 일반함수는 전역 객체에 바인딩되기 때문에 필요가 없다. 하지만 사람은 부정문을 잘 기억하기 때문에 일반함수와 this만 기억할 수도 있으니 조심해보쟈.!😉

하지만 화살표 함수에서의 this는 상위 스코프를 가르키기 때문에 일반함수에서 this 쓸거면 화살표 함수로 사용할 것!! (❗중요)

메서드 호출

메서드를 호출할 때 메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩된다. 즉, 다른 객체의 프로퍼티에 할당하면 다른 객체의 메서드가 될 수도 있고, 일반 함수로 호출될 수도 있기 때문에 조심히 사용한다..😓

// 메서드 호출
const person = {
  name: 'Lee',
  getName(){
    // 메서드를 호출한 객체에 바인딩
    return this.name;
  }
}

🙋‍♀️ 정리해보면,,

this를 사용할 때는 필요한 상황에서 확실히 구분하여 사용하자!!

호출 방식	this 바인딩
일반 함수	전역 객체
화살표 함수	상위 스코프
메서드 호출	메서드를 호출한 객체
생성자 함수	생성자 함수가 생성할 인스턴스
Function.prototype.apple/call/bind 메서드에 의한 간접 호출	Function.prototype블라블라 메서드에 첫번째 인수로 전달한 객체