bind () 메소드를 논의하기 전에 질문을 살펴 보겠습니다.
var altwrite = document.write;
altwrite ( "Hello");
// 1. 위 코드의 문제는 무엇입니까?
// 2. 올바른 작업은 어떻습니까
// 3. bind () 메소드를 구현하는 방법
위의 질문에 대해서는 그 대답이 그리 어렵지 않습니다. 주요 테스트 포인트는 이것에 의해 지적 된 문제입니다. altwrite () 함수는이 포인트를 글로벌 또는 창 객체로 변경하여 실행 중에 비정상적인 호출을 유발합니다. 올바른 솔루션은 bind () 메소드를 사용하는 것입니다.
altwrite.bind (문서) ( "Hello")
물론 Call () 메소드를 사용할 수도 있습니다.
altwrite.call (문서, "hello")
이 기사의 초점은 세 번째 이슈에서 bind () 메소드의 구현에 대해 논의하는 것입니다. bind ()의 구현에 대해 논의하기 전에 bind () 메소드의 사용을 살펴 보겠습니다.
바인딩 기능
BINT ()를 사용하는 가장 쉬운 방법은 함수를 작성하여 기능이 호출되는 방식에 관계없이 동일한 값을 갖도록하는 것입니다. 일반적인 오류는 위의 예와 같습니다. 메소드에서 메소드를 꺼내서 호출 한 다음 원래 객체를 가리키기를 원합니다. 특별한 치료가 완료되지 않으면 원래 물체는 일반적으로 손실됩니다. bind () 메소드를 사용 하여이 문제를 아름답게 해결할 수 있습니다.
this.num = 9; var myModule = {num : 81, getNum : function () {return this.num; }}; module.getnum (); // 81var getnum = module.getnum; getnum (); // 9,이 예에서 "이것은"글로벌 객체를 가리키기 때문에 // 모듈에 바인딩 된 함수를 생성 var boundgetnum = getNum.bind (module); boundgetnum (); // 81부분 기능
부분 기능을 부분 응용 프로그램이라고도합니다. 다음은 부분 기능에 대한 정의 섹션입니다.
부분 적용은 다수의 인수를 받아들이는 함수를 취하고 해당 인수 중 하나 이상에 값을 바인딩하고 나머지의 비 중점 인수 만 받아들이는 새로운 기능을 반환하는 것으로 설명 될 수 있습니다.
이것은 좋은 기능입니다. bind ()를 사용하여 함수의 사전 정의 된 매개 변수를 설정 한 다음 호출 할 때 다른 매개 변수를 전달합니다.
함수 list () {return array.prototype.slice.call (arguments);} var list1 = list (1, 2, 3); // [1, 2, 3] // 사전 정의 된 매개 변수 37VAR TheadThirtySevenList = list.bind (undrefined, 37); var list2 = leadingThirtysevenList (); // [37] var list3 = LeadingThirtysevenlist (1, 2, 3); // [37, 1, 2, 3]settimeout과 함께 사용하십시오
일반적 으로이 settimeout ()는 창 또는 전역 객체를 가리 킵니다. 클래스 메소드를 사용하는 경우 클래스 인스턴스를 가리켜야합니다. BAND ()을 사용하여 콜백 함수에 바인딩하여 인스턴스를 관리 할 수 있습니다.
function bloomer () {this.petalCount = math.ceil (math.random () * 12) + 1;} // 선언 함수 bloomer.prototype.bloom = function () {window.settimeout (this.declare.bind (this);};};};}; bloomer.prototype.declare = function () {has this.log ( 'i HAS. 꽃잎! ');};참고 : 위의 방법은 이벤트 처리 기능 및 SetInterval 메소드에도 사용될 수 있습니다.
생성자로서의 결합
BIND 함수는 또한 새 연산자를 사용하여 목적 함수의 인스턴스를 구성하는 데 적합합니다. 바인딩 함수를 사용하여 인스턴스를 구성 할 때 참고 : 이는 무시되지만 전달 된 매개 변수는 여전히 사용 가능합니다.
함수점 (x, y) {this.x = x; this.y = y;} point.prototype.tostring = function () {return this.x + ',' + this.y; }; var p = 새로운 포인트 (1, 2); p.tostring (); // '1,2'var emptyobj = {}; var yaxispoint = point.bind (emptyobj, 0/*x*/); // 구현의 예는 지원되지 않습니다. // Native Bind Supports : var yaxispoint = point.bind (null, 0/*x*/); var axispoint = 새로운 yaxispoint (5); axispoint.tostring (); // '0,5'AXISPOINT 인스턴스 포인트; // yaxispoint의 true axispoint 인스턴스; // True New Point (17, 42) yaxispoint의 인스턴스; // 진실위의 예에서 Point 및 YaxisPoint는 프로토 타입을 공유하므로 인스턴스 연산자를 사용하여 판단 할 때는 사실입니다.
지름길
bind ()는 또한 특정 값이 필요한 함수에 대한 바로 가기를 만들 수 있습니다.
예를 들어, 클래스의 배열 객체를 실제 배열로 변환하려면 가능한 예제는 다음과 같습니다.
var slice = array.prototype.slice; // ... slice.call (인수);
bind ()를 사용하면 상황이 더 쉬워집니다.
var unboundslice = array.prototype.slice; var slice = function.prototype.call.bind (unboundslice); // ... 슬라이스 (인수);
성취하다
위의 섹션에서는 BIND ()가 많은 사용 시나리오가 있음을 알 수 있지만 Bind () 함수는 5 번째 버전의 ECMA-262에 추가되었습니다. 모든 브라우저에서 실행되지 않을 수 있습니다. 이를 위해서는 BIND () 기능을 스스로 구현해야합니다.
먼저, 목표 함수에 스코프를 지정하여 BIND () 메소드를 간단히 구현할 수 있습니다.
function.prototype.bind = function (context) {self = this; // 이것을 저장, 즉 바인드 메소드를 호출하는 목적 함수는 function () {return self.Apply (컨텍스트, 인수); };};함수의 카레를 고려하여보다 강력한 bind ()를 구축 할 수 있습니다.
function.prototype.bind = function (context) {var args = array.prototype.slice.call (arguments, 1), self = this; return function () {var innerargs = array.prototype.slice.call (인수); var finalargs = args.concat (내부); self.Apply (Context, FinalArgs); };};이번에는 bind () 메소드는 물체를 바인딩 할 수 있으며 바인딩 동안 전달 매개 변수를 지원합니다.
계속, JavaScript 함수는 생성자로도 사용할 수 있습니다. 이러한 방식으로 바운드 기능을 호출하면 상황이 더 미묘하며 프로토 타입 체인의 통과에 관여해야합니다.
function.prototype.bind = function (context) {var args = array.prototype.slice (arguments, 1), f = function () {}, self = this, bound = function () {var innerargs = array.prototype.slice.call (Arguments); var finalargs = args.concat (내부); Self.Apply를 반환합니다 ((이 인스턴스 F? this : Context), FinalArgs); }; f. prototype = self.prototype; bound.prototype = new f (); 반환 바운드;};이것은 "JavaScript Web Application"에서 bind ()의 구현입니다. 릴레이 생성자 F를 설정함으로써 바운드 함수는 함수 호출 bind ()와 동일한 프로토 타입 체인에 있습니다. 새 연산자를 사용하여 바운드 함수를 호출하면 반환 된 객체는 일반적으로 인스턴스를 사용할 수도 있습니다. 따라서 이것은 BIND ()의 가장 엄격한 구현입니다.
브라우저에서 bind () 함수를 지원하려면 위의 기능을 약간 수정하면됩니다.
function.prototype.bind = function (othis) {if (type this! == "function") {Throw New TypeError ( "function.prototype.bind- 바인딩하려는 것은 호출 할 수 없습니다"); } var aargs = array.prototype.slice.call (Arguments, 1), ftobind = this, fnop = function () {}, fbound = function () {return ftobind.apply (이 인스턴스 fnop && othis? }; fnop.prototype = this.prototype; fbound.prototype = new fnop (); 반환 fbound; };JavaScript에서 BIND () 메소드의 사용 및 구현에 대한 위의 간단한 분석은 내가 공유하는 모든 내용입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.