[JavaScript] this가 가리키는 것

Dynamic Binding

함수가 호출되는 상황은 4가지가 있다.

 

• 함수 호출 - 함수를 직접 호출
  • myFunc()
• 메서드 호출 - 객체의 메서드를 호출
  • o.method()
• 생성자 호출 - 생성자 함수를 호출
  • function Person() {
        this.name = 'Tom'
    }
    const p = new Person()
• 간접 호출 - call, apply 등으로 함수를 간접 호출
  • func.call(null, a)

 

function myFunc() {
    console.log('myFunc called')
}

myFunc()    // 함수를 직접 호출

const o = {
    name : 'Daniel',
    printName : function() {
        console.log(this.name)
    }
}

o.printName()    // 객체의 메서드를 호출

function Person(name) {
    this.name = name
    this.printName = function() {
        console.log(this.name)
    }
}

const p = new Person('Daniel')    // 생성자 호출

setTimeout(p.printName.bind(p), 1000)    // 간접 호출

 

• 함수는 이렇듯 다양한 상황(환경)에서 호출될 수 있다.
• 함수의 호출 환경에 따라 this는 동적으로 세팅된다.
• 이렇게 this가 환경에 따라 바뀌는 것을 동적 바인딩(dynamic binding)이라고 한다.
• bind, apply, call 등으로 this가 가리키는 것을 조작할 수 있다.

 

let o = {
    name: "Daniel",
    f1: () => {
        console.log("[f1] this : ", this);
    },
    
    f2: function () {
        console.log("[f2] this : ", this);
    },
};

o.f1();    // global
o.f2();    // o

setTimeout(o.f1, 10);    // global
setTimeout(o.f2, 20);    // global

 

• f1은 화살표 함수로 호출 시 this는 함수가 생성된 환경을 가리키도록 고정된다.
• f2는 일반 함수로 this는 함수를 호출된 환경을 가리키며 this는 동적으로 바뀔 수 있다.
• f2는 객체의 메서드로 호출될 때 객체가 this로 할당된다.
• 최상단 스코프의 실행 컨텍스트는 전역이다.
• setTimeout으로 함수의 실행환경을 바꾼다.

 

this를 조작하는 경우

let o = {
    name: "Daniel",
    printName: function () {
        console.log("내 이름은 ", this.name);
    },
};

o.printName();    // 내 이름은 Daniel
setTimeout(o.printName, 10);    // 내 이름은 undefined
setTimeout(o.printName.bind(o), 20);    // 내 이름은 Daniel

 

• bind, call, apply 등의 함수로 this를 조작한다.
• setTimeout은 함수 호출과는 다른 콜백 호출이다.
• printName 메서드는 bind 함수를 이용해 this 변수가 o를 가리키도록 컨텍스트를 동적 바인딩한다.

 

 

함수의 호출

4가지 외에, 콜백 함수의 호출이 있다.

• 콜백 함수 - 특정 동작 이후 불려지는 함수
  
  • function callback() {
        console.log('cb')
    }
    function myFunc(name, cb) {
        console.log('name: ', name)
        cb(name)
    }
    myFunc('Daniel', callback)
• 보통 다른 함수의 인자로 보내지는 함수를 의미한다.