'value; this'의 값을 제어하기 위해 전화, 적용 및 바인딩을 어떻게합니까? 자바 스크립트로?

JavaScript에서 마스터 링 call , apply 및 bind : 포괄적 인 가이드

이 기사에서는 call 의 뉘앙스, apply 및 바인드를 자바 스크립트로 bind this 를 제어하는 ​​데 중점을 둡니다.

JavaScript에서 "this"의 값을 제어하기 위해 call , apply 및 bind 어떻게 사용합니까?

JavaScript 에서이 this 는 현재 실행중인 함수를 소유 한 객체를 나타냅니다. 그러나, this 의 가치는 특히 콜백으로 전달되거나 이벤트 핸들러 내에서 사용되는 함수에서 예측할 수 없을 수 있습니다. call , apply 및 bind this 값을 명시 적으로 설정하여 기능의 맥락을 정확하게 제어 할 수있는 방법을 제공합니다.

• call() : 이 메소드는 즉시 함수를 호출하여이 this 을 전달한 첫 번째 인수로 설정합니다. 후속 인수는 함수에 대한 개별 주장으로 전달됩니다.

<code class="javascript">function greet(greeting) { console.log(greeting ", " this.name); } const person = { name: "Alice" }; greet.call(person, "Hello"); // Output: Hello, Alice</code>

• apply() : call() 과 유사하고, apply() 도 즉시 함수를 호출하고 this 을 설정합니다. 그러나 개별 인수 대신 인수의 배열 (또는 배열과 같은 객체)을 수락합니다.

<code class="javascript">function sum(a, b) { return ab this.value; } const obj = { value: 10 }; const numbers = [5, 3]; const result = sum.apply(obj, numbers); // Output: 18</code>

• bind() : call() 및 apply() 와 달리 bind() 즉시 함수를 호출하지 않습니다. 대신, 호출 될 때이 this 이 제공된 값으로 설정 될 새로운 기능을 만듭니다. 이는 부분적으로 적용된 기능을 작성하거나 콜백 에서이 this 을 일관되게 보장하는 데 유용합니다.

<code class="javascript">function sayHello() { console.log("Hello, " this.name); } const person = { name: "Bob" }; const boundSayHello = sayHello.bind(person); boundSayHello(); // Output: Hello, Bob</code>

JavaScript에서 call , apply 및 bind 의 실질적인 차이점은 무엇입니까?

주요 차이점은 기능을 실행할 때 와 인수를 처리하는 방법에 있습니다.

• call() 및 apply() : 이 메소드는 즉시 함수를 실행합니다. call() 개별 인수를 취하고 apply() 는 인수 배열을 취합니다. 작은 고정 된 인수 수에 대해 call() 선택하고 배열 또는 가변 수의 인수가있는 경우 apply() 선택하십시오.
• bind() : 이 메소드는 나중에 호출 할 때 지정된 값으로 this 되는 새로운 함수를 반환합니다 . 기능을 즉시 실행하지 않습니다. 콜백 또는 이벤트 핸들러와 같은 나중에 실행하기 위해이 this 를 사전 설정 해야하는 경우 bind() 사용하십시오.

JavaScript에서 일반적인 "이"키워드 문제를 해결하기 위해 call , apply 및 bind 하려면 어떻게해야합니까?

일반적인 "이"문제는 콜백 (예 : setTimeout , addEventListener )에서 발생하며 다른 기능에 대한 인수로 전달되었습니다. call , apply 및 bind 제안 솔루션 :

• 콜백 : 콜백에서 this 종종 글로벌 객체 (브라우저의 창 또는 엄격한 모드에서 정의되지 않은)를 나타냅니다. bind() 여기에 이상적입니다.

<code class="javascript">const myObject = { name: "Charlie", logName: function() { console.log(this.name); } }; setTimeout(myObject.logName.bind(myObject), 1000); // Ensures 'this' refers to myObject</code>

• 방법은 인수로 전달되었습니다 : 메소드를 다른 함수로 인수로 전달할 때, this 의 맥락이 바뀔 수 있습니다. call() 또는 apply() 올바른 컨텍스트를 유지할 수 있습니다.

<code class="javascript">function processData(callback) { const data = { value: 20 }; callback.call(data, data.value); //Ensures this refers to the data object } function myCallback(val){ console.log("Value is: " val " and this.value is: " this.value); } processData(myCallback); // Output: Value is: 20 and this.value is: 20</code>

언제 JavaScript 함수의 컨텍스트를 call , apply 또는 bind 해야합니까?

선택은 특정 상황에 따라 다릅니다.

• 개별 인수로 즉시 실행 : call() 사용하십시오.
• 인수 배열로 즉시 실행 : apply() 사용하십시오.
• 실행 지연, 사전 this : bind() 사용하십시오.

이러한 차이를 이해하고 적절하게 적용함으로써 JavaScript 코드 에서이 this 를 효과적으로 관리하여 예상치 못한 행동을 피하고보다 강력하고 유지 관리 가능한 기능을 작성할 수 있습니다.

위 내용은 'value; this'의 값을 제어하기 위해 전화, 적용 및 바인딩을 어떻게합니까? 자바 스크립트로?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!