this

This 키워드

동작은 나타내는 메서드는 자신이 속한 객체의 상태, 프로퍼티를 참조하고 변경이 가능해야 한다.

그러기 위해서는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.

 

객체 리터럴의 메서드 내부에 존재하는 this는 메서드를 호출한 객체를 가리킨다.

const circle = {

  radius: 5,

  getDiameter() {

    // this는 메서드를 호출한 객체를 가리킴

    return 2 * this.radius;

  },

};

this는 함수가 호출되는 방식에 따라 this에 바인딩이 동적으로 결정된다.

 

1. 일반 함수 호출

함수 내부의 this에는 전역 객체가 바인딩, 콜백 함수가 일반 함수로 호출되면 함수 내부의 this에도 전역 객체가 바인딩

function fooo() {

  console.log(this); // window

}

fooo();

 

2. 메서드 호출

메서드 내부의 this에는 메서드를 호출한 객체, 즉 메서드를 호출할 때 메서드 이름 앞의 마침표 연산자 앞에 기술한 객체가 바인딩

const student = {

  // 메서드 내부의 this는 메서드를 호출한 객체에 바인딩된다.

  name: "Jae Young",

  getName() {

    return this.name; // student.name과 동일!

  },

};

3. 생성자 함수 호출

생성자 함수 내부의 this에는 생성자 함수가 미래에 생성할 인스턴스가 바인딩

※ new 연산자와 함께 호출하지 않으면 생성자 함수로 동작하지 않고, 일반 함수 호출로 동작(this가 전역객체 바인딩)

function Circle(r) {

  // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스

  this.r = r;

  this.getDiameter = function () {

    return 2 * this.r;

  };

}

const circle1 = new Circle(5);

console.log(circle1.getDiameter());

 

결론

함수 호출 방식	this 바인딩
일반 함수 호출	전역 객체(window)
메서드 호출	메서드를 호출한 객체
생성자 함수 호출	생성자 함수가 미래에 생성할 인스턴스

 

 

⭐

이해하고 쓴 적이 없었는데, 드디어 이해했지만 사용할 때마다 헷갈릴듯... 자주 사용해서 익숙해져야겠다.

 

 

+++

화살표 함수 호출에서의 this 사용

🚫🚫🚫절대 사용하면 안됩니다.

const myObject = {

  name: "John",

  메서드호출: function() {

    console.log("Hello, " + this.name);

  },

  메서드화살표함수: () => {

    console.log("Hello, " + this.name); // 이 this는 외부 스코프를 바인딩

  }

};

myObject.sayHello(); // 출력: "Hello, John"

myObject.sayHelloArrow(); // 출력: "Hello, undefined"

화살표 함수는 외부 컨텍스트에서 this를 상속받기 때문에 메서드 함수로 예시를 들면 해당 객체를 가리키지 않고 외부 스코프의 this를 사용하기 때문!