Javascript에서의 this part 2
어느날...회사에서 Javascript로 개발을 하다가 값이 안나와서 디버깅을 해보았다.
값이 unknown 이라니...
이게 무슨... 이라 생각했으나, 자세히 보니 바인딩 된 this 의 객체가 전역 객체였다...
알면서도 헷갈리는 Javascript의 this... 다시 한번 정리해보려 한다.
객체 내 메서드의 this 를 직접 호출 할 때
다음 코드는 test 라는 객체 안의 click 메서드를 호출하는 모습이다.
<script>
var test = {
apple : '사과',
click : function() {
console.log(this.apple);
}
};
test.click();
</script>이렇게 객체 안에 하나의 프로퍼티로 선언된 함수를 '메서드' 라고 하는데,
위와 같이 test 객체의 click() 메서드를 직접 실행할 경우, 이때 this는 test가 실행했기 때문에 test로 바인딩 된다.
실제로 test.click() 을 실행하면 사과 가 출력된다.
다른 객체가 해당 메서드를 받아 실행할 경우
위의 메서드를 다른 객체가 받아 호출한다면 어떻게 될까?
<script>
var test = {
apple : '사과',
click : function() {
console.log(this.apple);
}
};
var test2 = {
apple : '포도',
click : test.click,
};
test2.click();
test3 = test2.click;
test3();
</script>
위 결과 예상해보자 test2 객체의 click 프로퍼티에 test.click 을 넣었다.
그 후 test2.click() 을 실행하면 console.log(this.apple) 가 실행될 것이다.
이 때, this 는 click()을 호출한 객체가 test2 이기 때문에 포도가 출력된다.
그렇다면 test3 = test2.click 를 넣게 되면 test3는 아래와 같이 될것이다.
test3 = function() {
console.log(this.apple);
}그리고 test3() 를 실행하면 이때 this는 누가 될까?
바로 window 객체가 된다.
왜냐하면 test3 가 선언된 scope는 window 객체에 속하게 되고, test3()를 호출하는 객체도 window가 되기 때문이다.
jQuery 에서 살펴보자
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$('#button').click(
function(){
console.log(this);
}
);
});
</script>
</head>
<body>
<input type='button' id='button' value='버튼' />
</body>
</html>
위에서 보면 jQuery를 이용해서 $('#button') 이렇게 id 값이 button 인 객체를 가져왔다.
그리고 click 메서드를 명시해주는데, console.log(this) 를 찍어보자.
결과는?
이렇게 id가 button인 객체를 반환한다.
왜그럴까?
당연히 click에 명시된 console.log(this) 를 호출하는 객체가 id가 button인 객체이기 때문이다.
참고로 메서드를 호출하는 객체명이 없는 경우 alert('test'); 와 같은 경우
메서드를 호출하는 객체는 window가 된다.
그렇기 때문에 객체명을 제외하고 function을 호출할 경우 this는 window로 바인딩 된다는점!!
즉 Javascript 의 this 는 this가 속한 메서드나 함수가 어떻게 호출되느냐에 따라 바인딩이 된다고 할 수 있다.
'Javascript' 카테고리의 다른 글
| [Javascript] || 와 && 를 이용한 라인 줄이기 (0) | 2019.07.09 |
|---|---|
| [Javascript] 헷갈리는 === 과 == (0) | 2019.07.09 |
| Javascript에서의 this (0) | 2019.04.20 |
| Javascript arguments 객체란? (0) | 2019.04.20 |
| 함수 호이스팅(Function Hoisting)이란? + 변수 호이스팅 (0) | 2019.04.13 |