[자바스크립트] this 사용법 및 개념

이번 시간에는 자바스크립트 this

사용법과 개념에 대해서 알아보도록 하겠습니다.

---

this 사용법

자바스크립트 객체안에 객체 프로퍼티로 할당되어 존재하는 함수를

매서드(METHOD)라고 합니다.

아래의 객체의 bebe, nana의 매서드는 color가 됩니다.

//매서드 color의 this는 해당객체인 bebe를 가르킨다.

const bebe = {
    name : "bebe",
    age : 1,
    color : function(){ 
        console.log(`${this.name}의 색깔은 검은색 입니다.`)
    }
}



//매서드 color의 this는 해당객체인 nana를 가르킨다.
const nana = {
    name : "nana",
    age : 1,
    color : function(){ 
        console.log(`${this.name}의 색깔은 노란색 입니다.`)
    }
}

console.log(bebe.color()); //검은색 입니다.
console.log(nana.color()); //노란색 입니다.

 

주의사항

화살표 함수는 일반 함수와 달리 자신만의 this를 가지지 않습니다. 

따라서 내부에서 this를 사용하게되면 그 this는 외부에서 값을 가져옵니다.

const bebe = {
    name : "bebe",
    age : 1,
    color : ()=>{ 
        console.log(`${this.name}의 색깔은 검은색 입니다.`) //화살표 함수는 this를 가지고 있지 않기 떄문에 사용시 "전역객체"인 window를 가르킵니다.
    }
}
console.log(bebe.color()); //this가 bebe가 아니라서 값이 안나옴.

 

this.name의 값이 없는 것으 볼수 있음.

 

이상으로 this 사용법에 대해서 알아보았습니다.