안녕하세요 lovefield 입니다.
오늘은 javascript 에 대한 Excution Context 입니다.

javascript도 당연히 실행 순서가 존재하는데요 오늘은 그에 대한 설명입니다.

var a = '100';
var b = 'won';

function alert(){
	var c = a + b;
	alert(c);
}
alert();

위와 같은 스크립트가 있다고 가정합니다.
그러면 우선 global 영역에 있는 변수 a,b에 대해서 다음과 같이 선언이 됩니다.

변수 값
a undefind
b undefind

우선 변수가 들어갈 수 있는 공간을 만드는 셈이죠.

그 다음은 함수 등 명령어들을 수집합니다.
이 단계에서는 실행이 되지 않아요.

그 다음 this value 가 선언 되는데요.
이 값은 아래에서 자세히 다뤄드리겠습니다.

그리고 나서 변수에 값이 들어가고 비로소 명령어들이 실행됩니다.
함수가 있다면 함수 내에서도 똑같이 돌아가게 되지요.

This Value

javascript 에서 this value 를 많이 헷갈려 하시는 분들이 많습니다.

기본적으로 javascript 에서 this value는 이벤트가 바인딩(binding) 된 곳입니다.

function thisvalue(){
	console.log(this);
}
thisvalue();

위와 같은 코드에서 this value 는 window 가 나오게 될 겁니다.
기본적으로 함수는 window에 저장이 되죠?

var a = {'text':'hollow','value':function(){
	return this.text;
}};

console.log(a.value());

위와 같은 코드에서 찍히는 콘솔은 ‘hollow’ 입니다.
변수 a에서 바인딩 되었기 때문에 변수 a에 있는 text를 찾아가게 되는 거죠.
여기서의 this value 는 변수 a 입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>html5</title>
</head>
<body>
<div class="wrap">

<button>클릭</button>

</div>
<script>

var button = document.querySelector('button');

button.addEventListener('click',function(){
	console.log(this);
});

</script>
</body>
</html>

자 위의 코드는 button을 선택해서 이벤트를 부여했습니다.
여기서 this value가 button 인 이유는 button에게 이벤트가 부여되었고 button에 바인딩 되어 있습니다.
즉 함수가 바인딩 된 곳은 button인것이죠.