JavaScript로 호출, 적용 및 바인딩 단순화

JavaScript를 사용하면 호출, 적용 및 바인딩을 사용하여 함수의 컨텍스트(이 값)를 변경할 수 있습니다. 이러한 방법은 처음에는 까다로워 보일 수 있지만 몇 가지 간단한 예와 실제 비유를 통해 익숙해질 수 있습니다. 분석해 보겠습니다.

통화 방법

호출을 한 개체의 메서드를 빌려 다른 개체와 함께 사용하는 방법이라고 생각하세요.

실제 비유

일정을 확인하는 스마트폰 앱이 있다고 상상해 보세요. 친구도 동일한 앱을 사용하고 있지만 일정을 설정하지 않았습니다. 친구에게 일시적으로 앱 구성을 빌려주어 자신의 일정에 어떻게 적용되는지 확인할 수 있습니다.

예

const person1 = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const person2 = {
  firstName: 'Jane',
  lastName: 'Smith'
};

person1.fullName.call(person2); // Outputs: Jane Smith

여기서 person1은 자신의 이름을 인쇄하는 방법을 가지고 있습니다. call을 사용하면 person2는 이 방법을 빌려 자신의 이름을 인쇄할 수 있습니다.

적용 방법

apply는 call과 유사하지만 인수를 배열로 사용합니다.

실제 비유

당신이 식당에서 음식을 주문하고 있다고 상상해 보세요. 웨이터에게 각 항목을 개별적으로 알려주는 대신 웨이터에게 항목 목록을 전달합니다.

예

function sum(a, b) {
  console.log(a + b);
}

sum.apply(null, [5, 10]); // Outputs: 15

이 예에서 Apply는 배열로 제공된 인수 5와 10을 사용하여 sum 함수를 호출합니다.

바인딩 방법

bind는 호출 시 this 값이 제공된 값으로 설정되는 새 함수를 생성합니다. 이는 친구가 원할 때 언제든지 사용할 수 있도록 앱 구성을 친구에게 영구적으로 빌려주는 것과 같습니다.

실제 비유

TV에서만 작동하는 특수 TV 리모컨이 있다고 가정해 보겠습니다. 친구의 TV와 영구적으로 작동하는 복제 리모컨을 만들 수 있습니다.

예

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const retrieveX = module.getX;
console.log(retrieveX()); // Outputs: undefined (because 'this' is not module)

const boundGetX = retrieveX.bind(module);
console.log(boundGetX()); // Outputs: 42

이 예에서 바인드는 항상 모듈을 this 값으로 사용하는 새로운 함수boundGetX를 생성합니다.

실제 사용 사례

1. 대출방법

call을 사용하여 다른 객체의 메소드를 빌릴 수 있습니다.

const person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

const anotherPerson = {
  name: 'Bob'
};

person.greet.call(anotherPerson); // Outputs: Hello, Bob

2. 수학 함수 적용 사용

apply는 Math.max와 같은 함수에 배열을 전달하는 데 유용합니다.

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers); 
console.log(max); // Outputs: 7

3. 함수 인수 사전 설정

bind를 사용하면 미리 설정된 인수로 함수를 만들 수 있습니다.

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // Outputs: 10

여기서 바인딩은 a가 항상 2인 새로운 함수 double을 생성하므로 어떤 숫자든 쉽게 두 배로 만들 수 있습니다.

결론

호출, 적용, 바인딩을 이해하면 JavaScript에서 함수가 실행되는 방식을 제어하는 ​​데 도움이 됩니다. 이를 통해 이 값과 사전 설정된 인수를 변경할 수 있으므로 코드가 더 유연하고 재사용 가능해집니다. 이러한 방법을 익히면 더욱 깔끔하고 효율적인 JavaScript 코드를 작성할 수 있습니다.

위 내용은 JavaScript로 호출, 적용 및 바인딩 단순화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!