JavaScript_javascript スキルにおける関数宣言と関数式の違いの簡単な分析-jsチュートリアル-php.cn

JavaScript_javascript スキルにおける関数宣言と関数式の違いの簡単な分析

WBOY

リリース： 2016-05-16 16:07:26

オリジナル

1032 人が閲覧しました

私がテンセントでインターンとして面接していたとき、面接官が私にこの質問をしたのを覚えています。

コードをコピーコードは次のとおりです:

//次の 2 つの宣言メソッドの違いは何ですか

関数 foo(){};

var bar = function foo(){};

最初は関数宣言と関数式という 2 つの宣言方法しか知らなかったので、具体的な違いを説明できませんでした。最近たまたまこのテーマに関する本を見つけたので、それについてまとめてみようと思いました。

ECMAScript では、関数オブジェクトを作成するために最も一般的に使用される 2 つの方法があります。それは、関数式を使用する方法と関数宣言を使用する方法です。この点に関して、ECMAScript 仕様では、関数宣言には常に関数名と呼ばれる識別子 (Identifier) が必要であり、関数式は省略できることが明確にされています。

関数宣言:

コードをコピーしますコードは次のとおりです:

関数識別子 (FormalParameterList オプション){ FunctionBody }

関数宣言の解析プロセスは次のとおりです:

1. Functionオブジェクトを新規作成し、FormalParameterListでパラメータを指定し、FunctionBodyで関数本体を指定します。現在実行中の環境内のスコープチェーンをスコープとして使用します。

2. 現在の変数オブジェクトの Identifier という名前の属性を、値 Result(1) で作成します。

関数式:

(関数式は匿名関数式と名前付き関数式に分かれます)

コードをコピーコードは次のとおりです:

function Identifier opt(FormalParameterList opt){ FunctionBody } //ここに名前付き関数式があります

名前付き関数式の解析プロセスは次のとおりです:

1. 新しいオブジェクトを作成します
2. Result(1) をスコープチェーンの先頭に追加します
3. 新しい Function オブジェクトを作成し、FormalParameterList にパラメータを指定し、FunctionBody に関数本体を指定します。現在実行中の実行環境のスコープチェーンをスコープとして使用します。
4. Result(1) の Identifier という名前の属性を作成します。その値は Result(3) で、読み取り専用で、削除できません
5. スコープチェーンから Result(1)
を削除します。 6. 結果を返す(3)

公式ドキュメントは非常に読みにくいです。簡単に言えば、ECMAScript はコンテキストを通じて 2 つを区別します。関数 foo(){} が代入式の一部である場合、それは関数式とみなされます。また、関数 foo(){} が関数本体内に含まれているか、プログラム (の最上位) に配置されている場合、関数宣言として解析されます。明らかに、識別子が省略された場合、「式」は式のみになります。

コードをコピーしますコードは次のとおりです:

function foo(){}; // プログラムの一部であるための宣言

var bar = function foo(){} // 代入式 (AssignmentExpression) の一部であるため、式 

new function bar(){}; // 式。New 式 (NewExpression)
 の一部です。

(関数(){

Function bar(){}; // 関数本体 (FunctionBody)
 の一部であるための宣言
})();

別の状況もあります:

コードをコピーコードは次のとおりです:

(関数 foo(){})

このケースも関数式であり、そのコンテキストでは、() はグループ化演算子を構成し、グループ化演算子には式のみを含めることができます。

コードをコピーコードは次のとおりです:

関数宣言と関数式の類似点と相違点について簡単に説明しましょう。宣言と式の動作には、微妙ですが重要な違いがあります。

まず、式が解析されて評価される前に、 関数宣言が解析されて評価されます 。宣言がソースコードの最後の行であっても、同じスコープ内の最初の式より前に評価されます。例を見ると理解しやすいです。次の例では、alert の後に関数 fn が宣言されています。ただし、アラートが実行されるとき、fn はすでに定義されています:

コードをコピーコードは次のとおりです:

alert(fn()); //Helloworld! を出力します。

関数 fn() {

return 'Helloworld!';

}

簡単にまとめると、何が違うのでしょうか？

1. 宣言は常にスコープの先頭で解析されます。 2. 式は、見つかった場合にのみ評価されます。

関数宣言にはもう 1 つの重要な特徴があります。

つまり、条件文を使用して関数宣言を制御する動作が標準化されていないため、環境が異なれば異なる結果が得られる可能性があります

。つまり:

コードをコピーしますコードは次のとおりです:

// 絶対にやってはいけない！

// ブラウザーが異なれば、返される結果も異なります。

if (true) {

関数 foo() {

「最初」を返します;

}

}

他 {

関数 foo() {

'秒' を返します;

}

}

foo();

// この場合、忘れずに関数式を使用してください: 

var foo;

if (true) {

foo = function() {

「最初」を返します;

};

}

他 {

foo = function() {

'秒' を返します;

};

}

foo();

それでは、関数宣言を使用するための実際のルールは何でしょうか?

FunctionDeclaration は、Program または FunctionBody 内でのみ使用できます。構文的には、ブロック ({ ... }) 内 (たとえば、if、while、または for ステートメント内) にこれらを使用することはできません。 Block には Statement のみを含めることができ、FunctionDeclaration などの SourceElement は含めることができないためです。

一方、生成ルールを詳しく見てみると、式をブロック内に出現させる唯一の方法は、それを ExpressionStatement の一部にすることであることがわかります。ただし、仕様では、ExpressionStatement をキーワード関数で開始できないと明確に述べられています。これが実際に意味するのは、FunctionExpression を Statement または Block 内に使用できないということです (Block は Statement で構成されているということを忘れないでください)。

上記の制限により、関数がブロック内に出現するときは常に (上の例のように)、関数の宣言や式ではなく、実際には構文エラーとして扱われる必要があります。

では、関数宣言や関数式はどのようなときに使用すればよいのでしょうか？関数宣言は「プログラムコード」内でのみ出現できます。つまり、関数宣言は、他の関数本体またはグローバル空間内でのみ出現できます。その定義は、変数や属性に割り当てたり、関数呼び出しのパラメーターとして渡すことはできません。例としては、関数宣言の使用が許可されており、foo()、bar()、および local() はすべて関数宣言モードで宣言されています:

コードをコピーしますコードは次のとおりです:

//地球環境

関数 foo() {} 

関数 local() { 

// ローカル環境 

関数 bar() {} 

リターンバー 

}

構文的に関数宣言を使用できない場合は、関数式を使用できます。例: 関数をパラメータとして渡すか、オブジェクトリテラルで関数を定義します:

コードをコピーコードは次のとおりです:

// これは匿名関数式です

callMe(function() { 

//関数をパラメータとして渡します

}); 

// これは名前付き関数式です

callMe(function me() { 

// 関数をパラメータとして渡します。関数名は me
 です。
}); 

// その他の関数式

var myobject = { 

言う: function () { 

// 私は関数式です 

}

};