[공부 내용 정리]
this는 객체를 가리키는 참조 변수임.
- this는 호출되는 위치에 따라 다른 값을 출력함!
- 어떤 객체의 메소드가 아닌 단독 호출되는 함수의 this는 전역공간을 참조함.
- window 객체 : 브라우저 환경의 전역공간. Node.js 환경에서의 전역공간은 global이라는 이름을 가짐.
ex) 아래 예제에서 this는 위의 경우에는 window, 아래의 경우에는 myObjd
function a(){ console.log(this) }
a();
// 함수가 전역공간. 즉 윈도우 공간에 있기 때문에 window라고 출력
let myObj = {
val1: 100,
func1: function () {
console.log(this);
}
}
myObj.func1();
// 함수가 myObj 공간. 즉 myObj 공간에 있기 때문에 myObj라고 출력
ex) this가 버튼이 되었을 때
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
</head>
<body>
<button id="btn1">클릭해봐요!</button>
<button id="btn2">클릭해봐요!</button>
<script>
let myObj = {
val1: 100,
func1: function () {
console.log(this);
},
};
let test = myObj.func1;
let button1 = document.getElementById("btn1");
button1.addEventListener("click", myObj.func1);
// button1에 클릭이 발생했을 때 myObj.func1을 호출해라.
let button2 = document.getElementById("btn2");
button2.addEventListener("click", test);
</script>
</body>
</html>
ex) this 가 가르키는 것은? → 호출한 객체
/ * this */
function sayName(){
console.log(this.name);
}
var name = 'Hero';
//전역으로 선언한 name는 window 객체의 속성임.
// 때문에 window.name === "Hero" 가 성립함.
let peter = {
name : 'Peter Parker',
sayName : sayName
}
let bruce = {
name : 'Bruce Wayne',
sayName : sayName
}
sayName();
peter.sayName();
bruce.sayName();
/* sayName() 함수를 실행했을 때와
peter, bruce 객체의 sayName 함수를 호출했을 때의 결과를 비교해 보세요 */
따라서 this는 어디서 실행을 하냐에 따라 가르키는 것이 계속 달라진다!
ex) this로 호텔 각 호텔 방 호출하기
/* this 사용 예시 */
let 호텔 = [{
'이름' : '하나호텔',
'위치' : '제주도 제주시 001',
'가격' : {'A':50000, 'B':30000, 'C':15000},
'방의개수' : 50,
'예약자수' : 25,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
'이름' : '둘호텔',
'위치' : '제주도 제주시 002',
'가격' : {'A':100000, 'B':60000, 'C':30000},
'방의개수' : 100,
'예약자수' : 30,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
'이름' : '셋호텔',
'위치' : '제주도 제주시 003',
'가격' : {'A':80000, 'B':50000, 'C':30000},
'방의개수' : 120,
'예약자수' : 80,
'남은방의개수' : function(){return this.방의개수 - this.예약자수}
}];
console.log(호텔[0].남은방의개수());
console.log(호텔[1].남은방의개수());
console.log(호텔[2].남은방의개수());
this의 특징
this는 함수가 만들어질 때가 아닌 실행 될 때 그 값이 결정됨!
function sayName(){
console.log(this.name);
}
var name = 'Hero';
let peter = {
name : 'Peter Parker',
sayName : sayName
};
let bruce = {
name : 'Bruce Wayne',
sayName : peter.sayName
};
bruce.sayName();
→ 따라서 이 상황에서는 this가 bruce를 가르킴. bruce안에서 실행됐으니까!
'Front-End > JS' 카테고리의 다른 글
| [JS] DOM (0) | 2024.01.15 |
|---|---|
| [JS] 객체지향 프로그래밍 (0) | 2024.01.15 |
| [JS] Type(배열, 객체) (0) | 2024.01.12 |
| [JS] for문/while문 (1) | 2024.01.11 |
| [JS] 변수/함수/조건문 (0) | 2024.01.10 |