JavaScript의 bind() 메서드

JavaScript에서 함수를 호출할 때마다 함수의 참조는 항상 전역 개체, 즉 창 개체를 가리킵니다. 일반 함수에서는 괜찮지만 중첩 함수나 객체 내부에 존재하는 함수의 경우 문제가 발생합니다. 여기에서 내부 함수를 호출하려면 객체 이름이나 외부 함수 이름을 사용하여 내부 함수를 호출해야 하기 때문입니다. 따라서 객체 내부에 있거나 다른 함수 내부에 있는 함수를 사용하려는 경우 전역 컨텍스트를 가리키기 때문에 직접 사용할 수 없습니다.

이를 해결하려면 내부 함수를 바인딩하고 새 컨텍스트를 바인드 함수 내부에 전달하거나 해당 함수를 외부에 선언한 다음 함수를 바인딩하고 새 컨텍스트를 전달할 수 있습니다. bind()는 함수가 있는 다른 컨텍스트로 전역 컨텍스트를 변경할 수 있는 JavaScript의 함수입니다. 이를 함수 차용이라고도 합니다. 예를 들어 실제로 사용되는 bind 메소드를 이해합시다.

JavaScript에서 bind() 메소드 사용

아래 코드에는 amazon과 tesla라는 두 개의 객체가 있습니다. 이러한 각 개체에는 name, noOfEmployees 및 getInfo() 함수와 같은 일부 속성이 포함되어 있습니다. 여기에서 amazon 개체 이름의 도움으로 amazon 개체 내부에 존재하고 tesla 개체 이름의 도움으로 tesla 개체 내부에 있는 getInfo() 함수를 호출합니다.

let amazon = {
  name: 'Amazon',
  noOfEmployees: 100,
  getInfo: function() {
    console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
  },
} amazon.getInfo();


let tesla = {
  name: 'Tesla',
  noOfEmployees: 150,
  getInfo: function() {
    console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
  },
} tesla.getInfo();

출력:

The Amazon has 100 employees.
The Tesla has 150 employees.

위의 프로그램을 실행하면 위와 같은 결과가 나옵니다. 이 접근 방식의 문제는 getInfo() 함수가 콘솔에 줄을 인쇄하는 것과 동일한 작업을 수행한다는 것입니다. 또한 코드 반복을 유발하는 두 객체에 동일한 기능을 선언했습니다.

대신 우리가 할 수 있는 일은 객체 외부에 getInfo() 함수를 선언하고 아래와 같이 객체에서 제거하는 것입니다.

let amazon = {
  name: 'Amazon',
  noOfEmployees: 100,
}

let tesla = {
  name: 'Tesla',
  noOfEmployees: 150,
}

let getInfo =
    function() {
  console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
}

let amazon_Data = getInfo.bind(amazon);
let tesla_Data = getInfo.bind(tesla);

amazon_Data();
tesla_Data();

출력:

The Amazon has 100 employees.
The Tesla has 150 employees.

그런 다음 bind() 기능을 사용하여 getInfo() 기능을 amazon 및 tesla 두 객체와 바인딩합니다. 그런 다음 다른 다양한 amazon_Data 및 tesla_Data 내부에 참조를 저장합니다.

이제 amazon_Data 및 tesla_Data 내부에 저장한 함수를 호출하려면 () 대괄호를 넣어야 합니다. 이것은 이전에 얻은 것과 동일한 출력을 제공합니다. 여기서 유일한 차이점은 우리가 따랐던 접근 방식입니다.

또한 아래와 같이 bind 메소드의 끝에 ()를 하나 더 추가하여 참조를 저장하지 않고 메소드를 직접 호출할 수도 있습니다.

getInfo.bind(amazon)();
getInfo.bind(tesla)();

이 개념은 getInfo()라는 동일한 함수가 amazon과 tesla라는 두 개의 다른 객체에서 사용되거나 차용되기 때문에 함수 차용이라고도 합니다.