この記事では、JavaScriptのさまざまな関数呼び出しの方法と原則を詳細に紹介します。これは、JavaScript機能を理解するのに非常に役立ちます。
JavaScript、機能を呼び出す5つの方法
何度も、バグフリーのJavaScriptコードは、JavaScript機能がどのように機能するかを実際に理解していないことが原因であることがわかりました（ちなみに、そのコードの多くは私によって書かれています）。 JavaScriptには機能的なプログラミングの性質があり、それが直面することを選択したときに私たちの進歩の障壁になります。
初心者として、5つの関数呼び出しをテストしましょう。表面からは、これらの関数はC＃の関数と非常に似ていると考えていますが、将来にはまだ非常に重要な違いがあることがわかります。これらの違いを無視すると、間違いなく追跡が困難なバグにつながります。まず、以下で使用する単純な関数を作成しましょう。この関数は、これの現在の値と2つのパラメーターの現在の値のみを返します。
コードコピーは次のとおりです。
<script type = "text/javascript">
function makearray（arg1、arg2）{
return [this、arg1、arg2];
}
</script>
最も一般的に使用される方法ですが、残念ながらグローバル関数呼び出し
JavaScriptを学習すると、上記の例で構文を使用して関数を定義する方法を学びます。
、また、この関数を呼び出すことは非常に単純であり、私たちがする必要があるのは次のことだけです。
コードコピーは次のとおりです。
makearray（ 'one'、 'two'）;
// => [window、 'one'、 'two']
ちょっと待って。そのウィンドウは何ですか
alert（typeof window.methodthatdoesntexist）;
// =>未定義
アラート（typeof window.makearray）;
// =>
window.makearray（ 'one'、 'two'）;
// => [window、 'one'、 'two']
コールの最も一般的な方法は、デフォルトでグローバルであると宣言する機能を引き起こすため、不幸だと言います。私たちは皆、グローバルメンバーがプログラミングのベストプラクティスではないことを知っています。これは、JavaScriptで特に正しいです。 JavaScriptのグローバルメンバーを避けたことを後悔することはありません。
JavaScript関数コールルール1
MyFunction（）などの明示的な所有者オブジェクトによって直接呼び出されない関数では、この値がデフォルトのオブジェクト（ブラウザのウィンドウ）になります。
関数呼び出し
今すぐシンプルなオブジェクトを作成し、Makearray関数をその方法として使用しましょう。 JSONメソッドを使用してオブジェクトを宣言します。また、この方法も呼び出します
コードコピーは次のとおりです。
//オブジェクトの作成
var arraymaker = {
SomeProperty：「ここでの価値」、
メイク：Makearray
};
// make（）メソッドを呼び出します
arraymaker.make（ 'one'、 'two'）;
// => [arraymaker、 'one'、 'two']
//正方形の括弧を使用した代替構文
arraymaker ['make']（ 'one'、 'two'）;
// => [arraymaker、 'one'、 'two']
ここでの違いを参照してください。この値はオブジェクト自体になります。なぜ元の関数定義が変更されていないのか、なぜウィンドウではないのか疑問に思うかもしれません。まあ、これはJSavarで機能を渡す方法です。関数は、JavaScriptの標準データ型、または正確にはオブジェクトです。あなたはそれらを渡すか、それらをコピーすることができます。それはまるで関数全体とパラメーターリストと関数本文がコピーされ、Arraymakerでプロパティに割り当てられているかのようなものであるため、次のようなArraymakerを定義するようなものです。
コードコピーは次のとおりです。
var arraymaker = {
SomeProperty：「ここでの価値」、
make：function（arg1、arg2）{
return [this、arg1、arg2];
}
};
JavaScript関数コールルール2
obj.myfunction（）やobj ['myfunction']（）などのメソッドコール構文では、この値はobjです
これは、イベント処理コードのバグの主なソースです。これらの例を見てください
コードコピーは次のとおりです。
<入力型= "ボタン"値= "ボタン1" id = "btn1" />
<入力型= "ボタン"値= "ボタン2" id = "btn2" />
<入力型= "ボタン"値= "ボタン3" id = "btn3" onclick = "buttonclicked（）;"/>
<script type = "text/javascript">
関数ButtonClicked（）{
var text =（this === window）？ 「ウィンドウ」：this.id;
アラート（テキスト）;
}
var button1 = document.getElementById（ 'btn1'）;
var button2 = document.getElementById（ 'btn2'）;
button1.onclick = buttonclicked;
button2.onclick = function（）{buttonclicked（）; };
</script>
最初のボタンをクリックすると、「BTN」が表示されます。これはメソッド呼び出しであるため、これはそれが属するオブジェクト（ボタン要素）です。 [2番目のボタン]ボタンをクリックすると「ウィンドウ」が表示されます。ボタンクリックが直接呼ばれるため（obj.buttonclicked（）。）これは、イベント処理機能をラベルに直接配置する3番目のボタンと同じです。したがって、3番目のボタンをクリックした結果は、2番目のボタンと同じです。
jQueryのようなJSライブラリを使用するには利点があります。イベントハンドラーがjQueryで定義されている場合、JSライブラリはこの値をオーバーライドして、現在のイベントソース要素への参照が含まれていることを確認します。
コードコピーは次のとおりです。
// jqueryを使用します
$（ '＃btn1'）。クリック（function（）{
アラート（this.id）; // jQueryは「これ」がボタンになることを保証します
}）;
JQueryはこれの価値をどのように過負荷にしますか？読み続けます
他の2つ：apply（）とcall（）
JavaScript関数を使用すればするほど、関数を渡して異なるコンテキストで呼び出す必要があることがわかります。 Qjueryがイベント処理機能で行うように、この値をリセットする必要があることがよくあります。 JavaScriptの関数はオブジェクトでもあることを覚えておいてください。関数オブジェクトには、いくつかの事前定義されたメソッドが含まれており、そのうち2つは適用（）とcall（）です。これを使用してこれをリセットできます。
コードコピーは次のとおりです。
var Gasguzzler = {Year：2008、Model： 'Dodge Bailout'};
makearray.apply（gasguzzler、['one'、 'two']）;
// => [Gasguzzler、 'one'、 'Two']]
makearray.call（gasguzzler、 'one'、 'two'）;
// => [Gasguzzler、 'one'、 'Two']]
これらの2つの方法は類似しており、違いは次のパラメーターの違いです。 function.apply（）は配列を使用して関数に渡され、function.call（）はこれらのパラメーターを個別に渡します。実際には、ほとんどの場合、Apply（）がより便利であることがわかります。
jSavarscript関数コールルール3
関数をメソッドにコピーせずにこの値を過負荷にしたい場合は、myFunction.Apply（OBJ）またはMyFunction.Call（OBJ）を使用できます。
コンストラクタ
JavaScriptのタイプの定義を掘り下げたくありませんが、現時点ではJavaScriptにクラスがなく、カスタムタイプには初期化関数が必要であることを知る必要があります。また、プロトタイプオブジェクト（初期化関数のプロパティとして）を使用してタイプを定義することをお勧めします。シンプルなタイプを作成しましょう
コードコピーは次のとおりです。
//コンストラクターを宣言します
function arraymaker（arg1、arg2）{
this.someProperty = 'whathy';
this.thearray = [this、arg1、arg2];
}
//インスタンス化方法を宣言します
arraymaker.prototype = {
somemethod：function（）{
アラート（ 'somemethod call'）;
}、
getArray：function（）{
this.thearrayを返します。
}
};
var am = new arraymaker（ 'one'、 'two'）;
var other = new arraymaker（ 'first'、 'second'）;
am.getArray（）;
// => [am、 'one'、 'two']
非常に重要で注目に値するのは、関数呼び出しの前に表示される新しいオペレーターです。それがなければ、あなたの関数はグローバル関数のようなものであり、作成するプロパティはグローバルオブジェクト（ウィンドウ）に作成され、それを行いたくありません。別のトピックは、コンストラクターに戻り値がないため、新しいオペレーターの使用を忘れた場合、変数の一部に未定義に割り当てられることです。このため、大文字から始めるのは良い習慣です。これは、呼び出し時に以前の新しいオペレーターを忘れないようにするためのリマインダーとして使用できます。
このような注意が払えば、初期化関数のコードは、他の言語で書いた初期化関数に似ています。これの値は、作成するオブジェクトになります。
JavaScript関数コールルール4
MyFunction（）のような初期化関数として関数を使用すると、JavaScriptランタイムは、この値を新しく作成したオブジェクトとして指定します。
さまざまな関数の呼び出しメソッドの違いを理解することで、SjavaScriptコードがバグから遠ざかることができることを願っています。そのようなバグのいくつかは、この価値がそれらを回避するための最初のステップであることを常に知っていることを確認します。