함수 바인딩 call, apply, bind

함수 바인딩

Javascript는 함수가 어떻게 호출 되었는지에 따라 this 객체가 동적으로 할당된다. 크게 함수 호출 방식은 함수, 메소드, 생성자 함수, call/apply/bind 호출이 있다. Javascript는 렉시컬 스코프를 따라 함수의 상위 스코프를 결정한다. 글로벌 영역에 함수 호출을 예로 들면 this는 상위 스코프인 전역 객체(Global Object)를 의미한다. Browser-side에서는 window, Service-side에서는 global 객체가 전역 객체가 된다.

 

var name = 'john';

function greet() {
  console.log(`hello, ${this.name}`); // this: window
}
greet(); // 'hello, john'

var object = {
  name: 'paul',
  greet: greet, // this: object
}
object.greet(); // 'hello, paul'

 

동적 스코프(Dynamic scope) / 렉시컬 스코프(Lexical scope)

프로그래밍 언어에서 함수의 상위 스코프를 결정하는 두 가지 방식, 동적 스코프와 렉시컬 스코프가 있다. 동적 스코프는 함수가 어디서 호출되었는지, 렉시컬 스코프는 함수가 어디서 선언되었는지에 따라 상위 스코프가 결정된다.

 

this 명시적 바인딩 

this에 바인딩될 객체는 함수의 호출 패턴에 의해 결정되지만, 암묵적 바인딩 외에 특정 객체에 명시적으로 바인딩하는 방법인 call, apply, bind가 있다. 모두 Function.prototype 객체의 메소드이고, 명시적으로 this 객체를 바인딩 하여 call, apply는 함수를 호출하고 bind는 bound 함수를 리턴하는 기능을 한다.

 

var name = 'john';

function greet(adj) {
  console.log(`hello, ${adj} ${this.name}`);
}

var object = {
  name: 'paul',
  greet: greet,
}

greet('origin'); // 'hello, origin john'
greet.call(object, 'call'); // 'hello, call paul'
greet.apply(object, ['apply']); // 'hello, apply paul'

var bound = greet.bind(object);
bound('bind'); // 'hello, bind paul'

 

this | PoiemaWeb