JavaScript関数定義
JavaScript は、キーワード function を使用して関数を定義します。
関数は宣言によって定義することも、式として定義することもできます。
関数宣言
前のチュートリアルでは、関数宣言の構文を学習しました:
実行されたコード
}
関数宣言の後には何もありませんすぐに実行され、必要なときに呼び出されます。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</body>
</html>インスタンスの実行 »
オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください
 | セミコロンは、実行可能な JavaScript ステートメントを区切るために使用されます。 関数宣言は実行文ではないため、セミコロンで終わりません。 |
|---|
関数式
JavaScript 関数は式によって定義できます。
関数式は変数に保存できます:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以存储在变量中:</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>実行例»
「インスタンスの実行」ボタンをクリックしてオンライン例を表示します
関数式を変数に保存した後、変数は関数としても使用できます:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数存储在变量后，变量可作为函数使用：</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
上記の関数は実際には匿名関数です(関数には名前がありません)。
関数は変数に格納され、通常は変数名を通じて呼び出されます。
| 上記の関数は実行文なのでセミコロンで終わります。 |
|---|
Function() コンストラクター
上の例では、関数がキーワード function を通じて定義されることを学びました。
関数は、組み込みの JavaScript 関数コンストラクター (Function()) を通じて定義することもできます。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>JavaScrip 内置构造函数。</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>インスタンスの実行 »
オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください
実際、コンストラクターを使用する必要はありません。上記の例は次のように記述できます:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Run Example»
オンラインの例を表示するには、[Run Example] ボタンをクリックしてください
| JavaScript では、多くの場合、 new キーワードの使用は避ける必要があります。 |
|---|
関数ホイスティング（ホイスティング）
「ホイスティング」については、前のチュートリアルですでに学習しました。
ホイスティングは、現在のスコープを前面にホイストする JavaScript のデフォルトの動作です。
ホイスティングは変数宣言と関数宣言に適用されます。
したがって、関数は宣言される前に呼び出すことができます:
function myFunction(y) {
Return y * y;
}
表現。
自己呼び出し関数
関数式は「自分自身を呼び出す」ことができます。
自己呼び出し式は自動的に呼び出されます。
式の後に()が続くと自動的に呼び出されます。
宣言された関数を自分で呼び出すことはできません。
括弧を追加して関数式であることを示します:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可以自动调用：</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>
</body>
</html>インスタンスの実行»
オンラインの例を表示するには、[インスタンスの実行]ボタンをクリックしてください
上記の関数は実際には 匿名の自己呼び出し関数 (関数名なし)。
関数は値として使用できます
JavaScript 関数は値として使用できます:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可作为一个值：</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>インスタンスの実行»
オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックしてください
JavaScript 関数使用する式:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>函数可作为一个表达式使用。</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>実行例»
オンライン例を表示するには、[インスタンスの実行]ボタンをクリックしてください
関数はオブジェクトです
typeofを使用しますJavaScript の演算子を使用して関数の型を決定すると、 "function" が返されます。
しかし、JavaScript 関数をオブジェクトとして記述する方が正確です。
JavaScript 関数には、プロパティとメソッドがあります。
arguments.length プロパティは、関数呼び出し中に受け取ったパラメーターの数を返します。
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p> arguments.length 属性返回函数接收到参数的个数：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>インスタンスを実行する»
[インスタンスを実行] ボタンをクリックして、オンライン インスタンスを表示します
toString( ) メソッドは機能します 文字列として返されます:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p> toString() 将函数作为一个字符串返回：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
| 関数は、オブジェクト メソッドと呼ばれるオブジェクトのプロパティとして定義されます。 関数が新しいオブジェクトの作成に使用される場合、その関数はオブジェクトのコンストラクターと呼ばれます。 |
|---|
