[JavaScript / ES6] this 알아보기

💡 실습 포인트!

• 이전에 강사님의 수업을 들으면서, 일반적인 형태의 function 과 arrow function 이 완전히 같은 것인 줄 알고 무작정 arrow function 으로 만들어서 this 를 사용하려다가 원하는 기능이 제대로 작동하지 않은 적이 있었다.
• 그래서 원인은 잘 모른 채 일단 일반적인 형태의 function 으로 수정해주었는데 이번 수업을 통해 this 에 대해 좀 더 심도있게 공부할 수 있었다.

---

💜 this 1

this 를 그냥 사용하거나, 일반 함수 안에서 사용하면 window 를 의미한다.
하지만, 사실상 전역 공간에서 만들면 this 가 있는 함수를 포함하는 object 가 window 인 것이므로, 2번과 동일하다고 봐도 무방하다.

🤍 ex1.

console.log(this);  // this 는 window.

---

🤍 ex2.

function func2(){
      console.log(this);   
}

func2();  // this 는 기본적으로 window, strict mode 에서는 undefined.

---

💜 this 2

object 내 함수 안에서 this 를 사용하면, this 가 있는 함수를 포함하는 object 를 의미한다.

🤍 ex3.

let obj3 = {
    data3 : "Seoyun",
    func3 : function(){
    	console.log(this)
    }
}

obj3.func3(); // this 가 있는 func3() 함수를 포함하고 있는 object, 즉 여기서는 obj3 을 의미.

---

🤍 ex4.

let obj4 = {
    data4 : {
        func4 : function(){
            console.log(this);
        }
    }
}

obj4.data4.func4(); // this 가 있는 func4() 함수를 포함하고 있는 object, 즉 여기서는 data4 를 의미.

---

🤍 ex5.

let obj5 = {
    data5 : {
        func5_1 : ()=>{
        	console.log(this);
        },
        func5_2 : function(){
        	console.log(this);
        },
        func5_3(){
        	console.log(this);
        }
    }
}

obj5.data5.func5_1(); // arrow function 은 this 값을 함수 바깥에서 그대로 가져오므로, window 를 의미.
obj5.data5.func5_2(); // this 가 있는 func5_2() 함수를 포함하고 있는 object, 즉 여기서는 data5 를 의미.
obj5.data5.func5_3(); // func5_2() 함수는 func5_3() 함수처럼 사용 가능.

---

🤍 ex6.

// 함수나 변수를 전역공간에서 만들면 { window } 에 보관.

function func6(){
	console.log(this);
}

func6();  // this 는 기본적으로 window, strict mode 에서는 undefined.
window.func6();  // this 는 window.

---

💜 this 3

constructor 함수 안에서 this 를 사용하면 새로 생성되는 object 를 의미한다.

🤍 ex7.

function constructor7(){
	this.name7 = 'Seoyun';
}

let obj7 = new constructor7();
obj7;  // {name7: 'Seoyun'} 이라는 object 생성!

---

💜 this 4

eventListener 안에서의 this 는 event.currentTarget 과 동일

🤍 ex8.

<button id="btn">버튼</button>

 

document.getElementById('btn').addEventListener('click', function(e){
    console.log(this);  // e.currentTarget 과 동일하게 btn 태그를 의미.
    console.log(e.currentTarget);  // btn 태그를 의미.

    let arr8 = [1, 2, 3];
    arr8.forEach(function(el){
        console.log(el);  // 1, 2, 3 이 순차적으로 나옴.
        console.log(this);  // this 1 에 해당하므로 this 는 window 를 의미.
    })
})

---

💜 this 비교해보기

🤍 ex9.

let obj9 = {
    names9 : ['Seoyun', 'Suin', 'Inwoo'],
    func9 : function(){

        console.log(this);  //  this 가 있는 익명함수를 포함하고 있는 object, 즉 여기서는 obj9 을 의미.

        obj9.names9.forEach(function(el){
            console.log(this);  // this 가 있는 익명함수는 그냥 일반함수이므로 this 는 window 를 의미.
        })

        obj9.names9.forEach((el)=>{
            console.log(this);  // arrow function 은 this 값을 함수 바깥에서 그대로 가져오므로, 즉 여기서는 obj9 을 의미.
        })

    }
}

obj9.func9();