Javascript에서 호출, 바인딩 및 적용

Call, Bind 및 Apply는 함수를 호출하는 데 사용됩니다.

그러나 왜 우리가 이것을 호출해야합니까?

자바스크립트에는 그것이 속한 객체를 참조하는 이 키워드가 있습니다.

함수의 this 키워드는 다른 언어와 비교하여 JavaScript에서 약간 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드 사이에는 몇 가지 차이점이 있습니다.

대부분의 경우 이 값은 함수가 호출되는 방식(런타임 바인딩)에 따라 결정됩니다. 실행 중에는 할당으로 설정할 수 없으며, 함수가 호출될 때마다 다를 수 있습니다.

함수 호출 방식에 관계없이 this 키워드를 설정하기 위해 call, bind 및 apply 메소드를 사용합니다.

call 및 bind는 즉시 함수를 호출하는 데 사용되며 bind는 나중에 실행될 때 올바른 컨텍스트("this")를 갖게 되는 바인딩된 함수를 반환합니다. 이 메소드의 첫 번째 매개변수는 함수가 호출되는 객체인 "this"값을 설정합니다.
apply()와 call() 메서드의 유일한 차이점은 apply() 메서드의 두 번째 매개 변수는 실제 함수에 대한 인수를 배열로 받아들이고 in call은 개별 인수를 수락한다는 것입니다.

여기 예가 있습니다 -

var person = {
  firstname: 'Jignesh',
  lastname: 'Kumar ',
  getPersonName: function() {
    return this.firstname + ' ' + this.lastname;
  }
};

var getNameWithPlace = function(place, state) {
  console.log(this.getPersonName() + ' from ' + place + ' , ' + state);
};
var bindNameFn = getNameWithPlace.bind(person); // creates new object and binds person. 'this' of person === person now

bindNameFn('Bangalore', 'Karnataka'); // Jignesh Kumar  from Bangalore , Karnataka
getNameWithPlace.call(person,'Bangalore', 'Karnataka'); // Jignesh Kumar  from Bangalore , Karnataka
getNameWithPlace.apply(person,['Bangalore', 'Karnataka']); // Jignesh Kumar  from Bangalore , Karnataka

호출, 바인딩 및 적용을 위한 Polyfill

Function.prototype.myBind = function (context, ...args1) {
  if (typeof this !== "function") {
    throw new Error(this + "cannot be bound as it's not callable");
  }
  let fn = this;
  return function (...arg2) {
      fn.apply(context, [...args1, ...arg2])
  }
};

Function.prototype.myCall = function (context, ...args) {
  if (typeof this !== "function") {
    throw new Error(this + "cannot be bound as it's not callable");
  }
  context.fnName = this;
  context.fnName(...args);
};

Function.prototype.myApply = function (context, ...args) {
  if (typeof this !== "function") {
    throw new Error(this + "cannot be bound as it's not callable");
  }
  context.fnName = this;
  context.fnName(...args[0]);
};

getNameWithPlace.myCall(person,'Bangalore', 'Karnataka'); // Jignesh Kumar  from Bangalore , Karnataka
getNameWithPlace.myApply(person,['Bangalore', 'Karnataka']); // Jignesh Kumar  from Bangalore , Karnataka

결론

모든 JS 함수에 존재하는 이러한 내장 메서드는 매우 유용할 수 있습니다. 일상적인 프로그래밍에서 사용하지 않더라도 인터뷰에서 자주 묻는 이러한 방법과 관련된 개념과 질문을 알아야 합니다.

질문이 있으시면 다음을 통해 저에게 연락하십시오.