JavaScript 바인드

bind()는 javascript function prototye에 내장된 함수중 하나로 사용자가 고정시키고자 하는 인자를 bind() 함수를 호출할 때 인자로 넘겨주고 반환받은 함수를 호출하면서 나머지 가변 인자를 넣어줄 수 있다.

 

// 내장된 bind 함수의 기본적인 polyfill 
Function .prototype.mybind = function (context) {
  let fn = this; 
  return function () {
      fn.call (context)
  }
};

 

bind()함수의 기본 구현은 아래와 같습니다.

let basic = {
  'name': 'shyam',
  'age': 24
};

function callMe(city) {
  console.log('Hi! my name is ' + this.name + ' and my age is ' + this.age + ' and my city is ' + arguments[0] + ' and state is ' + arguments[1]);
}
let callBinded = callMe.bind(basic, 'jammu');
callBinded('j&k'):

// Hi! my name is shyam and my age is 24 and my city is jammu and state is j&k

보시다시피 callMe는 bind 함수를 통해 arguments 객체의 context를 얻었으며 인수는 callMe 함수와 callBinded 함수를 모두 형성합니다.

 

bind()의 가장 간단한 사용법은 호출 방법과 상관없이 특정 this값으로 호출되는 함수를 만드는 것입니다. bind()를 사용하는 이유는 객체로부터 메소드를 추출한 뒤 그 함수를 호출할 때, 원본 객체가 그 함수의 this로 사용하기 위해서입니다. 

this.x = 9;
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX();
// 9 반환 - 함수가 전역 스코프에서 호출됐음

// module과 바인딩된 'this'가 있는 새로운 함수 생성
// 신입 프로그래머는 전역 변수 x와
// module의 속성 x를 혼동할 수 있음
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81