JavaScript の基本 - 4 日目のメモ
カプセル化の意味を理解し、関数宣言を通じて論理的なカプセル化を実装できるようになり、オブジェクトのデータ型の特性を理解し、数学的オブジェクトを組み合わせて単純な計算関数を実装できるようになります。
- 関数のカプセル化の特徴を理解する
- 関数宣言の構文をマスターする
- 関数の戻り値が何であるかを理解する
- 一般的な組み込み関数を理解し、使用できるようにする
関数
関数のカプセル化特性を理解し、関数の構文規則をマスターする
宣言と呼び出し
関数は、同じまたは類似のロジックでコードを「ラップ」し、関数呼び出しを通じてこれらの「ラップされた」コード ロジックを実行できます。この利点は、コードが簡素化され、再利用が容易になることです。
宣言（定義）
キーワード、関数名、仮パラメータ、関数本体、戻り値を含む完全な関数を宣言 (定義) します。
移行
宣言された (定義された) 関数は、実際に実行される前に呼び出す必要があります。()関数を呼び出すには を使用します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 声明和调用</title>
</head>
<body>
<script>
// 声明（定义）了最简单的函数，既没有形式参数，也没有返回值
function sayHi() {
console.log('嗨~')
}
// 函数调用，这些函数体内的代码逻辑会被执行
// 函数名()
sayHi()
// 可以重复被调用，多少次都可以
sayHi()
</script>
</body>
</html>
注: 関数名の命名規則は変数と一致しており、関数名のセマンティクスを保証するように努めています。
小ケース：リトルスター
<script>
// 函数声明
function sayHi() {
// document.write('hai~')
document.write(`*<br>`)
document.write(`**<br>`)
document.write(`***<br>`)
document.write(`****<br>`)
document.write(`*****<br>`)
document.write(`******<br>`)
document.write(`*******<br>`)
document.write(`********<br>`)
document.write(`*********<br>`)
}
// 函数调用
sayHi()
sayHi()
sayHi()
sayHi()
sayHi()
</script>
パラメータ
関数にパラメータを渡すことにより、関数をより柔軟かつ変更可能にし、パラメータを変数として理解できるようになります。
こんにちはという機能を持つ関数を宣言 (定義) します。
- 受信データ一覧
- この関数を宣言するには、いくつかのデータを渡す必要があります
- 複数のデータはカンマで区切ります
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 函数参数</title>
</head>
<body>
<script>
// 声明（定义）一个功能为打招呼的函数
// function sayHi() {
// console.log('嗨~')
// }
// 调用函数
// sayHi()
// 这个函数似乎没有什么价值，除非能够向不同的人打招呼
// 这就需要借助参数来实现了
function sayHi(name) {
// 参数 name 可以被理解成是一个变量
console.log(name)
console.log('嗨~' + name)
}
// 调用 sayHi 函数，括号中多了 '小明'
// 这时相当于为参数 name 赋值了
sayHi('小明')// 结果为 小明
// 再次调用 sayHi 函数，括号中多了 '小红'
// 这时相当于为参数 name 赋值了
sayHi('小红') // 结果为 小红
</script>
</body>
</html>
要約:
- 関数を宣言（定義）する際の仮引数の数に制限はありませんので、仮引数が複数ある場合は、
,separateを使用してください。 - 呼び出し関数によって渡される実際のパラメータは、仮パラメータと同じ順序である必要があります。
仮パラメータと実パラメータ
仮引数： 関数を宣言する際、関数名の右側の括弧内に書かれているものを仮引数（仮引数）といいます。
実引数：関数を呼び出す際、関数名の右側の括弧内に書かれたものを実引数（実引数）といいます。
仮パラメータは、この関数内で宣言された変数 (たとえば、num1 = 10) として理解でき、実パラメータは、この変数に値を代入するものとして理解できます。
開発中は、仮パラメータと実パラメータの数を一致させるようにしてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 函数参数</title>
</head>
<body>
<script>
// 声明（定义）一个计算任意两数字和的函数
// 形参 x 和 y 分别表示任意两个数字，它们是两个变量
function count(x, y) {
console.log(x + y);
}
// 调用函数，传入两个具体的数字做为实参
// 此时 10 赋值给了形参 x
// 此时 5 赋值给了形参 y
count(10, 5); // 结果为 15
</script>
</body>
</html>
戻り値
関数の本質はカプセル化（ラップ）ですが、関数本体内のロジックを実行した後、関数内の実行結果を関数の外にどうやって取り出すことができるのでしょうか。関数の内部ロジックの実行結果を取得するには、returnこのキーワードを渡して内部の実行結果を関数の外部に転送する必要があり、外部に転送された結果が戻り値となります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 函数返回值</title>
</head>
<body>
<script>
// 定义求和函数
function count(a, b) {
let s = a + b
// s 即为 a + b 的结果
// 通过 return 将 s 传递到外部
return s
}
// 调用函数，如果一个函数有返回值
// 那么可将这个返回值赋值给外部的任意变量
let total = count(5, 12)
</script>
</body>
</html>
要約:
- 関数本体内で return キーワードを使用すると、内部の実行結果を関数の外部に転送して使用できます。
- return は関数内で 1 回だけ使用でき、return 後のコードの次の行は再度実行されないため、return 後のデータを新しい行に記述する必要はありません。
- return は現在の関数を直ちに終了します
- 関数に戻り値を持たせることはできません。その場合、デフォルトの戻り値は未定義になります。
範囲
一般に、プログラム コードの一部で使用される名前は常に有効で使用できるとは限りません。名前の使用可能性を制限するコード スコープは名前のスコープです。
スコープを使用すると、プログラム ロジックの局所性が向上し、プログラムの信頼性が向上し、名前の競合が減少します。
グローバルスコープ
すべてのコードが実行される環境 (script タグ全体内) または独立した js ファイルに作用します。
グローバルスコープ内の変数はグローバル変数と呼ばれます
ローカルスコープ
関数で動作するコード環境はローカル スコープです。関数に関係するため、関数スコープとも呼ばれます。
ローカルスコープ内の変数はローカル変数と呼ばれます
変数が関数内で宣言されておらず、直接割り当てられている場合もグローバル変数として扱われますが、これは強く推奨されません。
ただし、関数内の仮パラメータがローカル変数と見なされる場合があります。
無名関数
関数は名前付き関数と匿名関数に分けることができます
匿名関数: 名前のない関数であり、直接使用することはできません。
関数式
// 声明
let fn = function() {
console.log('函数表达式')
}
// 调用
fn()
関数をすぐに実行する
(function(){
xxx })();
(function(){
xxxx}());
呼び出す必要はなく、すぐに実行できます。実際、本質はすでに呼び出されています。
すぐに実行される複数の関数はセミコロンで区切ります
関数式
// 声明
let fn = function() {
console.log('函数表达式')
}
// 调用
fn()
関数をすぐに実行する
(function(){
xxx })();
(function(){
xxxx}());
呼び出す必要はなく、すぐに実行できます。実際、本質はすでに呼び出されています。
すぐに実行される複数の関数はセミコロンで区切ります
アクセスできるようになったら、グローバル部分を探すのではなく、まずローカル部分を確認します。