JS の関数式 VS 関数宣言、その違いについて話しましょう-jsチュートリアル-php.cn

JS の関数式 VS 関数宣言、その違いについて話しましょう

青灯夜游

リリース： 2021-07-02 09:33:47

転載

2273 人が閲覧しました

JavaScript では、関数宣言と関数式はどちらも function キーワードを使用して関数を作成します。これらは非常に似ており、混同しやすいと思いますか?次の記事では、関数式と関数宣言を分析し、関数式と関数宣言の違いを紹介します。

JS の関数式 VS 関数宣言、その違いについて話しましょう

JavaScript では、function キーワードを使用して、関数を作成するという単純な作業を実行できます。ただし、キーワードを使用して関数を定義すると、さまざまなプロパティを持つ関数を作成できます。

この記事では、function キーワードを使用して関数宣言と関数式を定義する方法と、2 つの関数の違いを見てみましょう。

1. 関数式と関数宣言

関数宣言と関数式は、function キーワードを使用して関数を作成する 2 つの方法です。

違いを示す例として、sum 関数の 2 つのバージョンを作成します:

function sumA(a, b) {
  return a + b;
}

(function sumB(a, b) {
  return a + b;
});

sumA(1, 2); // ???
sumB(1, 2); // ???

ログイン後にコピー

自分で試してみてください: https://jsfiddle.net/dmitri_pavlutin/8b46yokr/2 /

通常は、通常どおり関数を定義します (sumA function)。もう 1 つの場合、関数は 1 対のかっこ内に配置されます (sumBfunction)。

sumA(1,2) と sumB(1,2) を呼び出すとどうなりますか?

予想どおり、sumA(1, 2) は 3 を返します。ただし、sumB(1, 2) を呼び出すと、例外がスローされます: Uncaught ReferenceError: sumB が定義されていません 。

この理由は、sumA が、現在のスコープ内に関数変数 (関数名と同じ名前) を作成する関数宣言を使用して作成されているためです。ただし、sumB は、現在のスコープ内に関数変数を作成しない関数式 (括弧で囲む) を使用して作成されます。

関数式を使用して作成された関数にアクセスする場合は、関数オブジェクトを変数に保存します。

// Works!
const sum = (function sumB(a, b) {
  return a + b;
});

sum(1, 2); // => 3

ログイン後にコピー

ステートメントが `function` で始まる場合キーワードの場合は関数宣言、それ以外の場合は関数式です。

// 函数声明：以`function`关键字开头
function sumA(a, b) {
  return a + b;
}

// 函数表达式：不以`function`关键字开头
const mySum = (function sumB(a, b) {
  return a + b;
});

// 函数表达式：不以`function`关键字开头
[1, 2, 3].reduce(function sum3(acc, number) { 
  return acc + number 
});

ログイン後にコピー

高レベルの観点から見ると、関数宣言はスタンドアロン関数の作成に役立ちますが、関数式はコールバックとして使用できます。

ここで、関数宣言と関数式の動作を詳しく見てみましょう。

2. 関数宣言

前の例で見たように、sumA は関数宣言です:

// Function declaration
function sumA(a, b) {
  return a + b;
}

sumA(4, 5); // => 9

ログイン後にコピー

ステートメントに function キーワードが含まれ、その後に関数名、一対のかっこ (param1, param2, paramN) および一対の中括弧 {} 関数宣言関数本体が にある場合に発生します。

関数宣言では、関数変数、つまり関数名と同じ名前の変数 (前の例の sumA など) が作成されます。関数変数は、現在のスコープ内 (関数宣言の前後) でアクセスでき、関数スコープ自体内でもアクセスできます。

関数変数は通常、関数を呼び出すか、関数オブジェクトを他の関数に渡す (高階関数に渡す) ために使用されます。

たとえば、配列の項目を再帰的に累積する関数 sumArray(array) を作成します (配列には数値またはその他の配列を含めることができます):

sumArray([10, [1, [5]]]); // => 16

function sumArray(array) {
  let sum = 0;
  for (const item of array) {
    sum += Array.isArray(item) ? sumArray(item) : item;
  }
  return sum;
}

sumArray([1, [4, 6]]); // => 11

ログイン後にコピー

自分で試してみてください: https://jsfiddle.net/dmitri_pavlutin/n7wcryoo/

function sumArray(array) { ... } は関数宣言です。

関数オブジェクトを含む関数変数 sumArray現在のスコープで使用可能: sumArray([10, [1, [5]]])before および sumArray ([1, [4, 6]])関数宣言の後、および関数自体のスコープsumArray([1, [4, 6]]) (再帰呼び出しが許可されます) 。

ホイスティングにより、関数変数は関数が宣言される前に使用可能になります。

2.1 関数宣言に関する注意事項

関数宣言の構文は、独立した関数を作成するためのものです。関数宣言は、グローバルスコープ内に置くか、他の関数のスコープ内に直接置く必要があります。

// Good!
function myFunc1(param1, param2) {
  return param1 + param2;
}

function bigFunction(param) {
  // Good!
  function myFunc2(param1, param2) {
    return param1 + param2;
  }

  const result = myFunc2(1, 3);
  return result + param;
}

ログイン後にコピー

同じ理由で、条件 (if) やループ (#) を宣言することはお勧めできません。 ##while, for) 関数宣言の使用:

// Bad!
if (myCondition) {
  function myFunction(a, b) {
    return a * b;
  }
} else {
  function myFunction(a, b) {
    return a + b;
  }
}

myFunction(2, 3);

ログイン後にコピー

条件付きで作成された関数をより適切に実行するには、関数式を使用します。

3. 関数式

function キーワードが式内に関数 (名前の有無にかかわらず) を作成すると、関数式は次のようになります。現れる。

次は、式を使用して作成された関数の例です:

// Function expressions

const sum = (function sumB(a, b) {
  return a + b;
});

const myObject = {
  myMethod: function() {
    return 42;
  }
};

const numbers = [4, 1, 6];
numbers.forEach(function callback(number) {
  console.log(number);
  // logs 4
  // logs 1
  // logs 1
});

ログイン後にコピー

関数式では 2 種類の関数が作成されます:

function(){return 42} のように名前がなければ、それは匿名関数式です
sumB のように

#3.1 関数式に関する注意事項

関数式は、条件として作成されたコールバックまたは関数に適しています。

// Functions created conditionally
let callback;
if (true) {
  callback = function() { return 42 };
} else {
  callback = function() { return 3.14 };
}

// Functions used as callbacks
[1, 2, 3].map(function increment(number) {
  return number + 1;
}); // => [2, 3, 4]

ログイン後にコピー

名前付き関数式を作成した場合、関数変数は作成した関数のスコープ内でのみ使用できることに注意してください:

const numbers = [4];
numbers.forEach(function callback(number) {
  console.log(callback); // logs function() { ... }
});

console.log(callback); // ReferenceError: callback is not defined

ログイン後にコピー

试一试：https://jsfiddle.net/dmitri_pavlutin/sujwmp10/2/

callback是一个命名的函数表达式，因此callback函数变量仅在callback()函数使用域可用，而在外部则不可用。

但是，如果将函数对象存储到常规变量中，则可以在函数作用域内外从该变量访问函数对象：

const callback = function(number) {
  console.log(callback); // logs function() { ... }
};

const numbers = [4];
numbers.forEach(callback);
console.log(callback); // logs function() { ... }

ログイン後にコピー