JavaScript - Javascript 에서 bid () 방법의 사용 과 구현

Javascript 에서 bid () 방법의 사용 과 구현
원본 링크:http://blog.liuwanlin.info/javascriptzhong-bindfang-fa-de-shi-xian/
슈퍼 린bind() 방법 을 토론 하기 전에 우 리 는 먼저 문 제 를 살 펴 보 자.

var altwrite = document.write;  
altwrite("hello");  
//1.         
//2.        
//3.bind()      

위의 이 문제 에 대해 답 은 그리 어렵 지 않 습 니 다. 주요 시험 점 은 바로 this 가 가리 키 는 문제 입 니 다. altwrite () 함수 가 this 가 가리 키 는 global 또는 window 대상 을 바 꾸 어 실행 할 때 불법 호출 이상 을 알 립 니 다. 정확 한 방안 은 사용 하 는 것 입 니 다.bind() 방법:

altwrite.bind(document)("hello")

물론 사용 하 셔 도 됩 니 다.call() 방법:

altwrite.call(document, "hello") 

본문의 중점 은 세 번 째 문 제 를 토론 하 는 데 있다.bind() 방법의 실현, 토론 시작bind() 의 실현 전에 우리 가 먼저 보 자.bind() 방법의 사용:
귀속 함수bind() 가장 간단 한 용법 은 함 수 를 만들어 서 이 함 수 를 아무리 호출 해도 같은 this 값 을 가지 게 하 는 것 이다.흔히 볼 수 있 는 오 류 는 위의 예 와 같이 방법 을 대상 에서 꺼 내 서 호출 하고 this 가 원래 의 대상 을 가리 키 기 를 바 랍 니 다.특수 처 리 를 하지 않 으 면, 일반적으로 원래 의 대상 을 잃 게 된다.bind() 방법 을 사용 하면 이 문 제 를 멋 지게 해결 할 수 있다.

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  

편 함수 (부분 함수)
Partial Functions 는 Partial Applications 라 고도 합 니 다. 여기 서 편 함수 에 대한 정 의 를 캡 처 합 니 다.
Partial application can be described as taking a function that accepts some number of arguments, binding values to one or more of those arguments, and returning a new function that only accepts the remaining, un-bound arguments.
이것 은 아주 좋 은 특성 입 니 다. bind() 함수 의 미리 정 의 된 파 라 메 터 를 설정 한 다음 에 호출 할 때 다른 파 라 메 터 를 입력 하면 됩 니 다.

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() this 는 window 나 global 대상 을 가리킨다.클래스 를 사용 할 때 this 지향 클래스 인 스 턴 스 가 필요 하면 bind() this 를 리 셋 함수 에 연결 하여 인 스 턴 스 를 관리 할 수 있 습 니 다.

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 연산 자 를 사용 하여 목표 함수 의 인 스 턴 스 를 구성 하 는 데 적용 된다.바 인 딩 함 수 를 사용 하여 인 스 턴 스 를 구성 할 때 주의: this 는 무시 되 지만 들 어 오 는 매개 변 수 는 여전히 사용 할 수 있 습 니 다.

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 연산 자 를 사용 하여 판단 할 때 true 입 니 다.
지름길bind() 또한 특정한 this 값 이 필요 한 함수 에 지름길 을 만 들 수 있다.
예 를 들 어 하나의 배열 대상 을 진정한 배열 로 바 꾸 려 면 가능 한 예 는 다음 과 같다.
하면, 만약, 만약...bind() 그러면 상황 이 더욱 간단 해진 다.

var slice = Array.prototype.slice;

// ...

slice.call(arguments);  

이루어지다
위의 몇 마디 를 통 해 알 수 있 듯 이 bind() 사용 장면 이 많 지만 bind() 함 수 는 ECMA - 262 5 판 에 만 가입 되 었 다.모든 브 라 우 저 에서 실행 할 수 없 을 수도 있 습 니 다.이것 은 우리 스스로 bind() 함 수 를 실현 해 야 한다.
우선 우 리 는 목표 함수 에 작용 역 을 지정 함으로써 간단하게 실현 할 수 있다 bind() 방법:

var unboundSlice = Array.prototype.slice;  
var slice = Function.prototype.call.bind(unboundSlice);

// ...

slice(arguments);  

함수 코 리 화의 상황 을 고려 하여 우 리 는 더욱 건장 한 것 을 구축 할 수 있다.bind() ：

Function.prototype.bind = function(context){  
  self = this;  //  this，   bind       
  return function(){
      return self.apply(context,arguments);
  };
};

이번 bind() 방법 은 대상 을 귀속 시 킬 수 있 고 귀속 시 전 참 도 지원 합 니 다.
계속, 자바 script 의 함 수 는 구조 함수 로 도 사용 할 수 있 습 니 다. 그러면 바 인 딩 된 함수 가 이런 방식 으로 호출 될 때 상황 이 비교적 미묘 합 니 다. 원형 체인 의 전달 과 관련 되 어야 합 니 다.

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

이것 은 라 는 책 에서 bind() 에 대한 실현 이다. 중간 구조 함수 F 를 설정 하여 바 인 딩 된 함수 와 호출 bind() 의 함 수 를 같은 원형 체인 에 있 게 하고 new 연산 자 로 바 인 딩 된 함 수 를 호출 하 며 돌아 오 는 대상 도 인 스 턴 스 of 를 정상적으로 사용 할 수 있 기 때문에 이것 은 가장 엄밀 한 bind() 실현 이다.
브 라 우 저 에서 bind() 함 수 를 지원 하기 위해 서 는 상기 함 수 를 조금 만 수정 하면 됩 니 다.

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