과거에는 self=this 또는 that=this 등을 직접 설정할 수도 있었는데, 물론 작동하겠지만 Function.prototype.bind()를 사용하는 것이 더 좋고 더 전문적으로 보일 것입니다.
다음은 간단한 예입니다.
var myObj = {
SpecialFunction: 함수() {
},
anotherSpecialFunction: 함수() {
},
getAsyncData: 함수(cb) {
cb();
},
렌더링: function () {
var that = this;
this.getAsyncData(function () {
that.specialFunction();
that.anotherSpecialFunction();
});
}
};
myObj.render();
이 예에서는 myObj 컨텍스트를 유지하기 위해 that=this 변수가 설정되어 있는데 이는 가능하지만 Function .prototype이 사용되지 않습니다. .bind()가 더 깔끔해 보입니다.
렌더링: 함수 () {
this.getAsyncData(function () {
this.specialFunction();
this.anotherSpecialFunction();
}.bind(this));
}
.bind()를 호출하면 새 함수가 생성되고 이를 이 함수에 전달하기만 하면 됩니다. .bind()를 구현하는 코드는 대략 다음과 같습니다.
Function.prototype .bind = 함수(범위) {
var fn = this;
return function() {
return fn.apply(scope);
};
}
Function.prototype.bind()를 사용하는 간단한 예를 살펴보세요.
var foo = {
x: 3
};
var bar = function(){
console.log(this.x);
};
bar(); // 정의되지 않음
varboundFunc = bar.bind(foo);
boundFunc() // 3
정말 유용하지 않나요! 안타깝게도 IE 브라우저 IE8 이하에서는 Function.prototype.bind()를 지원하지 않습니다. 지원되는 브라우저는 Chrome 7, Firefox 4.0, IE 9, Opera 11.60, Safari 5.1.4입니다. IE 8/7/6 등의 브라우저에서는 지원하지 않지만 Mozilla 개발팀은 이전 버전의 IE 브라우저에 대해 유사한 기능을 갖춘 기능을 작성했습니다. 코드는 다음과 같습니다.
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
// ECMAScript 5 내부 IsCallable 함수에 가장 가까운 것
throw new TypeError("Function.prototype.bind - 바인딩하려는 항목은 호출할 수 없습니다.");
}
var aArgs = Array .prototype.slice.call(인수, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(fNOP의 이 인스턴스 && o이
? 이
: o이
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = 이. 프로토타입;
fBound.prototype = new fNOP();
return fBound;
};
}