JavaScript 의 바 인 딩 방법 bid

4831 단어 JavaScript
bind 문법
fun. bind (this, arg 1, arg 2,...) JavaScript 함수 호출 bind 방법 은 새로운 방법 으로 돌아 갑 니 다. 새로운 방법의 this 는 전송 대상 을 연결 합 니 다.
bind 응용 실례
바 인 딩 함수 만 들 기
a = 1;
var module = {
    a : 2,
    getA : function () {
        return this.a;
    }
}
console.log(module.getA()); //2
var windowfun = module.getA;
var modulefun = windowfun.bind(module);
console.log(windowfun()); //1
console.log(modulefun()); //2

위의 코드 와 같이 우 리 는 module 에서 a 값 을 되 돌려 주 는 방법 을 정 의 했 습 니 다. 분명히 우 리 는 module. getA () 를 직접 호출 하면 module 의 부분 변 수 를 a 로 되 돌려 줍 니 다.그러나 우 리 는 module 의 getA 방법 을 꺼 내 서 windowfun 에 부여 합 니 다. 이때 windowfun 의 this 는 전 체 를 가리 키 기 때문에 windowfun 을 호출 하면 전체 변수 a 이 고 값 은 1 입 니 다.현재 우 리 는 windowfun 의 바 인 딩 함수 bid 를 호출 하고 매개 변수 module 을 전송 하여 새로운 함수 로 modulefun 에 부여 합 니 다. 그러면 이때 modulefun 의 this 는 module 를 바 인 딩 했 습 니 다. 자 연 스 럽 게 얻 은 것 은 부분 변수 a 입 니 다. 2 입 니 다.
함수 설정 매개 변수
function list() {
    return Array.prototype.slice.call(arguments);
}
console.log(list(1,2,3));           //[1,2,3]
var list1 = list.bind(undefined,4); //[4]
console.log(list1(1,2,3));          //[4,1,2,3]

먼저 이 Array. prototype. slice. call 함 수 를 말씀 드 리 겠 습 니 다. 이 함수 의 역할 은 클래스 배열 을 진정한 배열 로 바 꾸 는 것 입 니 다.length 속성 이 있 는 비 배열 대상 에 대해 서 는 slice 방법 이 없 기 때문에 상기 코드 는 Array 의 원형 에서 slice 를 호출 하 는 call 방법 은 "list. slice ()" 를 호출 하 는 것 과 같 습 니 다.
var ls = {length:2, 0:'first', 1:'second'};
console.log(Array.prototype.slice.call(ls));
//[ 'first', 'second' ]

그것 의 효 과 는 대략 이렇다.bid () 함수 의 첫 번 째 매개 변 수 는 this 가 연결 하고 자 하 는 대상 입 니 다. 그러면 다음 매개 변 수 는 새로운 반환 방법의 미리 설 정 된 매개 변 수 를 전달 하 는 것 입 니 다. 우 리 는 4 에 들 어가 지 않 고 매개 변 수 를 직접 호출 하면 [4] 입 니 다. 다른 매개 변 수 는 [4, 1, 2, 3] 입 니 다.
setTimeout 함수
function Fun1() {
    this.name = 1;
}
Fun1.prototype.fun2 = function () {
    setTimeout(this.fun3,1000);             //name:undefined
    setTimeout(this.fun3.bind(this),1000);  //name:1
}
Fun1.prototype.fun3 = function () {
    console.log('name: '+ this.name);
}
var fun = new Fun1();
fun.fun2();

기본적으로 setTimeout 함 수 를 호출 할 때 this 는 전역 을 가리 키 기 때문에 첫 번 째 setTimeout 은 undefined 로 출력 합 니 다. name 이 전역 에 정의 되 지 않 았 기 때 문 입 니 다.this. fun 3 을 현재 대상 에 연결 하면 출력 이 대상 의 부분 변수 name 이 고 값 은 1 입 니 다.

좋은 웹페이지 즐겨찾기