this

대부분의 경우 this의 값은 함수를 호출하는 방법에 의해 결정됨.

호출을 누가했냐(호출 하는 코드를 살펴봐야함)
호출한놈 (객체)=== THIS //누가 실행했냐

전역 문맥

전역 실행 문맥global execution context에서 this는 엄격 모드 여부에 관계 없이 전역 객체를 참조

//웹 브라우저에서는 window 객체가 전역 객체
console.log(this === window) // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

객체의 메소드 안에서의 this

-메소드 : 객체는 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합이며, 프로퍼티의 값으로 함수가 올 수도 있는데 이러한 프로퍼티를 메소드 라고함.

객체의 메소드안에서 사용된 this는 해당 메소드를 호출한 객체에 바인딩 된다.

const obj = {
    whatName : function () {
    console.log(this.name)
	}
}

obj.whatName() // 결과값 : undefined

let kim = obj
kim.name = "kim"
kim.whatName() //결과값 : kim

let lee = obj
lee.name = "lee123"
lee.whatName() // 결과값 : lee123

obj.name = "123123123"
obj.whatName() // 결과값 : 123123123

obj.whatName()의 결과값이 undefinecd인 이유는 객체의 메소드 안에서 사용된 this는
해당 메소드를 호출한 객체에 바인딩 되는데 obj.whatName같은 경우는 obj라는 객체에 name을 지정해주지 않아 undefiecd가 나오게 됨.

나머지 3개의 경우는 obj라는 객체의 name값에 각각 value값을 설정해 주었으므로
설정한 값대로 나오는것을 확인이 가능.

함수 내의 this (함수 선언문, 함수표현식)

함수선언문에서 사용된 this의 경우 전역객체(window)를 가리킨다.

//let a = "HI"  <-- let으로 선언시 전역객체에 포함되지 않아서 var를 씀.

var a = "HI"

let b = function() {
	console.log(this.a)
}


b();  // HI
console.log(this.a) // HI
console.log(window.a) //HI
console.log(this === window) //HI

this가 없는 화살표 함수

화살표 함수는 일반 함수와 달리 고유한 this를 가지지 않음. 화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 외부 함수에서 this값을 가져옴.

예시에서 함수 arrow()의 this는 외부 함수 user.sayHi()의 this가 됨.

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // 보라

참조

• 화살표함수는 자신의 this가 없음. 화살표함수에서 this를 참조하면 , 화살표 함수가 아닌 '평범한' 외부 함수에서 this 값을 가져옴.
• this는 호출하는 방법에 의해 결정되고 closure는 선언하는 방법에 의해 결정됨.