1. ホーム
  2. javascript

[解決済み] JavaScriptで関数を宣言する [重複]。

2023-01-03 02:17:04

質問

この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);
}