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
최신댓글