Javascript_javascript スキルで関数メソッドを呼び出すいくつかの方法の紹介

JavaScript の構文は柔軟であり、同じ関数を実装する方法が 5 つまたは 6 つあることも珍しくありませんが、人間に反したプロトタイプの継承や非同期機能と組み合わせると、さらに混乱が生じます。 callとapplyの違いがよく分からないので、今日は忘れないように記録しておきます。

JavaScript では、メソッドは次の方法で実行できます:

1.func()、これは最も直接的で一般的な呼び出し方法であり、一般の人々の思考ロジックにも一致していますが、場合によってはいくつかの欠点があります。これについては以下で説明します。

2. (function(arg){})(window)、匿名メソッド呼び出しは、名前空間を構築する場合に便利です。次の括弧内のパラメーターは、匿名メソッドの入力パラメーターに対応します。

3.func.bind(sth)()、mozilla マニュアル には、bind が ECMA-262 5th Edition で追加された新機能であると記載されており、ここでは別途リストされています。メソッドを呼び出すと、直接呼び出しでスコープをバインドできないという欠点が補われます。

4.func.call()、これは 2 番目の呼び出しメソッドです。呼び出しメソッドは、現在のメソッドを実行するために各メソッドのプロトタイプで定義されます。

5.func.apply()、call の双子の兄弟。

関数()

これは最も一般的な呼び出し方法であり、どの言語でもどこでも見られます。 func(x, y) はさまざまなパラメータを渡すことができます。 php や java などの一部の言語では、この呼び出しですべての問題を解決できます。しかし、JavaScript は関数型言語であり、クロージャの概念と奇妙なキーワードがこの呼び出しメソッドの欠点を決定します。これは現在のコード セグメントのスコープとして解釈されるべきであり、コードが別のセグメントに対して実行されると変化します。ただし、一部の DOM にバインドされたイベントなど、これを変更したくない場合もあります。これが呼び出されたときにウィンドウ オブジェクトに転送されることは望ましくありませんが、次のコードのように転送される場合があります。

コードをコピー コードは次のとおりです:

var a ={};
var func = function(x) {
console.log(this);
};
a.onclick = function() {
var x = 100;
func(x);
};
a.onclick();

定義されたメソッドをすぐに呼び出すのではなく、onclick イベントにバインドしたいだけであり、このメソッドにはパラメーターがあるため、匿名メソッド Wrap を使用する必要があります。それを a の onclick イベントに渡します。問題があります。これは func 内でグローバル オブジェクト ウィンドウになります。現時点では、 func() を使用した直接呼び出しは機能しないため、この外部の func を func メソッドにバインドする必要があります。したがって、bind、call、apply メソッドがあります。

バインド

バインドの目的は非常に単純で、このオブジェクトにバインドされた同じメソッドを返すことです。上記のコードを 1 行変更するだけで、これをオブジェクトにバインドするという目的を達成できます。

コードをコピー コードは次のとおりです:

var a ={};
var func = function(x) {
console.log(this);
};
a.onclick = function() {
var x = 100;
func.bind(this)(x) // ここにバインドします
};
a.onclick();

こうすることで、onclick イベントの this が頭のないハエのように走り回ることはなくなります。

電話して応募してください

Call と apply は非常に似ているため、一緒に言及する必要があります。どちらも複数のパラメーターをサポートしており、最初のパラメーターはバインドされる this オブジェクトであり、call は呼び出しメソッドの入力パラメーターとして独立したパラメーターを使用し、apply は入力パラメーターとして配列を使用します。 。このオブジェクトを変更したくない場合がありますが、このとき、call と apply は非常に便利です。 (bindが使えないわけではありませんが、bindが登場したのが比較的後だったようで、ブラウザの互換性が良くないのかもしれません)。例を挙げてみましょう:

コードをコピー コードは次のとおりです:

a = {
func: function() {
This.x = 1;
},
×：0
};
b = {
あ：あ、
×：20
};
for(var i = 0; i b.a.func();
}
console.log(a.x);
console.log(b.x);

上記の a オブジェクトと b オブジェクトには両方とも x があります。func が対応する x を目的の方法で変更できることを期待していますが、直接呼び出しでは、func のスコープ (つまり a.x) 内の x のみを変更できます。コードを変更することで、b.x
を変更する目的を達成できます。

コードをコピー コードは次のとおりです:

a = {
func: function() {
This.x = 1;
},
×：0
};
b = {
あ：あ、
×：20
};
for(var i = 0; i b.a.func.call(b); // これを b
にバインドします。 }
console.log(a.x);
console.log(b.x);

この栗はうまく表現されておらず、少し突飛で、混乱しやすいコーディング スタイルです。適用可能なシナリオはありますが、どこにでも適用できるわけではありません。