함수와 this 바인딩

[bgyoons]

해당 학습 부분 목차

3주차 · 파트 03 [DAY 12] VanillaJS를 통한 자바스크립트 기본 역량 강화 Ⅰ (1)

학습 내용

자바스크립트의 this > 함수가 실행될 때 결정, new 키워드를 통해서 this는 새로 생긴 객체를 가리킨다.

function Cat(name) {
    this.name = name;
    console.log(this)
}
const cat = Cat('nana'); // Window {window: Window, self: Window, document: document, name: 'nana', location: Location, …}

function Cat(name) {
    this.name = name;
    console.log(this)
}
const cat = new Cat('nana'); // Cat {name: 'nana'}

var i = {
    name: 'yoonn',
    m: {
        roto: {
            memberName: 'roto',
            play: function() {
                console.log(`${this.name} ${this.memberName}`); // this > roto를 가리킴
            }
        }
    }
}

i.m.roto.play() // undefined roto

function RockBand(members) {
    this.members = members;
    this.perform = function() {
        setTimeout(function() {
            this.members.forEach(function(member){ // this = undefined인 상태
                member.perform();
            })
        }, 1000)
    }
}

var band = new RockBand([
    {
        name: 'jaurim',
        perform: function() {
            console.log('sing');
        }
    }
]);

band.perform(); // Error

1. arrow function
2. bind() 메서드 사용
3. 클로저 사용