코드를 더욱 깔끔하게 만들기 위해 JavaScript에서 바인딩() 메서드를 사용하는 방법에 대한 자세한 소개

몇 주 전에 저는 루프에서 비동기 함수 호출 효과를 끄는 방법과 이 문제를 해결하는 몇 가지 방법에 대해 글을 썼습니다.

최근 코딩을 하면서 더 쉬운 방법을 발견했습니다. 이 과정에서 익명 함수를 제거하고 "루프에 함수를 작성하지 마세요"라는 Linting 오류를 제거합니다.

저는 JavaScript에서 bind()를 실험해 왔습니다. 몇 주 전에 언급한 클로저 문제를 처리하는 것을 포함하여 다양한 상황에서 바인딩을 사용할 수 있다는 것이 밝혀졌습니다.

바인드()란 무엇인가요?

최근 JavaScript 사양에 바인딩 기능이 추가되었으므로 최신 브라우저에서만 작동합니다. 호환성 매트릭스를 확인하여 어떤 브라우저가 bind() 및 기타 JavaScript 기능을 구현하는지 확인할 수 있습니다. 목록을 꼼꼼히 살펴보니 제가 아끼는 브라우저 중 bind()을 지원하지 않는 브라우저는 하나도 없습니다. 물론 귀하의 상황은 다를 수 있습니다.

바인드가 하는 일은 함수를 자체 클로저에 자동으로 캡슐화하여 컨텍스트(이 키워드)와 일련의 매개변수를 원래 함수에 바인딩할 수 있도록 하는 것입니다.

결국은 또 다른 함수 포인터입니다.

function add(a,b){
    return a + b;
}
var newFoo = add.bind(this,3,4);

이를 foo() 함수에 묶을 뿐만 아니라 두 개의 매개변수도 묶고 있다는 점에 유의하세요. 따라서 newFoo()을 호출하면 반환 값은 7이 됩니다.

그런데 newFoo를 호출하기 전에 매개변수를 변경하면 어떻게 될까요?

바인드 매개변수 변경

변수를 사용하여 매개변수를 foo()에 바인딩한 다음 newFoo()을 호출하기 전에 변수를 변경하면 값이 어떻게 바뀔 것이라고 생각하시나요?

function add(a,b){
    return a + b;
}
var a = 3;
var b = 4;
var newFoo = add.bind(this,a, b);
a = 6;
b = 7;
console.log(newFoo());

바인드()가 실제 변수 값이 아닌 매개변수 값을 바인딩하기 때문에 반환 값은 여전히 ​​7입니다.

좋은 소식입니다. 앞서 말했듯이 우리 코드에서 이 엄청난 이점을 활용할 수 있습니다. 그러나 나에게 가장 유용한 부분은 콜백입니다.

바인딩 및 콜백

루프에서 콜백을 처리하기 위한 솔루션 중 하나가 호출하려는 함수 주위에 익명 함수를 만드는 것이라는 기사를 기억하세요.

for(var i = 0;i < 10;i++){
    (function(ii){
        setTimeout(function(){
            console.log(ii);
        },1000);
    })(i);

하지만 바인딩을 사용하면 코드를 크게 단순화할 수 있습니다.

function consoleLog(i){
  console.log(i);
}
for(var i = 0;i < 10;i++){
    setTimeout(consoleLog.bind(this,i),1000);
}

바인드를 호출할 때마다 새 함수 포인터가 제공되고 원래 함수는 변경되지 않은 상태로 유지되기 때문입니다.

동시에 루프에서 함수를 생성하지 않고 루프 외부에서 생성한 함수를 가리켰을 뿐이므로 "루프에 함수를 쓰지 마세요"라는 Linting 오류도 제거했습니다.

이벤트 핸들러 바인딩

bind()코드를 더욱 깔끔하게 만들 수 있는 또 다른 곳은 이벤트 핸들러입니다. 이벤트 핸들러가 호출되면 이벤트 핸들러가 생성된 개체가 아니라 이벤트가 생성된 컨텍스트에 액세스한다는 사실은 누구나 알고 있거나 알아야 합니다. 바인드를 사용하면 올바른 컨텍스트에서 함수에 액세스할 수 있는지 확인할 수 있습니다.

function ClassName(){
   this.eventHandler = (function(){
   }).bind(this);
}

그런 코드를 작성해야 한다는 말이 아니라 단지 요점을 설명하기 위한 것입니다.

커링

뭐? !

알겠습니다. 나는 함수형 프로그래밍에 대한 나의 지식이 제한적이라는 것을 가장 먼저 인정할 것입니다. 커링에 대해 제가 드릴 수 있는 가장 좋은 정의는 여러 단계에서 매개변수를 전달할 수 있다는 것입니다.