Javascript_javascript 기술에서 바인딩() 메소드의 사용 및 구현에 대한 간략한 분석

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 + ' 朵花瓣!');
};

참고: 위 메서드는 이벤트 처리 함수 및 setInterval 메서드에도 사용할 수 있습니다.

함수를 생성자로 바인딩

바운드 함수는 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 

위의 예에서 Point와 YAxisPoint는 프로토타입을 공유하므로 instanceof 연산자를 사용할 때에도 마찬가지입니다.

바로가기

bind()는 특정 this 값이 필요한 함수에 대한 바로가기를 만들 수도 있습니다.

예를 들어 배열형 객체를 실제 배열로 변환하려는 경우 가능한 예는 다음과 같습니다.

var slice = Array.prototype.slice;

// ...

slice.call(arguments); 

bind()를 사용하면 상황이 더 간단해집니다.

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;
};

이것은 "JavaScript Web Application"이라는 책에 나오는 바인드()의 구현입니다. 전송 생성자 F를 설정하면 바인딩된 함수와 바인드()를 호출하는 함수가 동일한 프로토타입 체인에 있고 새로운 작업이 수행됩니다. 연산자가 바인딩된 함수를 호출하는 데 사용되며 반환된 개체도 일반적으로 인스턴스of를 사용할 수 있으므로 이것이 가장 엄격한 바인드() 구현입니다.

브라우저에서 바인딩() 기능을 지원하려면 위 기능을 약간만 수정하면 됩니다.

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;
 };

위의 Javascript에서의 바인딩() 메소드 사용 및 구현에 대한 간략한 분석은 모두 편집자가 공유한 내용이므로 참고가 되기를 바라며, Script Home에 많은 지원 부탁드립니다.