ECMAScript5(ES5)의 바인드 메소드 사용 요약_기본지식

저는 전화, 신청 등 이와 관련된 사항에 대해 항상 모호했습니다. 이번에 바인드에 관련된 필기시험 문제를 보고 참고삼아 이 글을 썼습니다.

　바인드는 호출 및 적용과 마찬가지로 컨텍스트가 가리키는 this를 변경할 수 있습니다. 차이점은 호출은 Apply와 마찬가지로 메소드를 직접 참조하는 반면, 바인드는 이를 바인딩한 후 메소드를 반환하지만 내부 코어는 여전히 Apply입니다.

예제를 직접 살펴보세요.

코드 복사 코드는 다음과 같습니다.

var obj = {
답: 1,
b: 2,
getCount: 함수(c, d) {
이것을 돌려주세요.a this.b c d;
}
};

window.a = window.b = 0;
console.log(obj.getCount(3, 4)) // 10
var func = obj.getCount;
console.log(func(3, 4)) // 7

왜 이런 일이 일어나는 걸까요? 왜냐하면 func의 맥락에서 이것은 window이기 때문입니다! 바인드의 존재는 원하는 값을 얻기 위해 이 포인터를 변경하는 것입니다.

코드 복사 코드는 다음과 같습니다.

var obj = {
답: 1,
b: 2,
getCount: 함수(c, d) {
이것을 돌려주세요.a this.b c d;
}
};

window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4)) // 10

Bind는 function의 함수 확장 방식으로, func 내부에서 this 포인터(obj)를 rebind하는 코드인데, ie6~8과 호환되지 않습니다.

코드 복사 코드는 다음과 같습니다.

var obj = {
답: 1,
b: 2,
getCount: 함수(c, d) {
이것을 돌려주세요.a this.b c d;
}
};

Function.prototype.bind = Function.prototype.bind || 함수(컨텍스트) {
var that = this;
반환 함수() {
// console.log(arguments); // 콘솔 [3,4] if ie<6-8>
that.apply(컨텍스트, 인수)를 반환합니다.

}
}
window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4)) // 10

사실 제 생각에는 바인드의 핵심은 실행되지 않은 메소드를 반환하는 것입니다. Apply를 사용하거나 직접 호출하는 경우:

코드 복사 코드는 다음과 같습니다.

var ans = obj.getCount.apply(obj, [3, 4]);
console.log(ans); // 10

축약된 func 함수 생성자를 사용하는 것은 불가능하므로 바인딩을 사용하여 이 포인터를 전달한 다음 실행되지 않은 메서드를 반환합니다. 구현은 매우 영리합니다.