this 개념 정리 및 case
Case 1 / window객체
Window : Javascript 내에서 함수나 변수를 선언했을 때 이를 객체 형태로 저장(보관)하는 global object (전역 변수) 보관소
(변수 및 함수 호출 시 window는 생략 가능)
console.log(this)
window 객체 출력
function 함수() {
console.log(this);
}
함수() //window
window.함수() //window두 가지 모두 window 객체 출력, 위의 선언은 다음과 같다고 볼 수 있다.
window : {
함수 () {
console.log(this);
}
}Case 2 : 객체 안에서의 함수 선언 시
let object1 = {
data : 'Kim',
함수 : function() {
console.log(this)
}
}
object1.함수();출력값
{data: 'Kim', 함수: ƒ}
즉 this = object1 선언된 스코프 내부 객체와 같음을 확인 할 수 있다.
let object2 = {
data : {
함수 : function() {
console.log(this)
}
}
}
object2.data.함수();출력값
{함수: ƒ}
this = object2.data
Case 3 : 객체 안에서 Arrow function 사용 시
let object3 = {
data : {
함수 : ()=> {
console.log(this)
}
}
}
object3.data.함수();출력값
window
Arrow function 의 경우 this 값을 함수 밖에 있는 원래 this 값을 그대로 사용
Case 3-1 : 이벤트 리스너 내에서 this
<body>
<button id="button">버튼</button>
</body>
<script>
document.getElementById('button').addEventListener('click',
function (e) {
console.log(this)
console.log(e.currentTarget)
}
)
</script>출력값
<button id="button">버튼</button>
this = e.currentTarget
->현재 이벤트가 일어나고 있는 전체 요소를 뜻함
Case 3-2 : 이벤트 리스너 내에서 this
document.getElementById('button').addEventListener('click',
function (e) {
let array = [1,2,3];
array.forEach(function(i) {
console.log(this)
})
}
)출력값
window 객체
이벤트리스너 안이라도 forEach 반복문 내에서의 this는 window 전역객체 나타냄
Case 4-1 : 객체 내 함수에서의 forEach
let object1 = {
name : ['박', '김', '이'],
function : function() {
console.log(this) (=== console.log(object1)
object1.name.forEach(function() {
console.log(this)
})
}
}
object1.function() 출력값
{name: Array(3), function: ƒ} ( = console.log(object1)
window객체 x 3 ( object1의 부모 = window)
this는 해당 this가 담고 있는 부모 객체(?)를 가리킴
Case 4-2 : 객체 내 함수에서의 forEach
let object2 = {
name : ['박', '김', '이'],
function : function() {
console.log(this)
object2.name.forEach(()=>{
console.log(this)
})
}
}
object2.function()출력값
{name: Array(3), function: ƒ} x 4
중요 : Arrow function 사용 시 외부에 선언 된 this값을 그대로 가져옴
Case 5 : Instance 오브젝트 복사 this
function machine() {
this.name = "kim"
}
let object = new machine();
console.log(object)출력값
machine {name: 'kim'}
오브젝트를 복사하여 생성하는 constructor 문법
함수 내 에서 this를 쓰게 되면 그 값을 새로 생성 (Instance) 하여 오브젝트를 사용 할 수 있다.
-> 별도 챕터를 통해 instance 개념 정리 하기
