bind() 메서드를 논의하기 전에 질문을 살펴보겠습니다.
var altwrite = document.write
altwrite("안녕하세요")
//1. 위 코드에 어떤 문제가 있나요
//2.올바른 연산은 무엇인가요
//3.bind() 메소드 구현 방법
위 질문에 대한 대답은 그리 어렵지 않습니다. 주요 테스트 포인트는 이것이 가리키는 문제입니다. altwrite() 함수는 이 지점을 전역 또는 창 개체로 변경하여 도중에 불법 호출 예외가 발생합니다. 올바른 해결책은 다음과 같이 바인딩() 메서드를 사용하는 것입니다.
altwrite.bind(문서)("안녕하세요")
물론 call() 메소드를 사용할 수도 있습니다:
altwrite.call(document, "hello")
이 글의 초점은 세 번째 문제인 바인딩() 메소드 구현에 대해 논의하는 것입니다.
바인딩()의 가장 간단한 사용법은 함수가 어떻게 호출되든 동일한 this 값을 갖도록 함수를 만드는 것입니다. 일반적인 실수는 위의 예와 같이 객체에서 메서드를 가져온 다음 호출하여 이것이 원래 객체를 가리킬 것이라고 기대하는 것입니다. 특별한 처리가 수행되지 않으면 일반적으로 원본 개체가 손실됩니다. 바인딩() 메서드를 사용하면 이 문제를 훌륭하게 해결할 수 있습니다.
this.num = 9; var mymodule = { num: 81, getNum: function() { return this.num; } }; module.getNum(); // 81 var getNum = module.getNum; getNum(); // 9, 因为在这个例子中,"this"指向全局对象 // 创建一个'this'绑定到module的函数 var boundGetNum = getNum.bind(module); boundGetNum(); // 81
일부 기능
부분 함수는 부분 애플리케이션이라고도 합니다. 부분 함수에 대한 정의는 다음과 같습니다.일부 적용은 일부 인수를 허용하는 함수를 취하고, 해당 인수 중 하나 이상에 값을 바인딩하고, 바인딩되지 않은 나머지 인수만 허용하는 새 함수를 반환하는 것으로 설명할 수 있습니다.
이것은 매우 좋은 기능입니다. 바인딩()을 사용하여 함수의 사전 정의된 매개변수를 설정한 다음 호출할 때 다른 매개변수를 전달합니다.
function list() { return Array.prototype.slice.call(arguments); } var list1 = list(1, 2, 3); // [1, 2, 3] // 预定义参数37 var leadingThirtysevenList = list.bind(undefined, 37); var list2 = leadingThirtysevenList(); // [37] var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
setTimeout과 함께 사용
일반적으로 setTimeout()의 이는 창이나 전역 객체를 가리킵니다. 클래스 메서드를 사용할 때 클래스 인스턴스를 가리켜야 하는 경우에는 바인딩()을 사용하여 이를 콜백 함수에 바인딩하여 인스턴스를 관리할 수 있습니다.
function Bloomer() { this.petalCount = Math.ceil(Math.random() * 12) + 1; } // 1秒后调用declare函数 Bloomer.prototype.bloom = function() { window.setTimeout(this.declare.bind(this), 1000); }; Bloomer.prototype.declare = function() { console.log('我有 ' + this.petalCount + ' 朵花瓣!'); };
함수를 생성자로 바인딩
바운드 함수는 new 연산자를 사용하여 대상 함수의 인스턴스를 구성하는 데에도 적합합니다. 바인딩된 함수를 사용하여 인스턴스를 생성하는 경우 참고: 이는 무시되지만 전달된 매개변수는 계속 사용할 수 있습니다.
function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function() { return this.x + ',' + this.y; }; var p = new Point(1, 2); p.toString(); // '1,2' var emptyObj = {}; var YAxisPoint = Point.bind(emptyObj, 0/*x*/); // 实现中的例子不支持, // 原生bind支持: var YAxisPoint = Point.bind(null, 0/*x*/); var axisPoint = new YAxisPoint(5); axisPoint.toString(); // '0,5' axisPoint instanceof Point; // true axisPoint instanceof YAxisPoint; // true new Point(17, 42) instanceof YAxisPoint; // true
바로가기
bind()는 특정 this 값이 필요한 함수에 대한 바로가기를 만들 수도 있습니다.
예를 들어 배열형 객체를 실제 배열로 변환하려는 경우 가능한 예는 다음과 같습니다.
var slice = Array.prototype.slice; // ... slice.call(arguments);
var unboundSlice = Array.prototype.slice; var slice = Function.prototype.call.bind(unboundSlice); // ... slice(arguments);
업적
위 섹션에서 볼 수 있는 바인드()에는 다양한 사용 시나리오가 있지만, 바인딩() 기능은 ECMA-262 5판에만 추가되었으며 일부 브라우저에서는 실행되지 않을 수 있습니다. 이를 위해서는 우리가 직접 bin() 함수를 구현해야 합니다.먼저 대상 함수의 범위를 지정하여 간단히 바인딩() 메서드를 구현할 수 있습니다.
Function.prototype.bind = function(context){ self = this; //保存this,即调用bind方法的目标函数 return function(){ return self.apply(context,arguments); }; };
Function.prototype.bind = function(context){ var args = Array.prototype.slice.call(arguments, 1), self = this; return function(){ var innerArgs = Array.prototype.slice.call(arguments); var finalArgs = args.concat(innerArgs); return self.apply(context,finalArgs); }; };
계속하세요. 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(innerArgs); return self.apply((this instanceof F ? this : context), finalArgs); }; F.prototype = self.prototype; bound.prototype = new F(); return bound; };
브라우저에서 바인딩() 기능을 지원하려면 위 기능을 약간만 수정하면 됩니다.
Function.prototype.bind = function (oThis) { if (typeof this !== "function") { throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); } var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, fNOP = function () {}, fBound = function () { return fToBind.apply( this instanceof fNOP && oThis ? this : oThis || window, aArgs.concat(Array.prototype.slice.call(arguments)) ); }; fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound; };