[JavaScript] 동적 바인딩 Dynamic Binding

 

 

#1 메서드가 호출되는 상황

1. 직접 호출: 메서드를 직접 호출
2. 메서드 호출: 객체의 메서드를 호출
3. 생성자 호출: 생성자 함수를 호출
4. 간접 호출: call, apply 등으로 간접적 호출

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

fun1()	// 1. 직접 호출

const o = {
	name : 'Minji',
    printName : function() {	// 익명 메서드
    	console.log(this.name) }
    }
}

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

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

const p = new Person('Hani')	// 3. 생성자 호출

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

 

 

#2 동적 바인딩이란?

메서드의 호출 환경에 따라 this는 동적으로 세팅되는 것을 동적 바인딩이라고 한다.

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

 

+) bind 메서드

o.myFunc.bind(p)

위와 같은 코드가 있을 때, myFunc()라는 메서드 내의 this 객체를 bind 메서드의 매개변수 p로 대체한다.

 

화살표 메서드

일반 메서드의 this는 실행 컨텍스트(스택 구조)에서 새롭게 생성된 컨텍스트를 가리키지만,  화살표 메서드의 this는 호출된 함수를 둘러싼 즉, 생성 되었을 때의 실행 컨텍스트를 가리키게 된다.

const o = {
	method() {
    	console.log("context: ", this)	//o
        
        let f1 = function () {
        	colsole.log("[f1] this: ", this)
        }
        let f2 = () => console.log("[f2] this: ", this)	// this가 부모의 컨텍스트를 가리킴
        
        f1()	// global (window)
        f2()	// o
    },
};

o.method()

• 화살표 메서드의 this는 생성 된 이후로 바꿀 수 없다. (bind, apply, call로도 변경 불가능)
• setTimeout 등 this가 대체되는 상황에서 유용하게 사용할 수 있다. (this를 대체해서 사용해야 하는 경우에는 일반 메서드를 사용하면 된다.)