Front/JavaScript

[ES6] arrow function this

이영애님 2020. 6. 27. 02:56

# 일반 함수의 경우

<script>
	const form = document.getElementById('boardForm');


	form.addEventListener("submit",function(e){
		console.log(this);
 	});
</script>

--> HTMLFormElement .. <form id="boardForm" name="boardForm"> ... </form>

- 함수 호출시 this 가 정의된다. 

- 함수를 호출하는 객체 "form" 호출한다.

 

# arrow 

<script>
	const form = document.getElementById('boardForm');

	form.addEventListener("submit",(e)=>{
		console.log(this);
 	});
</script>

--> Window 

- 바인딩이 없다. 함수 선언시 this 가 정의된다. 상위스코프의 this

- 함수를 소유하는 객체 "Window"를 호출한다.