함수의 바인딩() 예제에 대한 자세한 설명

머리말

bind()는 수많은 매개변수를 허용합니다. 첫 번째 매개변수는 생성되는 새 함수의 이 지점입니다. 예를 들어, 호출되는 위치에 상관없이 이 새 함수에서 창을 전달합니다. 이 함수는 창을 가리키며 이 새 함수의 매개변수는 원래 매개변수에 더해 바인딩()의 두 번째, 세 번째, 네 번째...n번째 매개변수입니다. (아, 나도 헷갈린다)

예제 소개

chesnuts를 보면 더 쉽게 이해할 수 있다.

여기서 우리가 윈도우 객체 아래에서retrieveX를 호출하면 결과는 윈도우 아래의 x여야 한다는 것이 분명합니다. 우리는 모듈 객체를retrieveX의 this에 바인딩하고, 어디에서 호출되든 문제는 해결됩니다. 모두 모듈 객체를 가리킵니다.

this.x = 9; 
var module = {
 x: 81,
 getX: function() { return this.x; }
};
 
module.getX(); // 返回 81
 
var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域
 
// 创建一个新函数，将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

바인드()에는 다른 매개변수도 있습니다. 처음으로 바인딩()을 접하는 친구들은 위의 정의를 보면 혼란스러울 것이라고 생각합니다.

예를 들어 보겠습니다.

목록 함수는 전달된 각 매개변수를 배열에 삽입하며 목록의 초기 값을 설정합니다. 리스트에서 this의 포인터를 변경할 필요가 없기 때문에 2번째 매개변수부터 list 함수의 값이 그대로 전달됩니다. list2와 list3의 반환 값은 설명합니다. 모든 것이 좋습니다.

function list() {
 return Array.prototype.slice.call(arguments);
}
 
var list1 = list(1, 2, 3); // [1, 2, 3]
 
// 创建一个拥有预设初始参数的函数
var leadingThirtysevenList = list.bind(undefined,[69,37],{a:2});
 
var list2 = leadingThirtysevenList(); // [[69,37],{a:2}]
var list3 = leadingThirtysevenList(1, 2, 3); // [[69,37],{a:2}, 1, 2, 3]

내가 주로 사용하는 시나리오는 setTimeout 함수와 협력하는 것입니다. 왜냐하면 setTimeout을 실행할 때 이 함수는 기본적으로 창 개체를 가리키기 때문입니다. 바인딩()을 사용하기 전에 다음을 수행했습니다.

이를 함수 내 최상위 수준에 캐시하는 포인터를 정의하여 어떻게 호출하든 Coder의 인스턴스를 가리키도록 하지만 변수를 하나 더 정의하는 것은 항상 불편합니다.

function Coder(name) {
 var that = this;
 that.name = name;
 that.getName = function() {
  console.log(that.name)
 };
 that.delayGetName = function() {
  setTimeout(that.getName,1000)
 };
}
var me = new Coder('Jins')
me.delayGetName()//延迟一秒输出Jins

bind()를 사용하는 것이 훨씬 간단합니다.

그렇습니다. setTimeout의 this를 외부 this에 직접 바인딩하면 됩니다.

function Coder(name) {
 this.name = name;
 this.getName = function() {
  console.log(this.name)
 };
 this.delayGetName = function() {
  setTimeout(this.getName.bind(this),1000)
 };
}
var me = new Coder('Jins')
me.delayGetName()//延迟一秒输出Jins

Function의 Bind() 예제에 대한 더 자세한 설명은 PHP 중국어 홈페이지를 참고해주세요!