4.3 - this

함수가 호출되는 상황

함수가 호출되는 상황은 4가지가 존재한다.

• 함수 호출 : 함수를 직접 호출한다. [myFunc()]
• 메서드 호출 : 객체의 메서드를 호출한다. [o.method]
• 생성자 호출 : 생성자 함수를 호출한다. [ function Person(){this.name = 'abc' } const p = new Person()]
• 간접 호출 : call, apply(function 객체의 메서드)등으로 함수를 간접 호출한다. [f.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)

bind : 특정 this에 해당되는 객체를 메서드에 묶어주는 함수이다.

---

콜백함수

함수가 문법적으로 호출되는 것 외에 콜백 함수의 호출이 있다.

콜백 함수는 특정 동작 이후 불려지는 함수를 뜻한다. 보통 다른 함수의 인자로 보내지는 함수를 의미한다.

예시)

function callback(){
    console.log('cb')
}

function myFunc(nmae,cb){
    console.log('name :', name)
    cb(name)
}

myFunc('Danel',callback)

이런 callback 함수 외에 setTimeout(function{...}) 도 콜백함수를 사용한다. 

---

동적바인딩

함수의 호출환경에 따라 this는 동적으로 세팅되고, this가 환경에 따라 바뀌는 것을 동적 바인딩(dynamic binding)이라고 한다.

예시) 

let o = {
    name: "Daniel",
    f1: () => { //화살표 함수
        console.log("[f1] this : ", this)
    },

    f2: function() { //일반 함수
        console.log("[f2] this : ", this)
    },
};

o.f1();
o.f2();

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

12. this는 global 가리킨다.
13. this는 함수 o를 가리킨다.
15. this는 global 가리킨다.
16. this는 global 가리킨다.

 

정리 :

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

---

this 조작하는 경우 

또한, bind, apply, call등으로 this가 가리키는 것을 조작할 수 있다. 

setTimeout은 함수 호출과는 다른 콜백 호출이다.

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

o.printName();
setTimeout(o.printName, 10);
setTimeout(o.printName.bind(o), 20);

08. "내 이름은 Daniel" 이라고 콘솔에 표시된다.
09. "내 이름은 undefined"라고 콘솔에 표시된다.
10. "내 이름은 Daniel"이라고 콘솔에 표시된다.

 

정리 :

• printName 메서드는 bind 함수를 이용해 this 변수가 o를 가리키도록 컨텍스트를 동적 바인딩한다.