JavaScriptにおけるapply、call、bindの使い方の違い_基礎知識

JS では、この 3 つは関数の this オブジェクトのポイントを変更するために使用されます。これらの違いは何ですか。

違いについて説明する前に、3 つの類似点をまとめてみましょう:

1. これらはすべて、関数の this オブジェクトのポイントを変更するために使用されます。

2. 最初のパラメータは、これが指すオブジェクトです。

3. 後続のパラメータを使用してパラメータを渡すことができます。

では、まず例を見てみましょう。

        var xw = {
            name : "小王",
            gender : "男",
            age : 24,
            say : function() {
                alert(this.name + " , " + this.gender + " ,今年" + this.age);                
            }
        }
        var xh = {
            name : "小红",
            gender : "女",
            age : 18
        }
        xw.say();

それ自体は特に言うべきことはありません。写っているのは今年 24 歳のシャオ・ワンさんでしょう。
では、xwのsayメソッドを使ってxhのデータを表示する方法を説明します。
電話の場合は、次のようにすることができます:

1.xw.say.call(xh);

適用するには、次の操作を実行できます:

1.xw.say.apply(xh);

バインドの場合は次のようにする必要があります:

1.xw.say.bind(xh)();

xw.say.bind(xh) を直接書いた場合、結果は得られません。違いがわかりますか? call と apply はどちらも関数への直接呼び出しであり、bind メソッドは引き続き関数を返すため、後で呼び出すには () が必要です。
それでは、call と apply の違いは何でしょうか?例を少し書き直してみましょう。

        var xw = {
            name : "小王",
            gender : "男",
            age : 24,
            say : function(school,grade) {
                alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                
            }
        }
        var xh = {
            name : "小红",
            gender : "女",
            age : 18
        }

say メソッドにはさらに 2 つのパラメーターがあることがわかります。call/apply のパラメーターを介してパラメーターを渡します。
これは通話の場合です

1.xw.say.call(xh,"実験小学校","6年生");

適用すると次のようになります

1.xw.say.apply(xh,["実験小学校","6 年生"]);

呼び出し後のパラメータは Say メソッドと 1 対 1 に対応しますが、apply の 2 番目のパラメータは配列と 1 対 1 に対応します。これが両者の最大の違いです。

では、バインドはどのようにパラメータを渡すのでしょうか? call のようにパラメータを渡すことができます。

1.xw.say.bind(xh,"実験小学校","6年生")();

しかし、bind は依然として関数を返すため、呼び出し時にパラメータを渡すこともできます。

1.xw.say.bind(xh)("実験小学校","6 年生");

上記の JavaScript での apply、call、bind の使用方法の違いはすべてエディターによって共有されている内容ですので、参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。