js bind()

bind()

● js 함수 호출 시에 사용할 수 있는 함수

● bind() 사용 시 새로운 함수를 반환

● call(), apply()처럼 this를 지정할 수도 있고 또한 원하는 인자를 전달할 수도 있다.

 

문법

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

● thisArg - this가 가리킬 객체를 지정

● setTimeout 내에 콜백 함수를 만들 때, thisArg로 전달된 원시 값은 객체로 변환

● [arg1, arg2 ...] : 함수의 인자로 전달되는 값

 

예제

바인딩된 함수 생성

● bind()의 가장 간단한 사용법은 호출 방법과 관계없이 특정 this 값으로 호출되는 함수를 만드는 것이다.

● 초보들의 흔한 실수는 객체로부터 메서드를 추출한 뒤 그 함수를 추출할 때, 원본 객체가 그 함수의 this로 사용될 것이라고 기대하는 것이다.

  ex) 콜백 기반 코드에서 해당 메서드 사용

● 그러나, 특별한 조치가 없으면 대부분의 경우 원본 객체는 손실된다. 원본 객체가 바인딩되는 함수를 생성하면, 이러한 문제를 해결할 수 없다.

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

 

 

...

 

---

출처

[JavaScript] bind() (velog.io)

[JavaScript] bind()

[Javascript] 자바스크립트 js .bind() 함수 사용법 및 예제 정리 (tistory.com)

[Javascript] 자바스크립트 js .bind() 함수 사용법 및 예제 정리

Function.prototype.bind() - JavaScript | MDN (mozilla.org)