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); // 60fn 함수에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
