this,매번 헷갈리는 친구

this

함수 호출시 binding되는 객체를 가리키는 변수
(단, 이벤트리스너의 this는 e.currentTarget가리킴)

• this는 함수가 어떻게 호출되었느냐에 따라 this가 바인딩되는 객체가 달라진다(함수 선언 당시 this에 바인딩되는 객체가 결정되는 게 아니다).
• 이는 함수 선언시 상위 스코프가 결정되는 Lexical Scope와 다르다
• 생성자 함수와 객체의 메소드를 제외한 모든 함수(내부 함수, 콜백 함수 포함) 내부의 this는 전역 객체를 가리킨다.

함수 호출 방식은 함수/메소드/생성자 함수로 나눌 수 있다.

일반적인 함수와 내부함수

이 때,this는 전역객체를 가리킴

function seoul() {
  console.log("seoul's this: ",  this);  함수의 this === window
  function lite() {
    console.log("lite's this: ", this); 내부함수의 this === window
  }
}

• 객체의 메소드에서 this는 객체를 가리킴, 단 메소드의 내부함수는 여전히 window를 가리킨다.

var value = 1;

var obj = {
  value: 100,
  foo: function() {
    console.log("foo's this: ",  this);  // obj
    console.log("foo's this.value: ",  this.value); // 100
    function bar() {
      console.log("bar's this: ",  this); // window
      console.log("bar's this.value: ", this.value); // 1
    }
    bar();
  }
};

obj.foo();

• 콜백함수의 this도 window를 가리킨다.

var value = 1;

var obj = {
  value: 100,
  seoul: function() {
    setInterval(function() {
      console.log("callback's this: ",  this);  // window
      console.log("callback's this.value: ",  this.value); // 1
    }, 100);
  }
};

obj.foo();

즉, 내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 내부함수의 this는 전역객체를 바인딩한다.

메소드 호출

이 때,this는 메소드를 가지고 있는 객체를 가리킴

var foo1= {
  name: 'Seoul',
  sayName: function() {
    return this.name
  }
}

var foo2 = {
  name: 'Lite'
}
foo2.sayName = foo1.sayName;
foo1.sayName(); //Seoul
foo2.sayName(); //Lite

생성자 함수 호출

• 생성자 함수의 this는 생성자 함수가 생성한 객체 가리킴
• 함수 호출시, new Seoul()같이 함수실행시 new를 붙이면 해당함수는 객체를 생성한다.이것을 생성자 함수라한다.
• 일반 함수와 구분을 위해 생성자 함수는 대문자로 시작해야 한다/ arrow function으로 생성자 함수 만들수 X(this는 lexcial this(함수 선언시의 스코프,즉 arrow function 상위스코프의 this를 가리킴)를 기준으로 하기에)
  function seoul =(){} (x) function Seoul()=>{} (o)

// 생성자 함수
function City(name) {
  console.log('This:',this)
  this.name = name;
}
var me = new City('Seoul');
console.log(me); // City{name: "Seoul"} This:City{name:'Seoul'}

var me2 = City('Seoul')
console.log(me2) // undefined

화살표 함수의 this

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정

화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라 한다.
즉, 화살표 함수의 this 바인딩 객체 결정 방식은 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프와 유사

정리 : 생성자 함수와 객체의 메소드는 자신을 호출한 객체를 가리키고, 이를 제외한 모든 함수(내부 함수, 콜백 함수 포함) 내부의 this는 전역 객체를 가리킴

참고:https://poiemaweb.com/js-this