[解決済み] JavaScriptで関数を宣言する [重複]。
質問
この2つの関数の宣言方法の違いは何でしょうか?
function someFunc() { ... }
var someFunc = function() { ... }
私は技術的な意味で尋ねているのではありません。どちらが読みやすいか、どちらのスタイルが好ましいかを聞いているのではありません。
どのように解決するのですか?
私は、ここにいらっしゃるほとんどの方と意見が違います。 技術的には、この構文は、両方の方法で関数を宣言するための同じを意味するかもしれない ( 私は最後の声明について間違っています。私は、なぜそれらが技術的に異なっているのか、diffの投稿を読み、私は最後に追加します、なぜ ) しかし、彼らはパターンを進化させる役割を果たす方法は、大規模です。私は、"Javascriptを強くお勧めします。
しかし、私の主張を微妙かつシンプルな方法で証明するために、ここに小さな例を挙げます。
//Global function existing to serve everyone
function swearOutLoud(swearWord) {
alert("You "+ swearWord);
}
//global functions' territory ends here
//here is mr. spongebob. He is very passionate about his objects; but he's a bit rude.
var spongeBob = {
name : "squarePants",
swear : function(swearWord) {
name = "spongy";
alert("You "+ swearWord);
return this;
}
}
//finally spongebob learns good manners too. EVOLUTION!
spongeBob.apologize = function() {
alert("Hey " + this.name + ", I'm sorry man!");
return this;
}
//Ask spongebob to swear and then apologize in one go (CASCADING EFFECT!!)
alert(spongeBob.swear("twit").apologize());
上のコードを見てみると、swearOutLoudという名前の関数を宣言しています。これは、任意のオブジェクトや呼び出しから汚い言葉を受け取り、出力を与えます。これは、渡された "this" パラメータと引数を使用して、任意のオブジェクトに対して操作を行うことができます。
しかし、2番目の宣言は"spongebob"というオブジェクトの属性として宣言されています。これは重要なことで、ここでは、オブジェクト駆動型の動作に移行しています。また、他に返すものがない場合は、thisを返しているので、カスケード効果も維持しています。
jqueryでも似たようなことが行われていますが、このカスケードパターンはフレームワークなどを書こうとしている場合には重要です。Builderデザインパターンともリンクしていますね。
しかし、オブジェクトの属性として宣言された関数では、より良いプログラミングパラダイムにつながるオブジェクト中心の振る舞いを実現することができます。うまく設計しない限り、グローバルアクセスで外部に宣言された個々の関数は、オブジェクト指向でないコーディング方法につながります。私はなんとなく後者の方が好きです。
カスケードの効果を見るには、最後のステートメントを見てください。
私の言いたいことが明らかになったでしょうか。技術的な観点からの違いは小さいかもしれませんが、設計とコードの進化の観点からは、それは巨大であり、世界の違いを生み出します。
しかし、それは私自身です。でも、それは私の考えです!それを受け入れるかどうかは別として。)
EDITです。
というのも、名前付き宣言はグローバルな名前空間と結びついており、パース時に定義されるからです。そのため、関数が宣言される前であっても呼び出すことができます。
//success
swearOutLoud("Damn");
function swearOutLoud(swearWord) {
alert("You " + swearWord)
}
上記のコードは正しく動作します。しかし、以下のコードはそうではありません。
swear("Damn!");
var swear = function(swearWord) {
console.log(swearWord);
}
関連
-
[解決済み】JavaScriptで「無効な日付」のDateインスタンスを検出する
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] <ng-content>が空かどうかを確認する方法は?(これまでのAngular 2+で)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法