2つの関数の違いは? ( "関数x" vs "var x =関数")[重複] -- javascript フィールド 関連 問題

The difference between the two functions? (“function x” vs “var x = function”) [duplicate]












54
vote

問題

日本語
閉じられた 8年前>

可能な重複:
JavaScript:var functionname = function(){} vs関数name(){} < / a>

の違いは何ですか <事前> <コード> 6.50

なぜそれはもう一つの方が使われているのですか?

英語

Possible Duplicate:
JavaScript: var functionName = function() {} vs function functionName() {}

What's the difference between:

function sum(x, y) {   return x+y; }  // and   var sum = function (x, y) {     return x+y; } 

Why is one used over the other?

</div
  
 
 

回答リスト

55
 
vote
vote
ベストアンサー
 

最初のものは、2番目の匿名関数として知られている名前付き関数として知られています。

合計関数を使用できる場合は、主な実用的な違いがあります。例えば: -

<事前> <コード> var z = sum(2, 3); function sum(x, y) { return x+y; }

<コード> z には5が割り当てられていますが、これは次のとおりです。 -

<事前> <コード> var z = sum(2, 3); var sum = function(x, y) { return x+y; }

は、最初の行が実行された時点では、変数SUMはまだ関数を割り当てられていないために失敗します。

名前付き関数は解析され、実行が開始される前にそれらの名前に割り当てられているため、名前付き関数がその定義に先行するコードで利用できる理由です。

変数コードによる関数が割り当てられた関数は、割り当てを越えて実行が進んでいたら、関数としてのみ使用できます。

 

The first is known as a named function where the second is known as an anonymous function.

The key practical difference is in when you can use the sum function. For example:-

var z = sum(2, 3); function sum(x, y) {     return x+y; } 

z is assigned 5 whereas this:-

var z = sum(2, 3); var sum = function(x, y) {     return x+y; } 

Will fail since at the time the first line has executed the variable sum has not yet been assigned the function.

Named functions are parsed and assigned to their names before execution begins which is why a named function can be utilized in code that precedes its definition.

Variables assigned a function by code can clearly only be used as function once execution has proceeded past the assignment.

</div
 
 
12
 
vote

最初にいくつかの理由で使用される傾向があります:

  1. "sum"という名前が デバッグを行う遮断トレース 多くのブラウザが簡単になりました。
  2. 名前 「合計」を内部に使用できます それを簡単にする機能本体 再帰関数に使用する
  3. 関数宣言は「昇降」です JavaScriptでは、最初のケースでは、 機能は保証されています 一度正確に定義されます。
  4. セミコロン挿入原因

    <事前> <コード> var f = function (x) { return 4; } (f)

    <符号499887661 を割り当てる

  5. 留意するためのいくつかの警告があります。

    をしないでください <事前> <コード> var sum = function sum(x, y) { ... };

    ON IE 6では、2つの機能オブジェクトが作成されます。あなたが

    をするならば、特に混乱します <事前> <コード> var sum = function mySym(x, y) { ... };

    規格によると、 関数sum(x、y){...} IFブロックやループ本体の内側に表示できないので、異なる通訳者は

    を扱います。 <事前> <コード> if (0) { function foo() { return 1; } } else { function foo() { return 2; } } return foo();

    異なります。 この場合は、

    をする必要があります <事前> <コード> var foo; if (0) { foo = function () { return 1; } } ...
 

The first tends to be used for a few reasons:

  1. The name "sum" shows up in the stacktrace which makes debugging easier in many browsers.
  2. The name "sum" can be used inside the function body which makes it easier to use for recursive functions.
  3. function declarations are "hoisted" in javascript, so in the first case, the function is guaranteed to be defined exactly once.
  4. Semicolon insertion causes

    var f = function (x) { return 4; }  (f) 

    to assign 4 to f.

There are a few caveats to keep in mind though. Do not do

  var sum = function sum(x, y) { ... }; 

on IE 6 since it will result in two function objects being created. Especially confusing if you do

  var sum = function mySym(x, y) { ... }; 

According to the standard, function sum(x, y) { ... } cannot appear inside an if block or a loop body, so different interpreters will treat

  if (0) {     function foo() { return 1; }   } else {     function foo() { return 2; }   }   return foo(); 

differently. In this case, you should do

  var foo;   if (0) {     foo = function () { return 1; }   } ... 
</div
 
 
         
         
6
 
vote

最初のものは名前付き関数ステートメントである、2番目のものは匿名関数式を変数に割り当てます。

gentyステートメントがすぐにそのスコープに追加されています - 呼び出す前に実行する必要はありませんので、この機能:

<事前> <コード> var y = sum(1, 2); function sum(x, y) { return x + y; }

しかし、関数式は、コードが実行されたときにのみ変数に割り当てられているため、これは機能しません。

<事前> <コード> // Error here because the function hasn't been assigned to sum yet. var y = sum(1, 2); var sum = function(x, y) { return x + y; }

式の形式の利点は、異なる点で異なる関数を表現に割り当てるためにそれを使用できることです。そのため、関数を変更するか、さまざまな条件下で別の条件下で別の条件を使用することができます。 )

名前付き関数ステートメントの利点は、デバッガが名前を表示できることです。しかし、関数式に名前を付けることができます:

<事前> <コード> var sum = function sum(x, y) { return x + y; }

しかし、2つの名前は実際には異なるスコープにあるため、混乱を招く可能性があります。

 

The first one is a named function statement, the second one assigns an anonymous function expression to a variable.

The function statement is added to its scope immediately - you don't need to run it before being able to call it, so this works:

var y = sum(1, 2);  function sum(x, y) {    return x + y; } 

But the function expression is only assigned to the variable when the code is executed, so this doesn't work:

// Error here because the function hasn't been assigned to sum yet. var y = sum(1, 2);  var sum = function(x, y) {    return x + y; } 

An advantage of the expression form is that you can use it to assign different functions to the expression at different points - so you can change the function, or use a different one under different conditions (such as depending on the browser being used).

An advantage of a named function statement, is that debuggers will be able to display the name. Although, you can name function expressions:

var sum = function sum(x, y) {    return x + y; } 

But this can be confusing since the two names are actually in different scopes and refer to different things.

</div
 
 
3
 
vote

あなたがそこに投稿した2つのコードスニペットは、ほとんどすべての目的のために同じように振る舞います。

しかし、動作の違いは、2番目のバリアントを使用すると、その関数はコード内のその時点の後にのみ呼び出すことができます。

最初のバリアントでは、関数が宣言されている上で実行されるコードが使用可能です。

2番目のバリアントでは、実行時に関数が変数fooに割り当てられているためです。最初の場合、その関数は解析時にその識別子fooに割り当てられます。

より技術的な情報

JavaScriptには機能を定義する方法があります。

  1. あなたの最初の例は関数宣言です。これにより、 "function"ステートメントが機能を作成します。この機能は、解析時に利用可能になり、その範囲内のどこにでも呼び出すことができます。それでも、後で変数またはオブジェクトプロパティに保存できます。
  2. あなたの2番目のスニペットは関数式を示しています。これには、関数を作成するために "関数"演算子を使用することが含まれます。その演算子の結果は、任意の変数またはオブジェクトプロパティに格納できます。関数表現はそのように強力です。関数表現は、名前を持つ必要がないため、「匿名関数」と呼ばれます。
  3. 関数を定義する3番目の方法は、元の投稿には示されていない "関数()"コンストラクタです。これを使用することは推奨されません。これはeval()と同じように機能します。これには問題があります。
 

The two code snippets you've posted there will, for almost all purposes, behave the same way.

However, the difference in behaviour is that with the second variant, that function can only be called after that point in the code.

With the first variant, the function is available to code that runs above where the function is declared.

This is because with the second variant, the function is assigned to the variable foo at run time. In the first, the function is assigned to that identifier foo at parse time.

More technical info

Javascript has three ways of defining functions.

  1. Your first example is a function declaration. This uses the "function" statement to create a function. The function is made available at parse time and can be called anywhere in that scope. You can still store it in a variable or object property later.
  2. Your second snippet shows a function expression. This involves using the "function" operator to create a function - the result of that operator can be stored in any variable or object property. The function expression is powerful that way. The function expression is often called an "anonymous function" because it does not have to have a name,
  3. The third way of defining a function is the "Function()" constructor, which is not shown in your original post. It's not recommended to use this as it works the same way as eval(), which has its problems.
</div
 
 
1
 
vote

差は...

これは無名関数

です。 <事前> <コード> var sum = function (x, y) { return x+y; }

だから(合計); "関数(x、y){Return x + y;}"(名前を返さない) これは名前付き関数です。

<事前> <コード> function sum(x, y) { return x+y; }

警告した場合(合計)。今、あなたは「関数 sum (x、y){Return x + y;}」(名前が合計)

プロファイラが機能 sum の実行時間を伝えることができるのは、不明な関数の実行時間の代わりに sum の実行時間を伝えることができるため、プロファイラを使用している場合は、関数を使用しています。 >
 

The difference is...

This is a nameless function

var sum = function (x, y) {     return x+y; } 

So if you alert(sum); you get "function (x, y) { return x + y; }" (nameless) While this is a named function:

function sum(x, y) {         return x+y; } 

If you alert(sum); now you get "function sum(x, y) { return x + y; }" (name is sum)

Having named functions help if you are using a profiler because the profiler can tell you function sum's execution time...etcetera instead of an unknown functions's execution time...etcetera

</div
 
 
0
 
vote

これは他の例です: 関数sayhello(name){alert( 'hello' +名)}

今、「Hello World」

と表示されているボタンのOnClickイベントを変更したいとします。

書くことはできません:

yourbtn.onclik = Sayhello( 'World')、あなたは機能参照を提供しなければならないので

その後、2番目のフォームを使用できます。 yourbtn.onclick = function(){sayhello( 'workld'); }

PS:私の悪い英語ですみません!

 

here's an other example: function sayHello(name) { alert('hello' + name) }

now,suppose you want modify onclick event of a button, such as it says "hello world"

you can not write:

yourBtn.onclik = sayHello('world'), because you must provide a function reference.

then you can use second form: yourBtn.onclick = function() { sayHello('workld'); }

Ps: sorry for my bad english!

</div
 
 
-5
 
vote

彼らはまったく同じことを意味します。構文砂糖です。後者はイマゾリベクションが本当にやっていることを超えてもっと明らかです。すなわち、「SUM」は、関数オブジェクトで初期化された単なる変数であり、それはそれから他のものに置き換えることができます:

<事前> <コード> $ js js> function sum(x,y) { return x+y; } js> sum(1,2); 3 js> sum=3 3 js> sum(1,2); typein:4: TypeError: sum is not a function js> sum 3
 

They mean the exact same thing. It's just syntactic sugar. The latter is IMO more revealing of what JavaScript is really doing; i.e. "sum" is just a variable, initialised with a function object, which can then be replaced by something else:

$ js js> function sum(x,y) { return x+y; } js> sum(1,2); 3 js> sum=3 3 js> sum(1,2); typein:4: TypeError: sum is not a function js> sum 3 
</div
 
 

関連する質問

54  2つの関数の違いは? ( "関数x" vs "var x =関数")[重複]  ( The difference between the two functions function x vs var x function ) 
この質問はすでにここで回答を持っています 閉じられた 8年前> 可能な重複: JavaScript:var functionname = function(){} vs関数name(){} < / a> :の違いは何ですか ...

0  GWTのJavaからJavaScriptに匿名のJavaScriptオブジェクトを渡すにはどうすればよいですか。  ( How can i pass an anonymous javascript object from java to javascript in gwt ) 
JavaScriptライブラリを丸くするGWTラッパーを作成しています。 JavaScript関数の1つは、その引数として匿名オブジェクトを取ります。: <事前> <コード> obj.buildTabs({ hide: true, placeholder: ...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

0  JavaScript - 2つの入力のどちらに焦点が当てられていない場合の検出  ( Javascript detecting when neither of two inputs has focus ) 
ページ上の2つの入力に焦点を当てていないときに、特定の機能を呼び出すことができます。ユーザが単に1つの入力から他方の入力に切り替わると、関数を呼び出すことを望まない。任意のアイデア? ...

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...

44  トリプル引用符? ASP.NETでデータバインドJavaScript Stringパラメータを区切る方法  ( Triple quotes how do i delimit a databound javascript string parameter in asp n ) 
Anchor OnClick でJavaScriptデータバインド文字列パラメータを区切りますか? 私はASP.NETリピータコントロールにアンカータグを持っています。 アンカーの OnClick イベントには、JavaScript関数への呼び出しが含ま...

35  ASP.NETカスタムクライアント側の検証  ( Asp net custom client side validation ) 
.NET 2.0 Webサイトでのユーザーコントロールのカスタム検証機能があり、支払われた手数料はかかりません。 ascx ファイルにバリデータコードを置き、 Page.ClientScript.RegisterClientScriptBlock() ...

1279  jQueryでクッキーを設定/設定解除するにはどうすればよいですか。  ( How do i set unset a cookie with jquery ) 
jQueryを使用してCookieを設定して設定します。たとえば、 test という名前のクッキーを作成し、 1 ?に設定します。 ...

0  LazyWeb:要素の訪問されたクラスに基づいてLI要素を削除するJavaScriptが必要  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
すでにクリックしたように、必要なデータがたくさんあるこのページを持っていますが、頻繁に青色を探す必要があるので、頻繁に繰り返されます。私はこれがより効率的かもしれないことに気づいて、それが含まれているリンクが訪問されたかどうかに基づいて要素を隠されたように設定...

2  サーバーを必要としないクライアント側(JavaScript)グラフライブラリはありますか? [閉まっている]  ( Is there a client side javascript graph library that doesnt require a server ) 
この質問はスタックオーバーフローガイドラインを満たしていません。現在答えを受け付けていません。 この質問を改善したいですか? ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有