부르고, 묶고, 적용하라 - 삼위일체

목차

Introduction to Call Bind and Apply

Definition

Why to use?

How to use?

Summary

References

통화 바인드 및 적용 소개

이 용어를 처음 접했을 때 나는 매우 혼란스럽고 단서가 없었습니다. 이들은 서로 어떻게 다른가요? 기능 차용!? - 그게 무슨 뜻이야?



지금까지 배운 내용을 공유하려는 시도입니다!
참고: 이 블로그는 귀하가 this 키워드에 대한 기본적인 이해가 있다고 가정합니다.

정의

기능 차용

It allows us to use methods of an object on another object without having to create a copy or rewrite it in several places.

전화()

call() is used to invoke a method.
syntax- call(thisArg, arg1,arg2, ...., argN)

적용하다()

apply() is also used to invoke a method.
It is similar to call(), with the only difference that call() takes all the arguments individually, while apply() take array like object as an argument.
syntax- apply(thisArg,[arg1,agr2,...,agrN])

묶다()

bind() creates a new function which can be invoked somewhere later when needed.
syntax- bind(thisArg, arg1,arg2, ...., argN)

처음에 이것들을 사용하는 이유는 무엇입니까?

이러한 방법을 사용하는 시기와 이유를 이해하기 위해 예를 들어 보겠습니다.

먼저 해야 할 일: 일반적인 Object 속성에 액세스하는 방법을 알고 있습니다.

const userList = {
  user: "Aditi",
  age: 25
};
//accessing the properties
console.log(`Hi ${userList.user}. How's ${userList.age} 
treating you?`);

// output
// Hi Aditi. How's 25 treating you?

이제 userList 내부에 메서드가 있다고 가정해 보겠습니다.

const userList = {
  user: "Aditi",
  age: 25,
printDetails: function(){
console.log(`Hi ${this.user}. How's ${this.age} 
treating you?`);
}
};
// output
// Hi Aditi. How's 25 treating you? 

이제 userList.printDetails();를 호출하면 동일한 결과를 얻습니다.

이제 다른 개체adminList가 있고 printDetails() 메서드에 액세스하려고 한다고 가정합니다. 지금 무엇을 해야 합니까?
값이 다른 다른 객체를 생성하고 printDetails() 메서드를 복사하여 액세스할 수 있다고 말할 수 있습니다.

const adminList = {
  user: "Ananya",
  age: 26,
printDetails: function(){
console.log(`Hi ${this.user}. How's ${this.age} 
treating you?`);
}
};

// output
// Hi Ananya. How's 26 treating you? 

좋은가요?
이제 앱이 성장하고 개체 수가 더 많다고 가정합니다. 모든 객체에서 이 방법을 복사하고 반복해야 합니다. 방법의 수가 너무 늘어나는 경우도 있을 수 있습니다.
따라서 반복을 피하기 위해 이러한 함수 차용 방법을 사용해야 합니다!

이 방법을 사용하는 방법?

이제 위에서 논의한 문제를 해결하는 방법을 이해합시다.

호출() 사용

const userList = {
  user: "Aditi",
  age: 25,
  printDetails: function (city, country) {
    console.log(`Hi ${this.user} from ${city}, ${country}.
    How's ${this.age} treating you?`
    );
  }
};
const adminList = {
  user: "Ananya",
  age: 26
};

// borrowing printDetails() using call()

userList.printDetails.call(adminList, "Patna", "India");

// output
// Hi Ananya from Patna, India. How's 26 treating you? 

적용() 사용

const userList = {
  user: "Aditi",
  age: 25,
  printDetails: function (city, country) {
    console.log(`Hi ${this.user} from ${city}, ${country}.
    How's ${this.age} treating you?`
    );
  }
};
const adminList = {
  user: "Ananya",
  age: 26
};

// borrowing printDetails() using apply()

userList.printDetails.apply(adminList, ["Patna", "India"]);

// output
// Hi Ananya from Patna, India. How's 26 treating you? 

바인드() 사용

const userList = {
  user: "Aditi",
  age: 25,
  printDetails: function (city, country) {
    console.log(`Hi ${this.user} from ${city}, ${country}.
    How's ${this.age} treating you?`
    );
  }
};
const adminList = {
  user: "Ananya",
  age: 26
};

// borrowing printDetails() using bind()

const printAdminDetails = userList.printDetails.bind(
  adminList,
  "Patna",
  "India"
);

printAdminDetails();

// output
// Hi Ananya from Patna, India. How's 26 treating you? 

따라서 두 번째 개체printDetails() 내부에 adminlist를 복사할 필요 없이 call(), apply() 및 bind()의 도움으로 메서드에 액세스할 수 있었습니다.

요약

call(), bind() 및 apply()는 개체의 메서드를 차용하는 데 사용됩니다.

call() 및 apply()가 호출되고 즉시 실행됩니다.

call()과 apply()의 차이점은 인수를 취하는 방식입니다. call()은 모든 인수를 개별적으로 사용하는 반면 apply()는 배열의 인수를 사용합니다.

bind()는 나중에 호출될 때 실행되는 새 함수를 만듭니다.

참조

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply