JavaScript関數(shù)定義
JavaScript は関數(shù)を定義するためにキーワード function を使用します。
関數(shù)は宣言によって定義することも、式として定義することもできます。
関數(shù)宣言
前のチュートリアルでは、関數(shù)宣言の構(gòu)文を?qū)W習(xí)しました:
function functionName(parameters) {
実行されたコード
}
関數(shù)宣言の後、すぐには実行されません。必要なときに呼び出されます。
例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p>本例調(diào)用的函數(shù)會(huì)執(zhí)行一個(gè)計(jì)算,然后返回結(jié)果:</p> <p id="demo"></p> <script> function myFunction(a,b){ return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3); </script> </body> </html>
プログラムを?qū)g行して試してください
ヒント: 関數(shù)宣言は実行可能な JavaScript ステートメントを區(qū)切るために使用されます。関數(shù)宣言は実行可能なステートメントではないため、セミコロンで終わりません。 。
関數(shù)式
JavaScript 関數(shù)は式によって定義できます。
関數(shù)式を変數(shù)に格納できます:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p>函數(shù)可以存儲(chǔ)在變量中:</p> <p id="demo"></p> <script> var x = function (a, b) {return a * b}; document.getElementById("demo").innerHTML = x; </script> </body> </html>
プログラムを?qū)g行して試してください
関數(shù)式を変數(shù)に格納した後、変數(shù)を関數(shù)として使用することもできます:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p>函數(shù)存儲(chǔ)在變量后,變量可作為函數(shù)使用:</p> <p id="demo"></p> <script> var x = function (a, b) {return a * b}; document.getElementById("demo").innerHTML = x(4, 3); </script> </body> </html>
プログラムを?qū)g行して試してくださいそれ
上記の関數(shù)は実際には匿名関數(shù)(関數(shù)には名前がありません)です。
関數(shù)は変數(shù)に格納され、通常は変數(shù)名を通じて呼び出されます。
ヒント: 上記の関數(shù)は実行ステートメントであるため、セミコロンで終わります。
Function() コンストラクター
上の例では、関數(shù)がキーワード function を通じて定義されていることを?qū)Wびました。
関數(shù)は、組み込みの JavaScript 関數(shù)コンストラクター (Function()) を通じて定義することもできます。
例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p>JavaScrip 內(nèi)置構(gòu)造函數(shù)。</p> <p id="demo"></p> <script> var myFunction = new Function("a", "b", "return a * b"); document.getElementById("demo").innerHTML = myFunction(4, 3); </script> </body> </html>
プログラムを?qū)g行して試してみましょう
ヒント: JavaScript では、多くの場(chǎng)合、new キーワードの使用を避ける必要があります。
実際には、コンストラクターを使用する必要はありません。上記の例は次のように記述できます:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p id="demo"></p> <script> var myFunction = function (a, b) {return a * b} document.getElementById("demo").innerHTML = myFunction(4, 3); </script> </body> </html>
プログラムを?qū)g行して試してください
関數(shù)ホイスティング(巻き上げ)
前回のチュートリアルで、「ホイスティング(巻き上げ)」についてはすでに學(xué)習(xí)しました。
ホイスティングは、現(xiàn)在のスコープを前面にホイストする JavaScript のデフォルトの動(dòng)作です。
ホイスティングは変數(shù)宣言と関數(shù)宣言に適用されます。
したがって、関數(shù)は宣言される前に呼び出すことができます:
myFunction(5);
function myFunction(y) {
Return y * y;
}
表現(xiàn)。
自己呼び出し関數(shù)
関數(shù)式は「自己呼び出し」できます。
自己呼び出し式は自動(dòng)的に呼び出されます。
式の後に()が続くと自動(dòng)的に呼び出されます。
宣言された関數(shù)を自分で呼び出すことはできません。
括弧を追加して関數(shù)式であることを示します:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p>函數(shù)可以自動(dòng)調(diào)用:</p> <p id="demo"></p> <script> (function () { document.getElementById("demo").innerHTML = "Hello! 我是自己調(diào)用的"; })(); </script> </body> </html>
プログラムを?qū)g行して試してみましょう
上記の関數(shù)は、実際には匿名の自己呼び出し関數(shù) (関數(shù)名なし) です。
関數(shù)を値として使用できます
JavaScript 関數(shù)を値として使用できます:
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p>函數(shù)可作為一個(gè)值:</p> <p>x = myFunction(4,3) 或 x = 12</p> <p>兩種情況下,x 的值都為 12。</p> <p id="demo"></p> <script> function myFunction(a, b) { return a * b; } var x = myFunction(4, 3); document.getElementById("demo").innerHTML = x; </script> </body> </html>
プログラムを?qū)g行して試してみる
JavaScript 関數(shù)できる式として使用できます:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p>函數(shù)可作為一個(gè)表達(dá)式使用。</p> <p id="demo"></p> <script> function myFunction(a, b) { return a * b; } var x = myFunction(4, 3) * 2; document.getElementById("demo").innerHTML = x; </script> </body> </html>
プログラムを?qū)g行して試してください
関數(shù)はオブジェクトです
JavaScriptでtypeof演算子を使用して関數(shù)の型を決定すると、「function」が返されます。
しかし、JavaScript 関數(shù)はオブジェクトとしてより正確に記述されます。
JavaScript 関數(shù)にはプロパティとメソッドがあります。
arguments.length プロパティは、関數(shù)呼び出し中に受け取ったパラメータの數(shù)を返します:
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p> arguments.length 屬性返回函數(shù)接收到參數(shù)的個(gè)數(shù):</p> <p id="demo"></p> <script> function myFunction(a, b) { return arguments.length; } document.getElementById("demo").innerHTML = myFunction(4, 3); </script> </body> </html>
プログラムを?qū)g行して試してください
toString() メソッドは関數(shù)を文字列として返します:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p> toString() 將函數(shù)作為一個(gè)字符串返回:</p> <p id="demo"></p> <script> function myFunction(a, b) { return a * b; } document.getElementById("demo").innerHTML = myFunction.toString(); </script> </body> </html>
プログラムを?qū)g行して試してみてください
ヒント: オブジェクトの屬性として定義された関數(shù)は、オブジェクト メソッドと呼ばれ、その関數(shù)が新しいオブジェクトの作成に使用される場(chǎng)合、その関數(shù)はオブジェクトのコンストラクターと呼ばれます。 。