[JS | 개념정리 ] this!!!🤦‍♀️

👉Javascript에서의 this

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조변수(self-reference variable)

즉 객체지향 언어에서 자기자신을 가리키는 변수이다.

🤔 this는 왜 사용하는걸까?

메서드는 자신이 속한 객체 내의 프로퍼티를 참조하고 변경할 수 있어야 함
➡️ 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 함

// object
const circle = {
  	// property
	radius: 5;
  	// method
    getDiameter(){
        // 자신이 속한 객체 circle를 참조해 radius를 사용
    	return circle.radius*2; 
        }
}

그러나 이렇게 자기 자신을 재귀적으로 참조하는 방식은 바람직하지 않다
생성자 함수 방식으로 인스턴스를 생성하는 경우

function Circle(r){
  ????.radius = r; 
}

Circle.prototype.getDiameter = () => {
  return ????.radius * 2;
};

const circle = new Circle(3); // 누구세요?

???? 의 시점에선 생성자 함수가 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다
➡️ 생성자 함수로 인스턴스를 생성하려면 생성자 함수(= new 클래스())가 있어야 함

생성자 함수를 정의하는 시점에선 아직 인스턴스를 생산하지 않음
➡️ 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다.

따라서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자 this가 필요!

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)이다

참고로 this는 암묵적으로 생성, 암묵적으로 함수 내부에 전달된다. 따라서 함수 내부에서 지역변수처럼 사용할 수 있다.
(단 this가 가리키는 값은 함수 호출 방식에 의해 동적으로 결정됨 - this binding)

위의 코드를 this를 사용해 수정하면 아래와 같다

const circle = {
  radius: 5;
  
  getDiameter(){
    // this: circle
  	return this.radius * 2; 
  }
console.log(circle.getDiameter()); // 10

function Circle(r){
    // 이때 this는 생성자 함수가 생성할 인스턴스
 	this.radius = r; 
}

Circle.prototype.getDiameter = () => {
  // 이때 this는 생성자 함수가 생성할 인스턴스
  return this.radius * 2;
};

const circle = new Circle(3); 
console.log(circle.getDiameter()); // 6

😎 this 예시

console.log(this); // window 1. 전역에서 this는 window

function example(num){
  console.log(this); // window 2. 일반 함수 내부에서 this는 window
}

const person = {
  name: 'jaman',
  getName(){
    console.log(this); //  3. 메서드 내부에서 this는 메서드를 호출한 객체 {name:"jaman", getName: function}
    return this.name; // jaman 
  }
};

function Person2(name){
  this.name = name;
  console.log(this); // 4. 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스 Person2 {name: "zaman"} 
}
const me = new Person2("zaman");

자바스크립트의 this 함수는 호출되는 방식에 따라 this에 바인딩 될 값을 가리킨다.

즉 binding이 동적으로 결정된다!
(단, strict모드에 따라서 바뀌기도함)

🖇 this 바인딩

자바스크립트의 함수는 객체 중 일급객체로 아래와 같은 일을 수행할 수 있다.
1. 변수나 데이터를 저장
2. 함수의 인수로 전달
3. 함수의 반환값을 사용

따라서 호출하는 방법도 다양한데
1. 단독 호출 func()
2. 특정 객체의 메소드로 호출 객체1.func()
3. 동일한 함수가 다른 객체에 의해 호출 객체2.func()

같은 함수라도 어떤 객체에 의해 호출되는지에 따라 this가 가리키는 것이 달라진다(function - this -> some object)
함수를 호출하면 실행 컨텍스트가 생성되고 이때 this도 함께 결정되기 때문이다.

this와 this가 가리킬 객체를 연결하는 것 → this binding
바인딩은 함수가 호출될 때마다 this가 동적으로 결정

그럼 이제 this가 함수 호출에 따라 어떻게 연결되는지 알아보자

this 바인딩 규칙

1. 일반 함수 호출 → 기본 바인딩
2. 메서드 호출 → 암시적 바인딩
3. 생성자 함수 호출 → new 바인딩
4. Function.prototype.apply | call | bind 메서드에 의한 간접 호출 → 명시적 바인딩

1.기본 바인딩(일반 함수 호출)

: this의 기본 규칙으로 나머지에 해당되지 않으면 이거

일반 함수 호출시 this에 전역 객체가 바인딩

• browser: window
• node: global

'use strict' mode에선 undefined에 바인딩
➡️ this는 객체의 프로퍼티나 메소드를 참조하기 위한 자기 참조 변수 따라서 객체를 생성하지 않는 일반 함수에선 의미가 없기 때문

function ex(){
  console.log("ex's this?", this); // window
  function innerEx(){
	console.log("innerEX's this?", this); // window
	}
  innerEx(); // 일반 함수 호출
}
ex(); // 일반 함수 호출

cf) 중첩 함수 & 콜백 함수의 경우
: 중첩 함수와 콜백 함수로 일부 로직을 대신하는 경우, this로 전역객체가 바인딩 되어 서로간 this가 일치하지 않는 문제가 발생할 수 있음

➡️ 중첩이나 콜백에서 자신이 속한 객체의 메서드에 접근하려고 했는데 일반함수로 선언되어 this가 전역객체가 된다면 원하는 메서드에 수월하게 접근하기 어려움

// 중첩함수
const obj = {
  foo() {
    function boo() {
      console.log(this); // 일반 함수 선언 따라서 전역객체가 바인딩 window
    }
    boo();
  },
};

obj.foo();

// setTimeout callback
const obj = {
  foo() {
    setTimeout(function () {
      console.log(this); // 일반 함수 선언 따라서 전역객체가 바인딩 window
    }, 0);
  },
};

obj.foo();

그럼 this를 통일하려면 어떻게 해야할까?

// 간단하지만 권장하지 않는다고 한다
// this로 사용하고자 하는 객체를 변수에 할당하여 사용
const example = {
  title: "what is this?",
  getTitle(){
    const self = this; // self를 만들어 콜백함수에서 사용할 수 있도록 -> example
    setTimeout(function(){
      console.log(self.title); // example.title
    }, 0);
  },
};

example.getTitle(); // what is this?

2. 암시적 바인딩(메서드 호출)

: 함수를 객체의 메소드로 호출하는 경우 this는 메서드를 호출한 객체 . 앞의 객체(여기서는 inner!)

const outer = {
  inner:{
    printThis(){
      console.log(this); // inner
    },
  },
};

outer.inner.printThis();

3. new 바인딩(생성자 함수 호출)

: new 바인딩 생성자 함수 호출 생성자 함수는 이름 그대로 객체, 인스턴스를 생성하는 함수로 생성한 인스턴스가 바인딩

function People(name){
  this.name = name;   // this는 me!
}

const me = new Someone('zaman');

4. 명시적 바인딩(Function.prototype.apply | call | bind 메서드에 의한 간접 호출)

: apply, call, bind에 의한 간접 호출
세 메소드 모두 Function.prototype의 메소드로 모든 함수가 상속받아 사용 가능

Function.prototype.apply( thisArg: this로 사용할 객체, argsArray: 함수에게 전달할 인수 리스트의 배열 / 유사 배열 객체)
Function.prototype.call( thisArg: this로 사용할 객체, arg1, arg2, ...: 전달할 인수리스트를 하나하나 전달)
Function.prototype.bind( thisArg: this로 사용할 객체, arg1, arg2, ...: 인수)

apply, call은 함수를 호출하지만 bind는 함수를 호출하지 않기 때문에 호출해주는 작업이 필요하다

🤜 🤛 규칙이 중첩되는 경우

규칙이 중첩되는 경우를 위한 우선순위도 간단히 알아보자
기본 함수로 호출하면 기본 + 명시적 바인딩
생성자 함수로 호출하면 new + 명시적 바인딩

명시적 바인딩(Function.prototype.apply | call | bind 메서드에 의한 간접 호출) vs 암시적 바인딩(메서드 호출)

const example = {
  title: "what is this?",
  getTitle(){
   console.log(this.name)
  },
};
// this를 example로 암시적 바인딩해줌 (this.title === "what is this?")

example.getTitle.bind({title:'bind!!!'})(); 
// bind method를 사용해 this를 {title:'bind!!!'} 객체에 바인딩해줌  (this.title === "bind!!!")

➡️ 명시적 바인딩이 암시적 바인딩보다 우선 순위가 높음

명시적 바인딩(Function.prototype.apply | call | bind 메서드에 의한 간접 호출) vs new 바인딩(생성자 함수 호출 )

function setTitle(title){
  this.name = name;
}
let example = {
  title: 'what is this',
};

const setTitleBindExample = setTitle.bind(example); // 명시적 바인딩 (this.title = 'what is this')
// setTitle함수에 example을 명시적으로 바인딩

example = new TitleBindExample('this is this'); // new 바인딩(this.title = 'this is this')

console.log(example.title); // this is this

➡️ new 바인딩이 명시적 바인딩보다 우선 순위가 높음

우선 순위
new > 명시적 > 암시적 > 기본

🏹 화살표 함수의 this

화살표 함수는 ES6에서 도입된 문법으로 일반적인 함수와 바인딩에서 차이를 보인다.

앞서 말했듯 this는 실행 컨텍스트가 생성될 때 함께 결정되는데 화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩을 하지 않는다

즉, 화살표 함수 내부에 this는 존재하지 않음
➡️ 따라서 this 호출 시 상위 스코프의 this에 접근 (Lexical this)

또한 화살표 함수 내부에 this 바인딩이 존재하지 않기 때문에 명시적 바인딩(apply/call/bind)을 해주더라도 화살표 함수 내에서 사용하는 this는 교체되지 않는다

const arrow = {
  name: 'this in arrow function',
  printName: () => {
    console.log(this.name);
  },
};

arrow.printName(); // 브라우저에선 빈 문자열(window 객체의 name이 빈문자열로 설정되어 있기 때문), 노드에선 undefined가 출력됨

전역객체를 가리키고 있는 것을 확인할 수 있다.

➕ 가장 가까운 상위 스코프의 객체가 전역객체인 경우 ES6 추상 메소드로 사용하는 것이 좋음

const arrow = {
  name: 'this in arrow function',
  printName(){
    console.log(this.name);
  },
};

arrow.printName();

클래스에서의 this

class에선 기본적으로 strict mode가 적용!

위에서 엄격 모드에선 undefined가 바인딩 된다고 했으니까
일반적으로 내부에서 this 호출시 클래스로 생성한 인스턴스 객체로 바인딩
→ 메서드 내 중첩함수나 콜백 함수 등을 일반 함수로 선언, 호출 시 this로 undefined

---

요약

this는 왜 필요한가?

: 생성자 함수를 정의하는 시점에선 아직 인스턴스를 생성하지 않았음 따라서 생성자 함수가 생성할 인스턴스를 가리키는 식별자가 필요 ➡️ this (self-referencing variable)

this binding?

함수가 어떻게 호출되었는지에 따라 동적으로 바인딩 될 값이 결정

바인딩 종류 및 우선 순위

1. 생성자 함수 호출(new 바인딩) - 인스턴스 객체로 바인딩
2. apply, call, bind 간접호출(명시적 바인딩) - 첫번째 인자 객체로 바인딩
3. 메서드 호출(암시적 바인딩) - 호출 객체로 바인딩
4. 일반 함수 호출(기본 바인딩) - 전역 객체 or undefined로 바인딩

화살표 함수

• this를 바인딩하지 않음
• 상위 스코프의 this에 접근

class

• 내부 -> 엄격모드
• 일반적으로 this는 인스턴스 객체
• 일반 함수 선언, 호출 시 this는 undefined

---

참조
javascript deep dive
https://www.youtube.com/watch?v=DTX52Pv7PZM