2017-01-01 6 views
0

を返さない理由を私は動作しません理解するのに役立つ:JavaScriptの閉鎖 - 内部関数の戻り値は、コードに続いて

function addToAnswer(param){ 
    var answer = 10; 
    function adder(){ 
    return answer + param; 
    }; 
    adder(); 
} 
console.log(addToAnswer(5)); // returns undefined, expecting 15 

このコードへの修正は、私は私に、addToAnswer()が値を返さなければならないことはかなり愚かな感じreturn adder();ですadder()機能から。なぜそれがうまくいかないのかと尋ねられたら、どう答えますか?

+2

'addToAnswer'には' return'文を持っていないので、 'undefined'を返します。 – Barmar

+0

サイドノート:関数宣言は ';'最後に ';'関数宣言が無関係ですが無害です。 –

答えて

2

なぜそれがうまくいかないのですか?

私はあなたが明示的にがそうするreturnを使うない限り、JavaScriptでは、関数は一般的に値を返さないことを言うと思います。

簡略矢印機能唯一の例外は、含めることが許可されている1つの式の結果を暗黙的に返します(ただし、CoffeeScriptなどの言語があります)。

は、ここで使用されている簡潔な矢印の機能の一例です:

someArray.sort((a, b) => a - b); 
//    ^^^^^^^^^^^^^^^---- concise arrow function 

しかし、それは唯一の例外です。冗長な矢印機能、function関数、およびメソッドはすべて明示的returnを必要とします。関数を介して取り込まれたコードパスが値を持つ明示的なreturnに達していない場合、関数の呼び出し結果は値undefinedになります。


(いくつかは、あなたがnew Thingyを行う際に、結果がThingyが戻り値を持っていない場合でも、新たなブツですが、それは本当ではないので、コンストラクタ関数は、規則の2番目の例外であることを主張することがあり。その場合は、コンストラクタが暗黙のうちに何かを返している。そして、実際には、区別が明確に仕様書に描かれていないこと、その結果を持っているnew表現です。)

2

機能がreturn文を実行しない限り、 、それはを返す。関数の最後の行の値を自動的に返すわけではありません。だから、あなたが書くとき:

adder(); 

関数の最後で、それは、15を返す、adder()を呼び出します。 addToAnswerはこの値を破棄し、undefinedを返します。

1

このため、リターンの仕組みを理解する必要があります。

add();コントロールはadd関数の先頭にジャンプし、内部でreturnステートメントに達すると、コントロールはadd関数が呼び出されたポイントに戻り、処理された場合は値に戻り、残りのコードを続けます。

addToAnswer関数は値を返すように指示されないため、コード(param + answerを計算)を処理しますが、何も返さないため、その関数の値は未定義です。

returnキーワードを内部関数から削除し、代わりにreturn adder();を削除することができます。たとえ値を返すよう明示的に求められていないので、加算関数がコードを処理したとしても、未定義になります。

1

関数adder()が返ってくると、現在の実行コンテキストがポップアウトされ、その下のレイヤーに戻ります - addToAnswer()。 Execution Stackの仕組みを理解する必要があります。
1.ファイルが最初に実行されると、グローバル実行コンテキストが作成されます。
2.別の関数内で定義されていないすべての値がグローバル実行コンテキストに追加されます。
3.最初の関数が実行されると、新しい実行コンテキストが作成されます。
4.この新しい実行コンテキストは、スタック内の親コンテキスト(この場合はグローバル実行コンテキスト)に定義されている変数と関数を参照できます。
5.最後に、関数addToAnswer()で定義されている関数のスタックに対して、3番目の実行コンテキストがポップされます。
enter image description here

http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/ https://simpleprogrammer.com/2016/06/06/javascript-execution-stack-key-learning-language/

関連する問題