JavaScriptを適用してcall関数を理解する

こんにちは:)この文章はapplyとcall関数を紹介します!

apply、call関数とは?

任意の関数を任意の場所に適用して、一緒に使用できる関数です.パラメータ適用をスキップしたり、直接使用したりすることができます.
言語だけでは理解しにくいので、コードで例を示します.

      let person = {
              name: "훈이",
            };

      let acting = {
        exercise: function () {
          console.log(
            `${this.name}는(은) 지금 턱걸이중`
          );
        },
      };

nameキーを持つpersonオブジェクトと、トレーニング関数を持つactionオブジェクトがあるとします.
しかし、personオブジェクトとactionオブジェクトを混ぜて、「勲は今、引体が上」と印刷したいと思っています.
この場合、apply関数またはcall関数を使用して適用できます.

acting.exercise.apply(person)
//훈이는(은) 지금 턱걸이중

この関数を追加すると、必要な結果値が得られます.
この関数を説明します.
actionのトレーニング関数をpersonオブジェクトに適用します.
このように見ることができます
call関数とapplyの違いはまったく同じです.
まず、この場合、call関数で完全に置き換えることができます.

acting.exercise.call(person)
//훈이는(은) 지금 턱걸이중

そのまま使えばいい

apply VS call差異

では、どんな違いがありますか.
異なるパラメータ直接伝送方式.
applyはアレイパラメータを送信できます.
callはパラメータを文字列で渡すことができます.
上記で使用したコードに基づいて、他の例を提供します.
パラメータを余分に転送して、「フンは2時間30分動いている」という文字を出力したいです.
コードを見てみましょう.

    let person = {
       name: "훈이",
     };

     let acting = {
       exercise: function (time, minute) {
         console.log(
           `${this.name}는(은) 지금 턱걸이 ${time}시간 ${minute}분째 중`
         );
       },
     };
		//apply(적용시킬곳,파라미터(배열형태))
     acting.exercise.apply(person, [2, 30]);

このように適用すると、必要な結果値が得られます.
functionのパラメータに受信したいパラメータを入力し、apply関数のパラメータ配置領域にパラメータを送信して適用します.
${time}のフォーマットが分からない場合は、私のブログの文章のtemplate literalを参照してください.
https://velog.io/@hoon_dev/JavaScript-Template-Literal
call関数は配列形式ではなく、通常の文字列形式でパラメータを挿入するだけです.

    let person = {
       name: "훈이",
     };

     let acting = {
       exercise: function (time, minute) {
         console.log(
           `${this.name}는(은) 지금 턱걸이 ${time}시간 ${minute}분째 중`
         );
       },
     };
		//call(적용시킬곳,파라미터(문자 형태))
     acting.exercise.call(person, 2,30);

パラメータ転送方式のみを考慮すると、結果は同じになります.^^
もう1つの方法は、Spread Operatorを使用して、開発のために関数にアレイ形式を挿入することです.

      let numbers = [2, 3, 4, 5];

      let plus = function (a, b, c, d) {
        console.log(a + b + c + d);
      };

      plus(...numbers);

この展開方法を使用して、すべてのパラメータを簡単に追加できる関数を作成することもできます.
拡張演算子
https://velog.io/@hoon_dev/JavaScript-Spread-Operator-%ED%99%9C%EC%9A%A9-%EB%B0%A9%EB%B2%95
ここを参考にしてください
ありがとうございます.

参考資料

https://velog.io/@josworks27/%ED%95%A8%EC%88%98%ED%98%B8%EC%B6%9C-call-apply-bind-%EC%B0%A8%EC%9D%B4