Call、Apply、Bind に関するブログがまたひとつ増えました。-jsチュートリアル-php.cn

Call、Apply、Bind に関するブログがまたひとつ増えました。

DDD

リリース： 2024-11-25 09:17:11

オリジナル

942 人が閲覧しました

Yet another blog on Call, Apply & Bind..!!
ブラブラブラ..

わかった、聞いてください..!!

何百ものブログやチュートリアルで、呼び出し、バインド、適用について説明しています。なんと、ChatGPT や Copilot でも簡素化できるのです!

では、なぜ別の投稿をするのでしょうか?まあ、これはあなたのためのものではなく、JavaScript の基礎を再検討するときの私の自己メモです。

フロントエンド開発に 8 年間携わった後でも、これらのメソッドを混同することがあります。結局のところ、混乱は多くの場合、面接の質問における分類方法に起因していることがわかりました。今回は、心に残る方法で詳しく説明しましょう。

良いところまで飛ばしてもいいでしょうか。

なぜ面接では必ず電話をかけたり、拘束したり、応募したりするのでしょうか?機能的には、call と apply はより近く、bind は新しい関数を返しますが、関数をすぐに呼び出します。タイトルでこのようにグループ化したのはそのためです。

よりよく理解するために、その使用法を見てみましょう。

コール、バインド、適用に共通するものは何ですか?

call 、 bind 、および apply は、 this の値を明示的に設定して渡すことを可能にする関数で使用できるメソッドです。関数への引数。

コール、バインド、適用の違いは何ですか?

呼び出しと適用はすぐに関数を呼び出しますが、Bind メソッドは関数をすぐには呼び出しません。代わりに、this が指定された値に設定された新しい関数を返します。この返された関数は後で呼び出し/実行できます。

それでは、CallとApplyの違いは何でしょうか？

Call と apply は両方ともカスタム this を使用して関数を即座に呼び出しますが、追加の引数をどのように受け取るかがそれらを区別します。

Call は個々の引数を受け取りますが、Apply は引数の配列を受け取ります。

例

call、apply、bind の使用法を理解するために、以下の引数を見てみましょう。

function Greetings(greeting,punctuation){
    return `${greeting} ${this.name} ${punctuation}`
}

var person = {
    name : "Nandan"
}

// Call: Immediately invokes the function with individual arguments
console.log(Greetings.call(person,"Hello","!")); // Output : Hello Nandan !

// Apply: Immediately invokes the function, but takes arguments as an array
console.log(Greetings.apply(person,["Hello","!"])); // Output : Hello Nandan !

// Bind: Returns a new function with `this` bound to the specified value
let greet = Greetings.bind(person,"Hello","!");
console.log(greet()); // Output : Hello Nandan !

//Note:
console.log(Greetings.bind(person,"Hello","!")); // Output : It will return a function

ログイン後にコピー

追加の例

使用 call : 別のオブジェクトからメソッドを借用:

let person1 = { name: "Nandan" };
let person2 = { name: "Kumar" };

function introduce() {
    console.log(`Hi, my name is ${this.name}`);
}

introduce.call(person1); // Hi, my name is Nandan
introduce.call(person2); // Hi, my name is Kumar

ログイン後にコピー

の使用 apply : 配列内の最大値の検索:

let numbers = [1, 2, 3, 4, 5];
console.log(Math.max.apply(null, numbers)); // 5

ログイン後にコピー

バインド の使用: カスタム this:
によるイベント処理

let button = document.getElementById("myButton");
let user = {
    name: "Nandan",
    greet() {
        console.log(`Hello, ${this.name}`);
    }
};

button.addEventListener("click", user.greet.bind(user));

ログイン後にコピー

さらに、この表が理解を深めるのに役立つことを願っています。

機能	実行	引数	ユースケース
電話	関数をすぐに実行します	個別に合格	呼び出し時に引数がわかっている場合
適用	関数をすぐに実行します	配列として渡されます	引数が配列の場合
バインド	新しい関数を返します (実行されません)	オプションで新しい関数用に事前入力されます	再利用可能な機能または事前設定された機能が必要な場合