JavaScript의 호출, 적용 및 바인딩 이해-JS 튜토리얼-php.cn

JavaScript의 호출, 적용 및 바인딩 이해

Mary-Kate Olsen

풀어 주다： 2024-11-21 05:42:10

원래의

587명이 탐색했습니다.

JavaScript에서는 함수의 컨텍스트(this)를 제어하는 데 call, apply, 바인딩 메소드가 필수적입니다. 이는 특히 개체 및 메서드로 작업할 때 참조해야 하는 내용을 명시적으로 정의해야 하는 시나리오에서 자주 사용됩니다.

이 블로그에서는 이러한 메소드, 구문, 사용 사례를 예제와 함께 자세히 살펴보고 사용 방법과 시기를 이해하겠습니다.

1. 문제: 이것은 JavaScript

JavaScript에서 this의 값은 함수가 호출되는 방식에 따라 달라집니다. 예:

const person = {
  name: "Alice",
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // Output: Hello, my name is Alice

const greet = person.greet;
greet(); // Output: Hello, my name is undefined

로그인 후 복사

여기서 Greeting()의 this 값은 함수가 새로운 변수에 할당될 때 변경됩니다. 여기서 호출, 적용 및 바인딩을 사용하면 이것이 무엇을 의미하는지 제어할 수 있으므로 유용합니다.

2. call() 메소드

call() 메서드를 사용하면 함수를 즉시 호출하고 this 컨텍스트를 명시적으로 설정할 수 있습니다. 인수는 개별적으로 전달됩니다.

구문:

functionName.call(thisArg, arg1, arg2, ...);

로그인 후 복사

예:

const person = {
  name: "Alice",
};

function greet(greeting) {
  console.log(`${greeting}, my name is ${this.name}`);
}

greet.call(person, "Hello"); // Output: Hello, my name is Alice

로그인 후 복사

이 예에서는 call()을 사용하여 이를 person 개체로 설정했습니다.

3. apply() 메소드

apply() 메서드는 call()과 유사하지만 인수가 전달되는 방식이 다릅니다. 인수를 개별적으로 전달하는 대신 배열로 전달합니다.

구문:

functionName.apply(thisArg, [arg1, arg2, ...]);

로그인 후 복사

예:

const person = {
  name: "Alice",
};

function greet(greeting, punctuation) {
  console.log(`${greeting}, my name is ${this.name}${punctuation}`);
}

greet.apply(person, ["Hello", "!"]); // Output: Hello, my name is Alice!

로그인 후 복사

여기서 주요 차이점은 인수가 배열로 전달되므로 동적으로 작성된 인수 목록을 처리할 때 apply()가 유용하다는 것입니다.

4. 바인딩() 메서드

bind() 메서드는 함수를 즉시 호출하지 않습니다. 대신, 지정된 this 컨텍스트를 사용하여 새 함수를 생성하고 반환합니다. 재사용 가능한 함수나 이벤트 핸들러를 만드는 데 특히 유용합니다.

구문:

const boundFunction = functionName.bind(thisArg, arg1, arg2, ...);

로그인 후 복사

예:

const person = {
  name: "Alice",
};

function greet(greeting) {
  console.log(`${greeting}, my name is ${this.name}`);
}

const boundGreet = greet.bind(person);
boundGreet("Hi"); // Output: Hi, my name is Alice

로그인 후 복사

여기서 Greeting 함수는 person 객체에 바인딩되어 있으며, 이는boundGreet이 호출될 때마다 항상 person을 참조합니다.

5. 호출, 적용, 바인딩 비교

Understanding call, apply, and bind in JavaScript

6. 실제 사용 사례

예 1: 객체에서 메서드 빌려오기

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

function introduce() {
  console.log(`Hi, I'm ${this.name}`);
}

introduce.call(person1); // Output: Hi, I'm Alice
introduce.call(person2); // Output: Hi, I'm Bob

로그인 후 복사

예 2: 수학 연산에 Apply 사용

const numbers = [5, 10, 15, 20];

console.log(Math.max.apply(null, numbers)); // Output: 20
console.log(Math.min.apply(null, numbers)); // Output: 5

로그인 후 복사

여기서 apply()는 Math.max 및 Math.min에 배열을 전달하는 데 도움이 됩니다.

예 3: 바인딩 이벤트 핸들러

const button = document.getElementById("myButton");
const person = {
  name: "Alice",
  sayName: function () {
    console.log(`Hi, my name is ${this.name}`);
  },
};

button.addEventListener("click", person.sayName.bind(person));

로그인 후 복사

바인드가 없으면 sayName 내부의 this 값은 사람 개체가 아닌 버튼 요소를 참조하게 됩니다.

결론

호출, 적용 및 바인드 메소드는 JavaScript에서 이를 제어하는 강력한 도구입니다. 이는 특히 동적 컨텍스트에서 함수 및 객체로 작업할 때 유연하고 재사용 가능한 코드를 작성하는 데 필수적입니다.

간단한 요약은 다음과 같습니다.