[JavaScript] 자바스크립트 this 키워드 (메소드, 함수, 생성자함수, 화살표함수, Lexical this)

 

시험기간이 겹쳐서 이제야 올리는 블로그 포스팅

자주 사용하지만 잘 모르는 this에 대해 공부하였다.

---

this라는 키워드는 여러 상황에서 다른 것들을 참조한다.

• 메소드에서는 객체를 가리키고
• 함수에서는 window 객체를 가리킴
• 생성자 함수에서는 빈 객체를 가리킴

---

1.  메소드에서 this 사용  ⇒ 해당 객체를 가리킨다 (참조한다)

: 메소드에서 this를 사용할 경우 해당 메서드를 호출한 객체를 참조한다.

 

✏️ 메소드 : 객체의 속성으로 추가된 함수

// Method => Object
// 객체 audio
const audio = {
	// 속성타이틀은 a라는 속성값을 가짐
    title: 'a',
	
    // play는 객체 안에 있으니 메소드
    play() {
        console.log('play this', this);
    }
}

 

객체 audio를 보겠다.

audio의 속성중 title은 'a'라는 속성값을 가진다.

play()는 객체 안에 있으니 메소드가 되겠다.

audio.play();
// 이러면 this가 출력이 되겠죠

그러면 여기서 audio.play()를 입력했을경우

this가 객체를 출력한 모습 (play)

 

메소드에서 this를 사용할 경우에 이 메서드를 호출한 객체 = 즉 해당 객체를 가리키므로

a가 출력됨을 알 수있다.

audio.stop = function() {
    console.log('stop this', this);
};

audio.stop();
// audio.stop 하면 얘도 결국엔 메소드이죠.

audio 객체에 새로운 메서드 stop을 추가한 모습이다.

그래서 audio.stop()을 호출했을 경우 역시 a가 출력된다.

this가 객체를 출력한 모습 (stop)

---

2. 함수에서 this 사용 ⇒ window 객체를 가리킨다.

// Function => Window Object
function playAudio() {
    console.log(this);
}

playAudio();

 

window 객체 출력

---

3. constructor 함수(생성자 함수)에서 this 사용 ⇒ 빈 객체를 가리킨다.

🔎 생성자 함수는 첫 글자가 대문자이다.

// Constructor Function => {}
function Audio(title) {
    this.title = title;
    console.log(this);
}

// 얘를 객체로 만들려면 이렇게 하면 됨
const audio = new Audio('a');
// 빈 객체 안에 타이틀은 a
// 그래서 Audio {title: 'a}가 출력됨.
// this.title = title; 얘가 없으면 빈 객체 반환

---

const audio = {
    title: 'audio',
    categories: ['rock', 'pop', 'hiphop'],
    dispayCategories(){
    	// 이 this는 메소드 안에 있는거고
        this.categories.forEach(function(category) {
        
        	// 이 this는 함수 안에 있는거 -> window를 가리킴
        	// window에는 title이라는 속성이 없으므로 undefined가 나오는것이다.
            console.log(`title: ${this.title}, category: ${category} `);
        })
    }
}
audio.dispayCategories();

 

위의 코드대로 이렇게 출력을 해본다면

 

이런 결과가 나온다.

카테고리에서 사용된 this는 메소드 안에 있는것이기에 audio 객체의 category 값을 출력할 수 있는것이고,

이 안의 함수에서 사용된 title을 찾는 this는, 함수 안에서 사용되었기에 window객체를 가리킨다.

window객체 안에는 title이라는 속성이 없기에 undefined가 출력되는것이다.

 

const audio = {
    title: 'audio',
    categories: ['rock', 'pop', 'hiphop'],
    dispayCategories(){
        this.categories.forEach(function(category) {
            console.log(`title: ${this.title}, category: ${category} `);
        },{title: 'audio'})
    }
}
audio.dispayCategories();

 

이렇게 뒤에 {title: 'audio'}를 붙여 수정을 한다면 this가 audio를 참조 할 수 있게 된다.

이렇게 된다고 생각하면 된다.

출력결과

그러면 title에 audio가 출력되는 것을 확인할 수 있다

const audio = {
    title: 'audio',
    categories: ['rock', 'pop', 'hiphop'],
    dispayCategories(){
        this.categories.forEach(function(category) {
            console.log(`title: ${this.title}, category: ${category} `);
        },this) //<< 이 this는 메소드 안에 있는거. 위랑 똑같이 출력됨
    }
}
audio.dispayCategories();

또는 이렇게 수정해도 같은 결과가 나온다.

---

+ 화살표 함수, Lexical this

✏️ 화살표 함수:  function 키워드 대신 =>를 사용하는 함수 표현식

 

📍 this는 일반 함수와 화살표 함수에서 다르게 동작한다.

일반 함수는 this를 호출하는 방식에 따라 결정되지만, (호출된 객체가 this를 결정)

화살표함수는 정의된 위치의 상위 스코프에서 this 값을 가져온다.

예시

⇒ 그리고 저 상위 스코프가 가리키는애가 객체이다.

고로 쟤는 객체를 출력하게 된다.

출력결과

이렇게 말이다.