[javscript] 일반함수와 화살표 함수의 this

const object = {
  name : "developer",
  main: function () {
  	console.log(this)
  },
  mainArrow : () => {
  	console.log(this)
  }
};

object.main();
object.mainArror();

📌일반 함수.this

: 객체의 메서드 함수로써 더 적합니다.

• 일반 함수는 자신이 호출되는 방식에 따라 this 값을 동적으로 바인딩합니다.

• this는 함수가 호출될 때 호출 컨텍스트에 따라 결정됩니다. 호출 컨텍스트는 함수가 어떻게 호출되었는지에 따라 달라집니다.

• 일반 함수의 this는 함수가 호출된 위치에서의 객체를 가리킬 수 있습니다.

• 일반 함수는 call(), apply(), bind() 메서드를 사용하여 명시적으로 this 값을 변경할 수 있습니다.

📌화살표 함수.this

: 함수가 선언된 위치에서 결정되며 선언된 위치에 따라 바뀌지 않습니다.
선언된 함수를 둘러싸는 scrope의 this를 그대로 가져와서 사용합니다.

• 화살표 함수는 자체적인 this를 가지지 않고, 외부 스코프의 this 값을 상속합니다.

• 화살표 함수는 함수가 정의된 위치에서의 상위 스코프의 this 값을 참조합니다.

• 화살표 함수는 call(), apply(), bind() 메서드를 사용하여 this 값을 변경할 수 없습니다.

주요 차이점❓

• 일반 함수는 호출 컨텍스트에 따라 this 값을 동적으로 바인딩하지만, 화살표 함수는 상위 스코프의 this 값을 상속합니다.

• 일반 함수는 this 값을 변경하기 위해 call(), apply(), bind() 메서드를 사용할 수 있지만, 화살표 함수는 이를 지원하지 않습니다.

• 화살표 함수는 자신만의 this 값을 가지지 않기 때문에, 객체의 메서드로 사용할 때 주의해야 합니다. 객체의 메서드로 사용될 경우 화살표 함수는 상위 스코프의 this 값을 참조하므로, 해당 객체를 가리키지 않을 수 있습니다.

const obj = {
  name: 'John',
  sayHello: function () {
    console.log(`Hello, ${this.name}!`);
  },
  sayHelloArrow: () => {
    console.log(`Hello, ${this.name}!`);
  },
};

obj.sayHello(); // "Hello, John!" (this는 obj를 가리킴)
obj.sayHelloArrow(); // "Hello, undefined!" (this는 상위 스코프인 전역 객체인 "window" 객체를 가리킴)