> 웹 프론트엔드 > JS 튜토리얼 > JavaScript_기본 지식 중 프로토타입.bind() 메소드 소개

JavaScript_기본 지식 중 프로토타입.bind() 메소드 소개

WBOY
풀어 주다: 2016-05-16 16:53:20
원래의
1243명이 탐색했습니다.

과거에는 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;
  };
}

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿