ブラブラブラ..

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

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

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

フロントエンド開(kāi)発に 8 年間攜わった後でも、これらのメソッドを混同することがあります。結(jié)局のところ、混亂は多くの場(chǎng)合、面接の質(zhì)問(wèn)における分類(lèi)方法に起因していることがわかりました。今回は、心に殘る方法で詳しく説明しましょう。

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

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

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

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

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

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

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

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

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

Call は個(gè)々の引數(shù)を受け取りますが、Apply は引數(shù)の配列を受け取ります。

例

call、apply、bind の使用法を理解するために、以下の引數(shù)を見(jiàn)てみましょう。

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 : 配列內(nèi)の最大値の検索:

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));

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

以上です、皆さん！コール、適用、バインドに関するこの短いメモがお役に立てば幸いです。これを気に入っていただけたなら、私のウェブサイト https://nandan.dev/

お?dú)葺Xにコメントしてください。connect@nandan.dev にメールしていただくか、Twitter、Instagram、GitHub でご連絡(luò)ください。 JavaScript トピックに関する定期的な最新情報(bào)を入手するには、ニュースレターを購(gòu)読することを忘れないでください!

ツイッター | インスタグラム | Github | ウェブサイト

以上がCall、Apply、Bind に関するブログがまたひとつ増えました。の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。