JavaScript 함수 apply() 및 bind() 메서드

이 자습서에서는 JavaScript 함수 유형의 apply() 및 bind() 메서드를 사용하는 방법을 알려줍니다.

JavaScript Function.apply() 메서드

Function.prototype.apply() 메소드를 사용하여 지정된 매개변수 배열과 주어진 this 값을 사용하여 함수를 호출할 수 있습니다. apply() 함수의 구문은 다음과 같습니다.

Function.apply(thisArg, [args]);

두 개의 매개변수가 apply() 함수로 전송될 수 있습니다. thisArg 매개변수는 함수 호출에 제공된 this의 값이고 args 인수는 함수의 인수를 정의하는 배열입니다.

args 매개변수는 배열 객체이거나 ES5 이후의 배열과 유사한 객체일 수 있습니다.

call() 메서드와 유사하게 apply() 메서드는 함수의 매개변수를 개별 인수가 아닌 배열로 받아들입니다.

apply() 메서드를 사용하는 몇 가지 예를 살펴보겠습니다. 다음과 같이 indivi 개체와 gt라는 인사말 함수가 있다고 가정합니다.

const indivi = {
  fName: 'Shiv',
  lName: 'Yadav',
};
function gt(wave, sms) {
  return `${wave} ${this.fName}. ${sms}`;
}
let output = gt.apply(indivi, ['Hello', 'Where are you going?']);
console.log(output);

실행 코드

wave와 sms는 gt() 메서드가 취하는 두 개의 인수입니다. gt() 함수 내부에 fName 필드가 있는 객체를 참조합니다.

apply() 메서드는 아래 예제를 사용하여 this가 개별 개체로 설정된 gt() 함수를 호출하는 데 사용할 수 있습니다.

출력:

"Hello Shiv. Where are you going?"

위의 예는 함수 내에서 indivi 객체를 this 값으로 설정합니다. apply() 메서드는 gt() 함수의 매개변수를 배열로 받았습니다.

gt() 함수는 ["Hello," "Where are you going?"] 배열의 매개변수와 함께 apply() 메소드에 의해 호출되었으며 이 값은 indivi 객체로 설정됩니다. .

JavaScript Function.bind() 메서드

bind() 메서드에 의해 생성된 새 함수의 this 키워드는 호출 시 제공된 값으로 설정됩니다. 진정으로 더 많은 주제에 대해 논의하지만 다른 시간을 위해 저장하겠습니다.

이것은 많은 힘을 가지고 있습니다. 함수를 호출하면 this 값을 명시적으로 선언할 수 있습니다.

코드를 살펴보겠습니다.

var indivi = {
  fName: 'Shiv',
  lName: 'Yadav ',
  getIndiviName: function() {
    var fName = this.fName + ' ' + this.lName;
    return fName;
  },
};

var indiviName = function() {
  console.log(this.getIndiviName() + 'Where are you Going ?');
};

var logName = indiviName.bind(indivi);

logName();

실행 코드

그것을 해부하자. JS 엔진은 indiviName의 새 인스턴스를 생성하고 bind() 함수를 사용할 때 indivi를 이 변수로 바인딩합니다. indiviName 기능을 복제한다는 사실을 깨닫는 것이 중요합니다.

logName()은 원래 indivi 객체에 없었지만 이제는 indiviName 함수를 복제한 후에 호출할 수 있습니다. 이제 속성(Shiv 및 Yadav)과 관행을 식별할 수 있습니다.

중요한 부분은 값이 바인딩된 후 다른 일반 함수와 마찬가지로 함수를 사용할 수 있다는 것입니다.

출력:

"Shiv Yadav Where are you Going ?"