적어도 일주일에 한번은 꼭 포스팅을 해야지라고 마음을 먹었는데
최근 2주간은 바쁜 일정에 슬럼프까지 겹쳐서 계속 생각만 하고있다가 드디어 작성하는 오랜만의 포스팅..
다짐을 지키지 못해서 지키지 못해서 부끄럽지만...쨌든 ! 오늘은 this 키워드를 정리해보고자 한다.
this란 자기 자신을 호출할 때 사용하는 키워드이다.
이번 포스팅에서는 이 this키워드가 전역에서 호출될 때 / 매서드 내부에서 호출될 때 / 함수 내에서 호출될 때 (일반함수와 화살표함수 구분) 두가지 케이스를 정리 해 볼것이다.
1. 전역에서 this가 호출될 때
let test = this;
console.log(test);위와 같은 상황에서는 console창에 [window]라는 결과값이 찍히게 된다.
이처럼 코드블럭 내부가 아닌 전역에서의 this는 window(전역객체)를 의미한다
2. 일반함수 내부에서 this가 호출 될 때
function test(){
return this;
}
console.log(test());함수의 코드블럭 내부에 this를 반환 한 후 console창에 함수를 호출한다면
this는 즉시 호출하는 대상인 전역객체(window)를 반환한다. 위의 경우 호출대상이 window지만
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 문법</title>
</head>
<body>
<button id="btn">클릭</button>
<h3 id="demo"></h3>
<script>
function hello(){
document.getElementById("demo").innerHTML += this;
}
document.getElementById('btn').addEventListener('click', hello);
</script>
</body>
</html>
위의 코드에서 hello함수를 호출하는 객체는 button이다 . 따라서 버튼을 누르면 [object HTMLButtonElement]이 화면에 출력될것이다. 하지만 화살표함수에서는 반환값이 다르다.
3. 화살표함수에서 this가 호출 될 때
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 문법</title>
</head>
<body>
<button id="btn">클릭</button>
<h3 id="demo"></h3>
<script>
//일반함수는 this 키워드가 있다는 것은 함수를 호출한 객체를 의미 - window, document, 문서객체일 수도 있다.
hello = () =>{
//함수를 호출한 객체인 this를 demo에 담아주기
document.getElementById("demo").innerHTML += this;
}
document.getElementById('btn').addEventListener('click', hello);
</script>
</body>
</html>위와같이 코드를 작성하면 h3내부에는 [object window]가 출력된다.
즉 화살표함수에서의 this란 전역객체인 window를 의미한다.
4. 메서드 내부에서 작성한 키워드
var person = {
firstName : "유림",
lastName : "이",
id : "zzang",
fullName : function() {
return `${this.firstName} ${this.lastName}`
}
}
console.log(person.fullName());person이라는 객체를 생성하고 1~3째줄엔 각각의 키값을, 마지막줄에는 이름을 반환하는 메서드를 작성했을때
fullName값을 반환하면 console창에 [유림 이]가 찍힐것이다
이것으로 this.firsName / this.lastName의 this는 해당 객체를 의미하는것을 알 수 있다.
즉, 객체의 메서드에서 호출한 this는 소유한 해당 객체를 의미한다.
'JAVASCRIPT' 카테고리의 다른 글
| 배열 내장함수 - indexOf / findIndex / find (0) | 2021.03.21 |
|---|---|
| 배열 내장함수 - forEach / map (0) | 2021.03.21 |
| 개념잡기용 문제풀기 - for문을 이용해 3보다 큰숫자 반환하기 (0) | 2021.03.20 |
| 자바스크립트-함수와 화살표함수 (0) | 2021.02.16 |
| 자바스크립트-선언 (변수와 상수) (0) | 2021.02.15 |
