자바스크립트 함수 호출하기, bind()

bind() 함수는 새롭게 바인딩한 함수를 만드는 함수로, 바인딩한 함수는 원본 함수 객체를 감싸는 함수로써, 바인딩한 함수를 호출하면 일반적으로 래핑된 함수가 호출 된다. (ECMAScript 2015의 exotic function object)

// 사용법
Function.bind(thisArg, [arg1, arg2, ...])

• thisArg // this가 가리킬 객체를 지정
• [arg1, arg2 ... ] // 함수의 인자로 전달할 값

이때 첫 번째 인자인 thisArg는 선택옵션으로 값을 전달하지 않아도 되며 null 등을 사용할 수 있다. 그 다음은 함수에 전달 할 인자 값으로 배열 타입으로 전달하게 된다. 이처럼 인자 값을 배열로 전달하는 것은 apply()와 비슷하다.

[생각할 점] call(), apply()와의 차이점은?
거의 동일하게 활용이 가능하지만 함수를 실행하지 않고 함수를 생성한 후 반환하는 점에서 call(), apply()와의 차이점이다.

// 자바스크립트 bind() 예제
mySite = {
  name: 'webisfree',
  getSite: function() {
    return this.name;
  }
}

getSite 이름의 메소드를 호출 하면 실행하면 아래와 같이 나타납니다.

mySite.getSite();

// 출력결과
"webisfree"

다음으로 getYourSite라는 변수를 하나 만들고 여기에 mySite.getSite 메소드를 선언한다.

getYourSite = mySite.getSite;
getYourSite();

 // 출력결과
undefined

실행해보니 결과는 undefined가 나타나게 된다. 즉 함수의 this에는 name이라는 프로퍼티가 존재하지 않으므로 window 객체를 참조하여 값을 반환하기 때문이다.

이제 bind()를 사용하여 this 키워드가 mySite를 가리키도록 한 후 다시 실행해본다.

getMySite = getYourSite.bind(mySite);
getMySite();

// 출력결과
'webisfree'

이번에는 this를 mySite로 가리키도록 bind()를 사용하였기 때문에 'webisfree'를 출력한다. 이와 같이 bind()를 사용하면 this가 어떤 인스턴스를 가리킬 것인지 선택할 수 있다.

var obj = {
    name: 'shpark'
};

function bindTest() {
    console.log(this.name);
}

bindTest(); // undefined 출력

var bindTest2 = bindTest.bind(obj); // bindTest 함수에 obj 객체를 bind

bindTest2(); // obj의 name 값인 shpark 이 표출
 

출처 : https://webisfree.com/2021-04-24/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%A8%EC%88%98%EC%97%90-bind-%EB%A9%94%EC%86%8C%EB%93%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

출처 : https://shplab.tistory.com/entry/Javascript-bind-%ED%95%A8%EC%88%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0 - 박서희연구소