자바스크립트의 바인딩() 함수에 대해 토론하세요.

javascript의 바인딩() 함수 이해하기

공유:

bind() 메소드는 이 새 함수가 호출될 때 이 값은 바인딩() 매개변수에 전달되는 값입니다. 그 매개변수는 바인딩()의 다른 매개변수와 원래 매개변수입니다.

구문은 다음과 같습니다:

fun.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg 바인딩된 함수가 호출될 때 이 매개변수는 실행될 때 원래 함수의 this 포인터로 사용됩니다. 이 매개변수는 new 연산자를 사용하여 바인딩된 함수를 호출할 때 아무런 효과가 없습니다.

arg1, arg2, … (선택 사항) 바인딩된 함수가 호출되면 이러한 매개 변수와 바인딩된 함수 자체의 매개 변수가 순서대로 실행될 때 원래 함수의 매개 변수로 사용됩니다.

매개변수

바인드의 첫 번째 매개변수는 실행 시 원래 함수의 this 포인터로 사용됩니다. 두 번째 시작 매개변수는 말할 것도 없이 바인딩 함수가 호출될 때 이 매개변수가 추가됩니다. 상한 함수 자체는 순서대로 실행될 때 원래 함수의 매개 변수로 사용됩니다. 이해하는 방법?

function fn(a, b, c) {
  return a + b + c;
}
var _fn = fn.bind(null, 10);
var ans = _fn(20, 30); // 60

fn 함수에는 3개의 매개변수가 필요합니다. _fn 함수는 기본 첫 번째 매개변수로 10을 사용하므로 실수로 세 개의 매개변수를 전달한 경우 걱정하지 마세요. 둘.

function fn(a, b, c) {
  return a + b + c;
}
var _fn = fn.bind(null, 10);
var ans = _fn(20, 30, 40); // 60

이게 무슨 소용이 있나요? 일부 함수의 처음 몇 개의 매개변수가 "기본값"으로 설정된 경우 바인드를 사용하여 새 함수를 반환할 수 있습니다. 즉, 바인딩()을 사용하면 함수가 미리 설정된 초기 매개변수를 가질 수 있습니다. 이러한 인수(있는 경우)는 바인딩()에 대한 두 번째 인수로 뒤에 옵니다. 그런 다음 대상 함수의 인수 목록 시작 부분에 삽입되고 바인딩된 함수에 전달된 인수가 그 뒤에 옵니다.

function list() {
  return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]
// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);
var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

new

바인드에서 반환된 결과는 여전히 함수인 경우 new 연산자에 의해 호출될 수 있습니다. 사양에서는 new 연산자를 사용하여 바인딩된 함수를 호출할 때 바인딩의 첫 번째 매개 변수가 유효하지 않음을 매우 명확하게 설명합니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
var _Person = Person.bind({});
var p = new _Person('hanzichi', 30); // Person {name: "hanzichi", age: 30}

일반적으로 이런 식으로 사용하지 않지만, 바인드 폴리필(http://caniuse.com/#search=bind)을 작성하려면 new를 사용하여 호출하는 것을 고려해야 합니다.

기본값을 설정할 수도 있으며(이전 섹션 참조) 원래 제공된 매개변수는 여전히 생성자 호출 앞에 추가됩니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
var _Person = Person.bind(null, 'hanzichi');
var p = new _Person(30); // Person {name: "hanzichi", age: 30}

With setTimeout

언제 이 포인터를 잃기 쉽나요? 음, setTimeout은 장면이고 이를 창에 지정하는 것은 쉽습니다. 물론 setInterval의 경우에도 마찬가지입니다. 객체를 참조하기 위해 this가 필요한 객체의 메서드를 사용할 때 객체를 계속 사용하려면 이를 콜백 함수에 명시적으로 바인딩해야 할 수도 있습니다.

var canvas = {
  render: function() {
    this.update();
    this.draw();
  },
  update: function() {
    // ...
  },
  draw: function() {
    // ...
  }
};
window.setInterval(canvas.render, 1000 / 60);

캔버스를 사용하여 특수 효과를 쓰거나 게임을 만들 때 비슷한 문제가 자주 발생합니다. 위의 코드에는 문제가 있습니다. 이는 렌더링 메서드에서 실제로 창을 가리킵니다! 객체를 계속 사용할 수 있도록 바인딩을 사용하여 이를 콜백 함수에 명시적으로 바인딩할 수 있습니다.

window.setInterval(canvas.render.bind(canvas), 1000);

dom의 이벤트 모니터링도 비슷한 상황입니다. 주의하지 않으면 dom 요소가 지적될 수 있습니다. https://github.com/hanzichi/hanzichi.github.io/blob/master/2016/bigrender/js/bigrender.js#L179-L184 이전에 bigrender 작업 시 작성한 코드 중 이 부분을 참고하시면 됩니다.

tip

bind도 몇 가지 흥미로운 작업을 수행할 수 있습니다.

일반적으로 배열과 유사한 배열을 배열로 변환하려면 슬라이스(즉, 지원되지 않음)를 사용합니다. #14

var slice = Array.prototype.slice;
// slice.apply(arguments);
// slice(arguments, 1);
bind 能让调用变的更加简单。
// same as "slice" in the previous example
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);
// ...
slice(arguments);
// slice(arguments, 1);

를 참조하세요. 예를 들어 여러 노드에 이벤트를 추가하려는 경우 for 루프에는 문제가 없습니다. forEach 메서드를 "표절"할 수도 있습니다.

Array.prototype.forEach.call(document.querySelectorAll('input[type="button"]'), function(el){
  el.addEventListener('click', fn);
});

추가 , 바인드를 사용하여 함수를 더 잘 캡슐화할 수 있습니다:

var unboundForEach = Array.prototype.forEach
  , forEach = Function.prototype.call.bind(unboundForEach);
forEach(document.querySelectorAll('input[type="button"]'), function (el) {
  el.addEventListener('click', fn);
});

마찬가지로 x.y(z)를 y(x,z) 형식으로 변경할 수 있습니다:

var obj = {
  num: 10,
  getCount: function() {
    return this.num;
  }
};
var unboundBind = Function.prototype.bind
  , bind = Function.prototype.call.bind(unboundBind);
var getCount = bind(obj.getCount, obj);
console.log(getCount());  // 10

또 다른 예입니다. 매초마다 콘솔에 1-5를 인쇄하는 것은 클로저를 검사할 때 전형적인 문제인 것 같습니다.

for(var i = 1; i <= 5; i++) {
  !function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  }(i);
}

ES6에서 let을 사용할 수 있습니다:

for(let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

bind를 사용하여 기술을 즉시 향상시킬 수도 있습니다:

for(var i = 1; i <= 5; i++) {
  setTimeout(console.log.bind(console, i), i * 1000);
}

추천 튜토리얼: "js 기본 튜토리얼"

위 내용은 자바스크립트의 바인딩() 함수에 대해 토론하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!