this 예제
<p id="demo"></p>
<script>
// 객체 생성
var hz = {
site: "홈짱닷컴",
host : "homzzang.com",
open : 2012,
intro : function() {
return this.site + " " + this.host;
}
};
// 출력
document.getElementById("demo").innerHTML = hz.intro();
</script>
결과보기
PS. this.site 의미: this (= hz 객체)의 site 속성 의미.
this 정의
this가 속한 객체를 가리킴.
즉, this가 속한 객체가 뭐냐에 따라 다름.
엄밀히 말하면, 호출 방식에 따라 달라짐.
1.
method (메서드) 안에서는, 해당 method를 소유하는 객체 의미.
2.
단독으로는, global object (전역객체) 의미.
(※ 엄격모드도 마찬가지)
3.
function (함수) 안에서는, global object (전역객체) 의미.
단, strict mode (엄격모드)일 경우엔, undefined 의미.
4.
event (이벤트) 안에선, 해당 이벤트를 받는 요소를 의미.
5.
call() 또는 apply() 메서드 경우, 어떤 객체를 가리키게 할 수 있음.
1. method 안의 this
object method (객체 메서드) 에서의 this는 해당 method를 소유하는 객체를 의미.
맨 위 예제 경우, this는 hz 객체 (= intro 메서드를 소유하는 객체) 임.
PS. this 키워드는 hz 객체 가리키나 실제 찍어보면 [object Objct] 나옴.
<p id="demo"></p>
<script>
var hz = {
site: "홈짱닷컴",
host : "homzzang.com",
open : 2012,
intro : function() {
return this;
}
};
document.getElementById("demo").innerHTML = hz.intro();
</script>
결과보기 결과값: [object Object]
2. 단독 사용 this
this의 소유자는 global object (전역객체)이며, this는 전역객체를 가리킴.
브라우저 창에서, global object (전역객체)는 [object Window] 임. 즉, window 객체임.
Strict mode (엄격모드)에서도 마찬가지.
[기본 모드]
<p id="demo"></p>
<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>
결과보기 ※ 결과값: [object Window]
[엄격 모드]
<p id="demo"></p>
<script>
"use strict";
var x = this;
document.getElementById("demo").innerHTML = x;
</script>
결과보기 ※ 결과값: [object Window]
3. 함수 안 this
함수 안 this는 기본 모드 상태인지, strict (엄격) 모드 상태인지 여부에 따라 달라짐.
기본 모드 일 땐, 해당 함수를 소유하는 global object (전역객체)인 [object Window] 의미.
그러나, strict mode (엄격 모드)일 땐, 이런 연결 무시하고 undefined (비정의 상태) 의미.
[기본 모드]
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = homzzang();
function homzzang() {
return this;
}
</script>
결과보기 결과값: [object Window]
[엄격 모드]
<p id="demo"></p>
<script>
"use strict";
document.getElementById("demo").innerHTML = homzzang();
function homzzang() {
return this;
}
</script>
결과보기 결과값: undefined
4. 이벤트 핸들러 안 this
이벤트 핸들러 안 this는 해당 이벤트를 받는 요소 의미.
(아래 예제 경우, button 요소 의미.)
예제
<button onclick="this.style.display='none'">클릭</button>
결과보기
5. call()・apply() 같은 명시함수 안 this
call() 및 apply() 메서드는 미리 정의된 JS 함수임.
둘 다 다른 객체를 매개변수로 사용해 객체 메서드 호출 가능.
<p id="demo"></p>
<script>
var mysite = {
textplus: function() {
return this.site + " " + this.host;
}
}
var hz = {
site:"홈짱닷컴",
host: "Homzzang.com",
}
var res = mysite.textplus.call(hz);
document.getElementById("demo").innerHTML = res;
</script>
결과보기 결과값: 홈짱닷컴 Homzzang.com
PS.
call() 함수 사용해 매개변수로 hz 객체를 갖는 mysite.textplus 메서드를 호출하면,
this 키워드는 비록 mysite.textplus 메서드 안에 있지만, 실제로는 hz 객체 가리킴.
PS.
아래 1, 2, 3 결과가 모두 다름.
<button id="btn">버튼</button>
<script>
var someone = {
name: 'codejong',
whoAmI: function () {
console.log(this);
},
};
someone.whoAmI(); // 1. object ...
var myWhoAmI = someone.whoAmI;
myWhoAmI(); // 2. window ...
var btn = document.getElementById('btn');
btn.addEventListener('click', someone.whoAmI);// 3. <button> ...
</script>
코드종 님 - JS : this 키워드
https://youtu.be/PAr92molMHU
mdn this 키워드
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this
