JS의 Function.prototype.bind() 메소드에 대한 심층적인 이해

머리말

함수 바인딩은 아마도 JavaScript를 사용할 때 모든 사람이 가장 주의를 기울이지 않는 지점일 것입니다. 그러나 이를 다른 함수에서 해결하는 방법에 대한 솔루션이 필요하다는 것을 깨달았을 때 이 컨텍스트를 유지할 때 무엇을 해야 할까요? 실제로 필요한 것은 Function.prototype.bind()이지만, 아직 이를 깨닫지 못할 수도 있습니다.

이 문제가 처음 발생하면 컨텍스트를 변경한 후에도 계속 참조할 수 있도록 이를 변수로 설정하고 싶을 수도 있습니다.

1. 바인딩 구문

bind() 메서드의 주요 기능은 함수를 객체에 바인딩하는 것입니다. 함수 본문의 this 개체 값은 바인딩() 함수에 전달된 값에 바인딩됩니다.

1.1 정의

bind()는 다음과 같이 정의됩니다.

bind() 메소드는 호출 시 this 키워드가 제공된 value , 새 함수가 호출될 때 제공되는 인수 앞에 주어진 일련의 인수가 있습니다.

bind() 함수는 새 함수(바운드 함수라고 함), 새 함수 및 호출된 함수(바운드 함수)를 생성합니다. 함수 목적 함수)는 동일한 함수 본문을 갖습니다. 대상 함수가 호출되면 this 값은 바인딩()의 첫 번째 매개변수에 바인딩되며 재정의될 수 없습니다.

1.2 원리

다음 코드를 사용하여 바인딩()의 원리를 시뮬레이션할 수 있습니다.

Function.prototype.bind = function(context) {
 var self = this; // 保存原函数
 return function() { // 返回一个新函数
  return self.apply(context, arguments); // 执行新函数时，将传入的上下文context作为新函数的this
 }
}

1.3 구문

Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])

2 . 바인드 시나리오 적용

2.1 객체 상속 구현

var A = function(name) {
 this.name = name;
}
 
var B = function() {
 A.bind(this, arguments);
}
 
B.prototype.getName = function() {
 return this.name;
}
 
var b = new B("hello");
console.log(b.getName()); // "hello"

2.2 이벤트 처리

var paint = {
 color: "red",
 count: 0,
 updateCount: function() {
  this.count++;
  console.log(this.count);
 }
};
 
// 事件处理函数绑定的错误方法：
document.querySelector('button')
 .addEventListener('click', paint.updateCount); // paint.updateCount函数的this指向变成了该DOM对象
 
// 事件处理函数绑定的正确方法：
document.querySelector('button')
 .addEventListener('click', paint.updateCount.bind(paint)); // paint.updateCount函数的this指向变成了paint

2.3 시간 간격 기능

var notify = {
 text: "Hello World！",
 beforeRender: function() {
  alert(this.text);
 },
 render: function() {
 
  // 错误方法：
  setTimeout(this.beforeRender, 0); // undefined
 
  // 正确方法：
  setTimeout(this.beforeRender.bind(this), 0); // "Hello World！"
 }
};
 
notify.render();

2.4 Borrowing Array의 네이티브 메소드

var a = {};
Array.prototype.push.bind(a, "hello", "world")();
 
console.log(a); // "hello", "world"

3. 바인드() 메소드의 브라우저 호환성

4. 바인드() 메소드의 호환성 작성 방법

if (!Function.prototype.bind) {
 Function.prototype.bind = function() {
  var self = this, // 保存原函数
   context = [].shift.call(arguments), // 需要绑定的this上下文
   args = [].slice.call(arguments); // 剩余的参数转成数组
  return function() { // 返回一个新函数
   // 执行新函数时，将传入的上下文context作为新函数的this
   // 并且组合两次分别传入的参数，作为新函数的参数
   return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
  }
 };
}

5. 바인딩 메서드와 호출/적용 메서드의 차이점

공통점:

둘 다 함수 실행 컨텍스트를 변경할 수 있습니다. ;

차이점:

bind: 함수를 즉시 실행하지 않으며 일반적으로 비동기 호출 및 이벤트에 사용됩니다. 호출/적용: 함수를 즉시 실행합니다.

요약

자, 이것이 이 글의 전체 내용입니다. 이 글의 내용이 Javascript를 배우거나 사용하는 모든 사람에게 도움이 되기를 바랍니다. 소통하라는 메시지.

JS의 Function.prototype.bind() 메소드와 관련 글에 대한 더 자세한 이해를 원하시면 PHP 중국어 홈페이지를 주목해주세요!