본문 바로가기
javaScript/J Query & 스크립트

[javaScript] bind 메소드

by mooyou 2022. 5. 14.
728x90
300x250

bind

bind() 메소드는 호출될 때 this 키워드가 제공된 값으로 설정되는 새로운 함수를 반환한다.

 

syntax

bind(thisArg, arg1, ... , argN)

 

 

  • thisArg : this가 가리킬 객체를 지정
  •  arg1, ... , argN : 함수에 전달할 인자 값

thisArg는 전달하지 않고 null을 사용할 수도 있다.

그 다음 전달 인자 값은 배열 타입으로 전달한다. 인자를 배열로 전달하는 것을 보면 apply와 비슷해 보이지만 bind는 함수를 호출하지 않고 생성하고 반환하는 점에서 차이점이 있다.

 

bind 메소드 사용 예시

yourName = {
    name:'jone',
    callName: function() {
        return this.name;
    }
}

yourName.callName(); //'jone' 호출

위에 예제를 보면 yourName의 callName() 메소드를 호출하면 this.name을 리턴한다.

여기서 this는 yourName을 가르키고 name 프로퍼티 값인 jone이 호출된다.

 

 

그럼 아래와 같이 yourName.callName;을 callyou변수에 넣고 호출하면 어떻게 될까?

callyou = yourName.callName;
callyou();

여기서 this는 window 객체를 나타내고 윈도우 객체에 name이 없기 때문에 가져올 수있는 값이 없다.

 

이럴 경우 bind 함수를 사용해서 해결할 수 있다.

you = callyou.bind(yourName);
you(); // 'jone' 호출

위와 같이 bind를 사용하여 this 키워드가 yourName을 가리키게 하면 제대로 나오는걸 확인할 수 있다.

이렇게 this가 어떤 인스턴스를 가르킬지 선택할 수 있다.

728x90
반응형

댓글