JS에서 바인드 구현 및 사용

JS에서 바인드 구현 및 사용

자바스크립트에서 바인드는 매우 유용한 함수 방식입니다. 함수가 호출될 때 특정 this 값을 가지며 지정된 매개변수를 전달할 수 있는지 확인하면서 새 함수를 생성할 수 있습니다.

바인드 메소드는 다음과 같이 정의됩니다.

function bind(fn, obj, ...args) {
  return function(...args2) {
    return fn.apply(obj, [...args, ...args2]);
  };
}

위 바인드 메소드는 fn, obj 및 args의 세 가지 매개변수를 받습니다. fn은 이 값에 바인딩되어야 하는 함수이고, obj는 함수가 호출될 때 가리키는 개체이며, args는 fn 함수에 전달되는 매개 변수입니다.

다음으로 바인드의 사용법을 이해하기 위해 구체적인 예를 살펴보겠습니다.

const person = {
  firstName: 'John',
  lastName: 'Doe',
  getFullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
};

const printFullName = function() {
  console.log(this.getFullName());
};

const logFullName = printFullName.bind(person);

logFullName(); 

위 코드에서는 사람의 전체 이름을 반환하는 getFullName 메서드가 포함된 사람 개체를 만듭니다. 그런 다음 호출자의 전체 이름을 출력하는 일반 함수 printFullName을 정의합니다.

그러나 printFullName 함수는 전역 범위에 정의되어 있으므로 printFullName을 직접 호출하면 사람 개체가 아닌 전역 개체(브라우저의 창 개체)를 가리킵니다.

이 문제를 해결하기 위해 우리는 printFullName 함수를 person 개체에 바인딩하는 바인딩 메서드를 사용합니다. 그러면 logFullName 함수가 호출될 때 이것이 person 개체를 가리키게 되어 전체 이름이 올바르게 인쇄됩니다.

바인드 메소드는 추가 매개변수를 수신하여 원래 함수에 전달할 수 있습니다. 예를 들어, name 매개변수를 승인하고 이를 getFullName 메소드에 전달하도록 logFullName 함수를 변경할 수 있습니다.

const person = {
  firstName: 'John',
  lastName: 'Doe',
  getFullName: function(name) {
    return this.firstName + ' ' + this.lastName + ' is ' + name;
  }
};

const printFullName = function(name) {
  console.log(this.getFullName(name));
};

const logFullName = printFullName.bind(person, 'great');

logFullName(); 

위 코드에서는 바인드 메소드에 이름 매개변수 'great'을 전달했습니다. logFullName 함수가 호출되면 이 매개변수가 getFullName 메소드에 전달되어 "John Doe is great"가 인쇄됩니다.

요약하자면, 바인딩 메서드는 새 함수를 생성하고 호출 시 이 함수가 특정 this 값을 가지며 지정된 매개변수를 전달할 수 있도록 하는 데 사용할 수 있는 매우 유용한 함수 메서드입니다. 바인드 메소드를 올바르게 사용함으로써 우리는 이것이 지적하는 문제를 피할 수 있고 매개변수를 원래 함수에 유연하게 전달할 수 있습니다.

위 내용은 JS에서 바인드 구현 및 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!