this

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

//Method => object
const audio = {
    title: 'a',
    play() {
        console.log('play this', this);
     }
 }
audio.play();

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

audio.stop();

함수에서 this 사용 ➡️ window 객체를 가리킨다

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

playAudio();

constructor 함수에서 this 사용 ➡️ 빈 객체를 가리킨다

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

const audio = new Audio('a');

const audio = {
    title: 'audio',
    categories: ['rock', 'pop', 'hiphop', 'jazz'],
    displayCategories() {
        this.categories.forEach(function (category) {
             console.log(`title: ${this.title}, category: ${category}`);
        }, this); // 메서드 안에있는 this
    }
}

• this.title은 보통 함수 안에 있는 것이기 때문에 해당 객체가 아닌 window객체를 가리킨다 .
• forEach의 첫 번째 매개변수: 콜백함수
• 두 번째: thisArg
• thisArg -> 여기에 넣는 것을 콜백함수에서 this로 참조

const audio = {
    title: 'audio',
    categories: ['rock', 'pop', 'hiphop', 'jazz'],
    displayCategories() {
        this.categories.forEach((category) => {
            console.log(this);
        });
    }
}

audio.displayCategories();

• 화살표 함수 안에있는 this는 항상 상위 스코프의 this를 가리킨다. (Lexical this)