JavaScript - this

this - "자기참조변수"

정의

• 내가 어떻게 불리느냐에 따라 바인딩 되는 것.

목적

• "객체"에서 "내"가 프로퍼티나 메서드를 참조하기 위해

---

"어디서" "어떻게" 부르느냐에 따라 this는 달라진다!

• 일반 함수로 호출 되었을 때 -> **전역 객체**
  • 함수() -> window

  function test(){
      console.log(this)
  }
  test()

  Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}

• 메서드로 호출 되었을 때 -> **"그" 메서드를 보유한 객체 **
  • 객체.메서드() ->객체

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

{test: ƒ}
	test: ƒ ()
		arguments: null
		caller: null
		length: 0
		name: "test"
		prototype: {constructor: ƒ}
		[[FunctionLocation]]: VM4936:2
		[[Prototype]]: ƒ ()
		[[Scopes]]: Scopes[2]
	[[Prototype]]: Object

• 생성자 함수로 호출 되었을 때 -> **"미래"에 생성될 "인스턴스"** -> 객체

  Teacher {name: 'iseo'}
  	name: "iseo"
  	[[Prototype]]: Object
  		constructor: ƒ Teacher(name)
  		[[Prototype]]: Object

  //cf.
  const person2 = Teacher('iseo')
  //이렇게 넣으면(new키워드 빼먹으면) 일반 함수 호출과 같아져 전역인 window에 Teacher : 'iseo'가 들어가버림....
  //결론 : 이 경우의 this는 window에 바인딩 되어버린다!!

• function Teacher(name){ this.name = name //"미래"에 생성될 "인스턴스" } const person = new Teacher('iseo') person
• apply/call/bind로 "간접"호출 되었을 때

|function 키워드와 화살표 함수 차이

• this.radiuses는 메서드(객체.메서드명()으로 호출 가능) 소속이기 때문에 정상적으로 접근 가능
• forEach의 콜백함수의 경우 메서드가 아님 (객체.메서드명()으로 호출 불가능)
• 때문에 콜백함수 내부의 this는 window가 되어 this.PI는 정상적으로 접근 불가능
• 이 콜백함수 내부에서 this.PI에 접근하기 위해서 함수객체.bind(this) 메서드를 사용.
• 이 번거로운 bind 과정을 없앤 것이 화살표 함수

Summary

• 함수 내부에 this 키워드가 존재할 경우
  • 화살표 함수와 function 키워드로 선언한 함수가 다르게 동작
• 함수 내부에 this 키워드가 존재하지 않을 경우
  • 완전히 동일하게 동작

참고하기 좋은 블로그 글 링크

• https://hanamon.kr/javascript-this%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C/
• https://nykim.work/71