재미는 없지만 자바스크립트를 정리해보자.
(뭘 하든 항상 기본은 중요하기에)
this 는 무엇인가?
1. 전역범위에서 console.log => window
2. 오브젝트내에서
var testObject = {
data : "testLang",
testFunc : function() {
console.log(this)
}
}
결과값 : {data: "kim", 함수: ƒ}
오브젝트 내의 메소드내에서 this 를 사용시 그 메소드를 가지고 있는 오브젝트를 뜻함.
3. function testConstructor() {
this.name = "kim"
}
var nameObject = new testConstructor();
여기서의 this 는 새로생성되는 오브젝트 instance 를 뜻함.
4. 이벤트 리스너
document.getElementById("btn").addEventListener("click", function () {
console.log(this)
});
여기선 e.currentTarget 을 뜻함.
이게 this 의 대부분 뜻이지만, arrow function 에
대해서도 알아둬야함.
var testObj = {
fruits : ["apple", "mango", "banana"],
fruitsFunc : function() {
console.log(this) // {fruits: Array(3), fruitsFunc: ƒ}
testObj.fruits.forEach(function() {
console.log(this); // 여기서의 function은 window
})
}}
var testObj = {
fruits : ["apple", "mango", "banana"],
fruitsFunc : function() {
console.log(this) // {fruits: Array(3), fruitsFunc: ƒ}
testObj.fruits.forEach(() => {
console.log(this); // {fruits: Array(3), fruitsFunc: ƒ}
})
}}
arrow function 특징 : 내부의 this 값을 변화시키지 않음.
(외부this 값 그대로 재사용가능. 위의 this 값을 그대로 사용하게 됨)