[자바스크립트] this

221024 - DOM

this

1. 전역 문맥에서의 this

2. 함수 문맥에서의 this

2-1. 함수 문맥에서의 this - 단순 호출

2-2. Method (Function in Object, 객체의 메서드로서)

2-3. Nested (Function 키워드)

2-3. Nested (화살표 함수)

2-4. this와 addEventListener

this

• 어떠한 object를 가리키는 키워드
  • (java에서의 this와 python에서의 self는 인스턴스 자기자신을 가리킴)

• 자바스크립트의 함수는 호출될 때 this를 암묵적으로 전달 받음

• 자바스크립트에서의 this는 일반적인 프로그래밍 언어에서의 this와 조금 다르게 동작

• 자바스크립트는 해당 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라짐

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

1. 전역 문맥에서의 this

• 브라우저의 전역 객체인 window를 가리킴
  • 전역객체는 모든 객체의 유일한 최상위 객체를 의미함
  • console.log(this) ⇒ window

2. 함수 문맥에서의 this

• 함수의 this 키워드는 다른 언어와 조금 다르게 동작

• this의 값은 함수를 호출한 방법에 의해 좌우됨

2-1. 함수 문맥에서의 this - 단순 호출

• 전역 객체를 가리킴

• 전역은 브라우저에서는 window, Node.js는 global을 의미함

const myFunc = () => {console.log(this)}

// 브라우저
myFunc() // window

// Node.js
myFunc() // global

2-2. Method (Function in Object, 객체의 메서드로서)

• 메서드로 선언하고 호출한다면, 객체의 메서드이므로 해당 객체가 바인딩됨

const myObj = {
	data: 1,
	myFunc() {
		console.log(this) // myObj
		console.log(this.data) // 1
	}
}

myObj.myFunc() // myObj

2-3. Nested (Function 키워드)

const myObj = {
	numbers: [1],
	myFunc() {
		console.log(this) // myObj
		this.numbers.forEach(function (number) {
			console.log(number) // 1
			console.log(this) // window
		})
	}
}

• forEach의 콜백 함수에서의 this가 메서드의 객체를 가리키지 못하고 전역 객체 window를 가리킴

• 단순 호출 방식으로 사용되었기 때문

• 이를 해결하기 위해 등장한 함수 표현식이 바로 ‘화살표 함수’

2-3. Nested (화살표 함수)

const myObj = {
	numbers: [1],
	myFunc() {
		console.log(this) // myObj
		this.numbers.forEach((number) => {
			console.log(number) // 1
			console.log(this) // myObj
		})
	}
}

• 이전의 일반 function 키워드와 달리 메서드의 객체를 잘 가리킴

• 화살표 함수에서 this는 자신을 감싼 정적 범위

• 자동으로 한 단계 상위의 scope의 context를 바인딩

화살표 함수

• 화살표 함수는 호출의 위치와 상관없이 상위 스코프를 가리킴(Lexical scope this)

• Lexical scope
  • 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정
  • Static scope라고도 하며 대부분의 프로그래밍 언어에서 따르는 방식

• 따라서 함수 내의 함수 상황에서 화살표 함수를 쓰는 것을 권장

2-4. this와 addEventListener

• 하지만..

• addEventListener에서의 콜백 함수는 특별하게 function 키워드의 경우

• addEventListener를 호출한 대상을( event.target )뜻함

• 반면 화살표 함수의 경우 상위 스코프를 지칭하기 때문에 window 객체가 바인딩 됨

• 결론
  • addEventListener의 콜백 함수는 function 키워드를 사용하기

<script>
  // this와 addEventListener
  const functionButton = document.querySelector('#function')
  const arrowButton = document.querySelector('#arrow')

  functionButton.addEventListener('click', function(event) {
    console.log(this) // <button id="function">function</button>
  })

  arrowButton.addEventListener('click', event => {
    console.log(this) // window
  })
</script>