JavaScript関数導入の詳しい説明

機能紹介

関数

関数もオブジェクトである
関数は、機能を実装する n 個のステートメントをカプセル化したものであり、必要なときにいつでも呼び出すことができます。
関数は実行できますが、他の種類のデータは実行できません
typeofを使用して関数オブジェクトをチェックすると、関数が返されます。

アドバンテージ：

コードの再利用性の向上
読みやすく、コミュニケーションしやすい

関数の作成

コンストラクタは関数を作成する

文法

var fun =new Function(コードブロック);

この形式で構築される関数は比較的少ないです。

関数宣言は関数を作成する

文法：

関数 関数名 (パラメータ 1、パラメータ 2...パラメータ N) {
    声明...
}

関数式関数を作成する

var 関数名 = 関数 関数名 (パラメータ 1、パラメータ 2... パラメータ N) {
    声明...
}

関数パラメータ

形式パラメータ:

関数の()に1つ以上のパラメータを指定します
複数のパラメータはで区切られ、パラメータを宣言することは関数内で対応する変数を宣言することと同じですが、値は割り当てられません。

実際のパラメータ:

関数を呼び出すときに、() で実際のパラメータを指定できます。
実際のパラメータは関数内の対応する仮パラメータに割り当てられます。
関数を呼び出すとき、パーサーは実際のパラメータの型をチェックしません（したがって、不正なパラメータを受け取る可能性があるかどうかに注意し、その場合はパラメータの型チェックを行う必要があります）

関数 sum(a, b) {
    コンソールにログ出力します。
}
sum(1, 2); //関数を呼び出して実際のパラメータを渡す

ここに画像の説明を挿入

パラメータの数:

関数の実パラメータと仮パラメータの数は異なる場合があります
A. 実パラメータの数が仮パラメータの数より多い場合: 関数は正常に実行され、余分な実パラメータは無視されます。
B. 実パラメータの数が仮パラメータの数より少ない場合、余分な仮パラメータは未定義の変数になります。

質問: JavaScript で関数を呼び出すときに変数パラメータを渡す場合、値渡しですか、それとも参照渡しですか?

理解1：すべては値（基本値/アドレス値）転送です
理解2: 転送または参照転送（アドレス値）を指す場合があります

var a = 3;
関数fn(a) {
    a = a + 1;
}
fn(a);
console.log("a は:", a); // 3

ここに画像の説明を挿入

ここでは価値（基本）移転として理解できる

var obj = { name: "心猿" }; // オブジェクトを宣言する function fn(obj) {
    コンソールにログ出力します。
}
fn(obj); // 「モンキーハート」
//これはアドレス値転送または参照転送（アドレス値）として理解できます

ここに画像の説明を挿入

関数呼び出し

直接通話:

函數名()

関数fn(obj) {
    console.log("直接呼び出されました!");
}
fn()//直接呼び出し

ここに画像の説明を挿入

オブジェクト経由での呼び出し

obj.函數名()

オブジェクト = {
    楽しい（）{
        console.log("オブジェクトを通じて呼び出しました!");
    }
}
Obj.fun(); //オブジェクトを通じて関数を呼び出す

ここに画像の説明を挿入

新しい呼び出し

new fun()

関数fun() {
    console.log("new 経由で呼び出しました!");
    return 1 + 2; // 値を返す }
var result = new fun();
console.log("結果:", 結果);//楽しい {}
console.log("結果のデータ型:",typeof result);//"オブジェクト"

ここに画像の説明を挿入

知らせ：

1. new で呼び出された関数は、関数が値を返すかどうかに関係なく、常にオブジェクトを取得します。

2. newを使用して関数を呼び出します。これはオブジェクトを作成するために使用される関数です（コンストラクタ）

fun.call/apply(obj)

これは、呼び出しのために楽しいオブジェクトを作成する一時的な方法です

var obj = { name: "心猿" }; // オブジェクトを宣言する function fun() {
    年齢は5000です。
    console.log("fun.call(obj) を通じて関数を呼び出します!");
}
//obj.fun() から直接呼び出すことはできませんが、fun.call(obj) を介して呼び出すことができます。fun.call(obj) //obj.fun と同等です。
// fun.call(obj) によって呼び出された関数を出力します。
console.log("年齢情報を呼び出すobjのメソッドとしても使えます" + "age:", obj.age); //5000

ここに画像の説明を挿入

関数の戻り値

関数には戻り値がある場合とない場合があります。

戻り値を持つ関数: 関数本体は戻り構文を通じて値を返し、それがプログラムの次のステップを決定します。
戻り値のない関数: 関数は特定の機能のみを実装し、値を返す必要はありません (関数本体に return ステートメントがありません)
戻り値は、プリミティブデータ型、オブジェクト、関数など、任意のデータ型にすることができます。

関数をすぐに実行する

関数は定義されるとすぐに呼び出されます。このような関数は即時実行関数と呼ばれます。

即時実行される関数は通常、1 回だけ実行されます。

文法：

（関数（）{
	コードブロック;
})();

例えば：

(関数(a, b) {
    console.log("数値:", a + b);
})(1,3);//4

ここに画像の説明を挿入

方法

オブジェクトのプロパティは関数になることができる
関数がオブジェクトのプロパティとして保存されている場合。そしてこの関数をこのオブジェクトのメソッドと呼びます
この関数を呼び出すことはオブジェクトのメソッドを呼び出すことであり、本質的には関数と変わりません。

var obj = 新しいオブジェクト()
{
    obj.name = "モンキーハート";
    年齢 = 3000;
    obj.sayName = 関数(){
        console.log("名前:",obj.name);
    }
}
obj.sayName();

ここに画像の説明を挿入

別の書き方:

var obj = {
    名前:「イーマ」
    年齢: 3000,
    sayName: 関数 () {
        console.log("名前:", obj.name);
    }
}
obj.sayName();

ここに画像の説明を挿入

オブジェクト内のプロパティを列挙するには:

さまざまなトラバーサル方法の違いについては、私の記事「JavaScript における for、forEach、for...in、for...of の違いの比較」をお読みください。

for...inステートメントの使用

文法

for(変数のインデックス in arr)
{
    console.log(index); //コードブロック}

for ...inステートメントオブジェクトには複数の属性があり、ループ本体は複数回実行されます。実行されるたびに、オブジェクト内の属性の名前が変数に割り当てられます。

ここに画像の説明を挿入

var 人 = {
    名前:"孫悟空",
    年齢:5777,
    性別:"男性"
};
for(var インデックス in person)
{
    console.log(人[インデックス]);
}

範囲

スコープは変数の範囲を指します。

JavaScript には 2 種類のスコープがあります。

1. グローバルスコープ（グローバル変数）

2. 関数スコープ（ローカル変数）

3. ブロックレベルスコープ ES6 構文

グローバルスコープ

var 宣言を使用せずに関数の外部または関数の内部で定義された変数。
グローバルスコープは、ブラウザーページが開かれたときに作成され、ページが閉じられると破棄されます。
グローバルスコープにはグローバルオブジェクトウィンドウがあります
ブラウザウィンドウを表します
これはブラウザによって作成されたブラウザウィンドウを表し、直接使用することができます。
このグローバルオブジェクトウィンドウを node.js 環境で使用すると、エラーが報告され、結果はブラウザーにのみ表示されます。
グローバルスコープの場合:
- 作成された変数はウィンドウオブジェクトの属性として保存されます。
- 作成された関数はウィンドウオブジェクトのメソッドとして保存されます。
グローバルスコープ内の変数はグローバル変数である
ページのどこからでもアクセスできます

変数はウィンドウオブジェクトの属性として保存されます

var a = 10;
console.log("a:",a);
console.log("window.a:",window.a);

環境上の理由により、node.jsでエラーが報告されます

ここに画像の説明を挿入

ブラウザでは正常に表示されます

ここに画像の説明を挿入

関数はウィンドウオブジェクトのメソッドとして使用されます

関数fun(){
   console.log("私はwindow.fun関数です!")
}
ウィンドウの呼び出し

ここに画像の説明を挿入

関数のスコープ

関数スコープは関数が呼び出されたときに作成され、関数が実行された後に関数スコープは破棄されます。
関数が呼び出されるたびに新しい関数スコープが作成され、それらは互いに独立しています。
グローバルスコープ内の変数は関数スコープ内でアクセスできる
関数スコープが変数を操作する場合、関数スコープは自身のスコープ内で変数を検索します。見つかった場合は直接使用されます。それでもグローバルスコープ内で見つからない場合は、 ReferennceErrorが報告されます。
関数内のグローバル変数にアクセスするには、ウィンドウオブジェクトを使用することができます。