ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptの関数を深く理解する

JavaScriptの関数を深く理解する

黄舟
リリース: 2016-12-15 10:29:26
オリジナル
779 人が閲覧しました

関数はモジュール型プログラミングの基礎です。複雑な Ajax アプリケーションを作成するには、関数をより深く理解する必要があります。 JavaScript の関数は他の言語とは異なり、各関数はオブジェクトとして保持され、実行されます。関数オブジェクトのプロパティを使用すると、関数を変数に割り当てたり、関数をパラメーターとして渡すことが簡単にできます。続行する前に、関数を使用する構文を見てみましょう:

function func1(…){…}
var func2=function(…){…};
var func3=function func4(…){…};
var func5=new Function();
これらは関数を宣言するための正しい構文です。これらは、他の言語の一般的な関数や、以前に紹介した関数の定義方法とは大きく異なります。では、なぜ JavaScript でこのように記述できるのでしょうか?それはどのような構文に従いますか?これらについては以下で説明します。

関数オブジェクトを理解する

functionキーワードを使用して関数を定義し、各関数に関数名を指定し、関数名を通じて呼び出すことができます。 JavaScript が解釈されて実行されるとき、関数はオブジェクトとして保持されます。これが、導入される Function オブジェクトです。

関数オブジェクトは他のユーザー定義オブジェクトとは本質的に異なります。このタイプのオブジェクトは内部オブジェクトと呼ばれます。たとえば、日付オブジェクト (Date)、配列オブジェクト (Array)、および文字列オブジェクト (String) はすべて内部オブジェクトです。 。これらの組み込みオブジェクトのコンストラクターは JavaScript 自体によって定義されます。 new Array() などのステートメントを実行してオブジェクトを返すことにより、JavaScript にはユーザーがオブジェクトの構築方法を指定する代わりに、返されたオブジェクトを初期化する内部メカニズムがあります。 。

JavaScriptでは、配列オブジェクトの対応する型がArrayで、日付オブジェクトの対応する型がDateであるのと同じように、関数オブジェクトの対応する型はFunctionです。 new Function()を通じて関数オブジェクトを作成することもできます。オブジェクトを作成するための関数キーワード。理解を容易にするために、関数オブジェクトの作成と配列オブジェクトの作成を比較します。まず配列オブジェクトを見てみましょう: 次の 2 行のコードはどちらも配列オブジェクト myArray を作成します:

var myArray=[];
//
var myArray=new Array();
と同等です。同様に、次の 2 つの部分はコードのコードも関数 myFunction を作成するものです:
function myFunction(a,b){
return a+b;
}
//
var myFunction=new Function("a","b","re​​turn a) と同等+b" );
配列オブジェクトを構築するステートメントと比較すると、関数オブジェクトの本質がよくわかります。前に紹介した関数宣言は、上記のコードの最初の方法であり、インタプリタ内でこれが実行されると、構文が見つかった場合、関数オブジェクトが自動的に構築され、関数を内部オブジェクトとして保存および実行します。ここから、関数オブジェクト名 (関数変数) と通常の変数名は同じ仕様であることがわかります。どちらも変数名を通じて変数を参照できますが、関数変数名の後に括弧とパラメーターを続けることができます。転送機能を実行するリスト。

new Function() の形式で関数を作成することは一般的ではありません。関数本体に複数のステートメントが含まれている場合、それらを文字列の形式でパラメータとして渡すと、コードの可読性が悪くなります。以下はその使用構文の紹介です:

var funcName=new Function(p1,p2,,pn,body);
パラメータの型はすべて文字列であり、p1 から pn は作成された関数のパラメータ名のリストを表します。 body は作成された関数の関数本体ステートメントを表し、funcName は作成された関数の名前です。パラメータを指定せずに空の関数を作成したり、funcName を指定せずに名前のない関数を作成したりすることもできます。もちろん、そのような関数には意味がありません。

p1 から pn はパラメータ名のリストであることに注意してください。つまり、p1 はパラメータを表すだけでなく、カンマで区切られたパラメータのリストにすることもできます。たとえば、次の定義は同等です:

new。 Function("a", "b", "c", "return a+b+c")
new Function("a, b, c", "return a+b+c")
new Function("a ,b ", "c", "return a+b+c")
JavaScript では Function 型が導入され、new Function() などの構文が提供されています。これは、関数オブジェクトがプロパティやメソッドを追加するために Function 型を使用する必要があるためです。
関数の本質は内部オブジェクトであり、JavaScript インタプリタが関数の動作方法を決定します。上記のコードで作成した関数は、プログラム内で関数名を使用して呼び出すことができます。このセクションの冒頭に挙げた関数定義の問題についても説明します。関数宣言の後ろにかっこを直接追加して、関数の作成が完了した直後に関数を呼び出すことを示すことができることに注意してください。たとえば:

var I = Function (a, B) (i);
このコードでは、変数 i の値は 3 に等しい。 i は、作成された関数ではなく戻り値を表します。これは、括弧 "(" が等号 "= よりも優先順位が高いためです。このようなコードは一般的には使用されないかもしれませんが、ユーザーが使用したい場合にはこれがモジュラーの良い解決策です。

関数を作成する次の 2 つの方法は同等であることに注意してください。

function funcName(){
関数本体 名前のない関数を作成します。変数をポイントするだけです。名前のない関数に。使用上の違いは 1 つだけです。名前付き関数の場合は呼び出し後に定義できますが、名前のない関数の場合は呼び出す前に定義する必要があります。例:

<script language="JavaScript" type="text/javascript">
<!--
func();
var func=function(){
alert(1)

}

//-- >
</script>
このステートメントは func に対して未定義エラーを生成し、次のようになります:

func();

var someFunc=function func(){
alert(1)
}
//-->


JavaScriptは説明型言語ですが、関数が呼び出されたときにコード全体に対応する関数定義があるかどうかがチェックされます。この関数名は関数 funcName() の形式で定義されている場合にのみ有効であり、匿名にすることはできません。関数。

関数オブジェクトと他の内部オブジェクトの関係

関数オブジェクトに加えて、Object、Array、Date、RegExp、Math、Errorなど、多くの内部オブジェクトがあります。これらの名前は実際には型を表しており、new 演算子を通じてオブジェクトを返すことができます。ただし、関数オブジェクトは他のオブジェクトとは異なります。typeof を使用して関数オブジェクトの型を取得する場合は、引き続き文字列 "function" を返します。また、配列オブジェクトまたはその他のオブジェクトの typeof を使用する場合は、文字列 "object" を返します。 」。次のコードは、typeof のさまざまなタイプを示しています。



alert(typeof(Function)));
alert(typeof(new Function()));
alert(typeof(Array));
alert(typeof( Object ));

alert(typeof(new Array()));

alert(typeof(new Date()));

alert(typeof(new Object()));

このコードを実行すると、次のことがわかります: 前 4 それぞれステートメントは「関数」を表示し、次の 3 つのステートメントは「オブジェクト」を表示します。新しい関数が実際に関数を返すことがわかります。これは他のオブジェクトとは大きく異なります。 Array や Object などの他の型は、new 演算子を通じて通常のオブジェクトを返します。関数自体もオブジェクトですが、オブジェクト コンストラクターでもあるため、通常のオブジェクトとは異なります。つまり、以前に紹介したオブジェクトを返す新しい関数を作成できます。 typeof が「function」を返すオブジェクトはすべて関数オブジェクトです。このようなオブジェクトはコンストラクターとも呼ばれます。したがって、すべてのコンストラクターがオブジェクトですが、すべてのオブジェクトがコンストラクターであるわけではありません。

関数自体もオブジェクトなので、その型は function です。C++ や Java などのオブジェクト指向言語のクラス定義を考えると、Function 型の役割が推測できます。関数オブジェクト自体のいくつかのメソッドと属性を定義できます。関数のプロトタイプ オブジェクトを使用すると、関数型の定義を簡単に変更および拡張できます。たとえば、関数型 Function は次のように拡張され、method1 メソッドになります。関数は、「関数」を表示するダイアログ ボックスをポップアップすることです:

Function.prototype.method1=function(){

alert("function");

}
function func1(a,b, c){
return a+b+c;
}
func1.method1();
func1.method1.method1 ();
method1 メソッドを呼び出す最後のステートメント func1.method1.mehotd1() に注目してください。関数オブジェクトのメソッド1。少し混乱しているように見えますが、構文を詳しく見ると、これが再帰的定義であることがわかります。 Method1 自体も関数であるため、関数オブジェクトのプロパティとメソッドも持ちます。Function 型へのすべてのメソッド拡張には、このような再帰的なプロパティがあります。

Functionはすべての関数オブジェクトの基礎であり、Objectはすべてのオブジェクト(関数オブジェクトを含む)の基礎です。 JavaScript では、すべてのオブジェクトは Object のインスタンスであるため、すべてのオブジェクトがいくつかの共通のプロパティとメソッドを持つようにオブジェクト タイプを変更できます:

Object.prototype.getType =function()。 {

return typeof(this);
}
var array1=new Array();
function func1(a,b){
return a+b;

alert(array1.getType());アラート(機能1. getType());
上記のコードは、オブジェクトの型を返す getType メソッドをすべてのオブジェクトに追加します。 2 つのアラート ステートメントには、それぞれ「オブジェクト」と「関数」が表示されます。

関数をパラメータとして渡す

関数オブジェクトの本質は以前紹介しましたが、各関数は変数に簡単に代入できる特別なオブジェクトとして表現され、この変数名を通じて関数呼び出しが行われます。変数として、パラメータの形式で別の関数に渡すことができます。これは、JavaScript イベント処理メカニズムの以前の紹介で見られました。たとえば、次のプログラムは func1 をパラメータとして func2 に渡します。 func1( theFunc){

theFunc();

}
function func2(){
alert("ok");
}
func1(func2);
最後の文では、func2 がオブジェクトとして仮引数に渡されています。 func1 の theFunc を呼び出した後、func1 によって theFunc が内部的に呼び出されます。実際、関数をパラメータとして渡すこと、または関数を他の変数に割り当てることは、すべてのイベント メカニズムの基礎です。

たとえば、ページの読み込み時に初期化作業を実行する必要がある場合は、最初に init 初期化関数を定義し、それを window.onload=init; ステートメントを通じてページ読み込み完了イベントにバインドできます。ここでの init は関数オブジェクトであり、ウィンドウの onload イベント リストに追加できます。

上記は JavaScript の関数についての詳細な理解です。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート