[자바스크립트] bind()

새로운 함수를 생성하고, 받게 되는 첫 인자의 value로 this키워드를 설정. (함수를 객체에 결합하는 것)

bind()에 전달하는 인자 중 첫번재를 제외한 나머지는 this 값과 함께 결합됨 (부분 적용) 

 

 1) thisArg : 바인딩 함수가 대상 함수의 this에 전달되는 값 

 2) arg1, 2 : 대상 함수의 인수 앞에 사용될 인수 

func.bind(thisArg[,arg1[,arg2 [,....] ]])

function f(y) {return this.x + y; } // 결합할 함수 
let o = {x:1}; // 결합될 객체
let g = f.bind(o); // g(x)를 호출하면 o에서 f()를 호출합니다. 
g(2) // 3
let p = {x:10, g}; // g()를 객체의 메서드로 호출 
p.g(2) // 3 : g는 여전히 o에 결합되지 않습니다.

 

1) 바인딩된 함수 생성 

호출 방법과 관계없이 특정 this 값으로 호출되는 함수를 만듦 

객체로부터 메소드를 추출하고, 함수를 호출할 때 원본 객체가 함수의 this로 사용될 것이라 기대함 

그러나, 원본 객체는 손실되기 때문에 바인딩(bind)함수를 사용하면 해결 가능 

this.x = 9;
var module = {
	x :81; 
    getX : function() {return this.x;}
    };
    
    module.getX(); // 81
    
 var retrieveX = module.getX;
 retrieveX(); // 9 반환 : 함수가 전역 스코프에서 호출됨 
 
 // module과 바인딩 된 this가 있는 새로운 함수 생성 
 var boundGetX = retreieveX.bind(moudle);
 boundGetX();

2) 부분 적용함수 

미리 지정된 초기 인수가 있는 함수를 만듦 

초기 인수가 있으면 this 값을 따르고, 바인딩 된 함수에 전달되어서 바인딩된 함수가 호출될 때마다 대상 함수인수 앞에 호출 

function list() {
	return Array.prototype.slice.call(arguments);
    }
    
    var list1 =list(1,2,3); // 배열 생성 
    
    //선행될 인수를 설정해 함수를 생성 
    var ladingThirtysevenList = list.bind(null, 37);
    
    var list2 = leadingThirtysevenList(); // [37]
    
    var list3 = leadingThirtysevenList(1,2,3); // [37, 1, 2, 3]
    
      
      
      
      function addArguments(arg1, arg2) {
        return arg1 + arg2
    }

    var result1 = addArguments(1, 2); // 3

    // 첫 번째 인수를 지정하여 함수를 생성합니다.
    var addThirtySeven = addArguments.bind(null, 37);

    var result2 = addThirtySeven(5); // 37 + 5 = 42

    // 두 번째 인수는 무시됩니다.
    var result3 = addThirtySeven(5, 10); // 37 + 5 = 42

3) setTimeout

window내에서 기본으로 제공되는 객체

function LateBloomer() {
  this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

// 1초 지체 후 bloom 선언
LateBloomer.prototype.bloom = function() {
  window.setTimeout(this.declare.bind(this), 1000);
};

LateBloomer.prototype.declare = function() {
  console.log('I am a beautiful flower with ' +
    this.petalCount + ' petals!');
};

var flower = new LateBloomer();
flower.bloom();
// 1초 뒤, 'declare' 메소드 유발

 

 

 

참고자료 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind