this
🔴 this 란?
this는 객체를 가리키는 참조 변수입니다. this는 호출되는 위치에 따라 다른 값을 출력하기 때문에 우리에게 혼란을 줍니다.
아래 예제에서 this는 위의 경우에는 window, 아래의 경우에는 myObj입니다. 분명 같은 기능을 하고 있는데 말이죠.
function a(){ console.log(this) }
a();
let myObj = {
val1: 100,
func1: function () {
console.log(this);
}
}
myObj.func1();
function b(){
console.log('hello world')
}
b()
window.b()그러면 이렇게 하면 어떨까요? 아래의 경우에도 this가 달라집니다. 함수를 호출한 객체가 달라졌기 때문이죠!
let myObj = {
val1: 100,
func1: function () {
console.log(this);
}
}
let test = myObj.func1;
test()버튼으로 만들어보겠습니다. 이번에는 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);
let button2 = document.getElementById("btn2");
button2.addEventListener("click", test);
</script>
</body>
</html>다른 예를 들어보도록 하겠습니다. 아래 예시에서 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 사용 예시 */
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();
Hey🖐️