ホームページ > 記事 > ウェブフロントエンド > JS 匿名関数を使用しない理由

JS 匿名関数を使用しない理由

韦小宝オリジナル: 2018-01-16 11:24:041053ブラウズ

この記事では、js匿名関数を使用しない3つの主な理由を分析します。JS匿名関数の機能は、グローバル変数の汚染と関数名の競合を回避することです。この記事を参考にしてください

匿名関数の基本的な形式は(function(){...})();

前のかっこには関数本体が含まれており、後続のかっこは匿名関数にパラメータを渡してすぐに実行します

匿名関数の役割関数を使用するのは、グローバル変数の汚染と関数名の競合を避けるためです

コードを読むときは常に、匿名関数に注意する必要があります。ラムダと呼ばれることもあれば、匿名関数と呼ばれることもあり、どちらにしても使いにくいと思います。

匿名関数が何なのかわからない場合は、次の引用を参照してください:

匿名関数は、実行時に動的に宣言される関数です。これらは、通常の関数とは異なり、関数名を持たないため、匿名関数と呼ばれます。 — Helen Emerson、Helephant.com

匿名関数の形式は次のとおりです:

function () { ... code ... }
OR
(args) => { ... code .. }

今日は、絶対に必要な場合にのみ匿名関数を使用するという考えを皆さんに理解してもらいたいと思います。匿名関数は優先されるべきではなく、理由がわかっている場合にのみ使用する必要があります。この考え方を理解すると、コードがよりクリーンになり、保守が容易になり、バグの追跡が容易になります。匿名関数の使用を避ける 3 つの理由から始めましょう:

コードを記述するとき、コードの入力がどれほど上手であっても、必ずエラーが発生します。これらのエラーは簡単に検出できる場合もあれば、そうでない場合もあります。

エラーの原因がわかれば、エラーを簡単に発見できます。エラーを見つけるには、スタックトレースと呼ばれるこのツールを使用します。スタックトレースについて詳しくない場合は、Google に素晴らしい入門書があります。

今、非常に単純なプロジェクトがあるとします。

function start () {
 (function middle () {
 (function end () {
  console.lg(&#39;test&#39;);
 })()
 })()
}

上記のコードには非常に愚かな間違い、タイプミスがあります (console.log)。小規模なプロジェクトでは、このスペルミスは大きな問題にはなりません。これが、多数のモジュールを含む非常に大規模なプロジェクトの小さなセクションである場合、問題は大きくなります。あなたがこの愚かな間違いを犯していないと仮定すると、新しいジュニアエンジニアは休暇に入る前にそれをコードベースにコミットするでしょう。

さて、それを追跡しなければなりません。慎重に名前を付けた関数を使用すると、次のスタックトレースが得られます:

ジュニア開発者の皆さん、関数に名前を付けてくれてありがとう! これで、バグを簡単に追跡できるようになりました。

しかし...この問題を修正した後、別のバグがあることがわかりました。今回は上級開発者からのものでした。この人はラムダについて知っています
彼らはバグに遭遇したことが判明し、それを追跡するのが私たちの仕事です。

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

(function () {
 (function () {
 (function () {
  console.lg(&#39;test&#39;);
 })();
 })();
})();

当然のことながら、この開発者は console.log のスペルを忘れていました。これは偶然すぎる！どれもその機能に名前を付けていないのは残念です。

それで、コンソールは何を出力するのでしょうか?

そうですね、少なくとも行番号はまだ残っていますよね?この例では、約 7 行のコードがあるように見えます。大きなコードブロックを扱うとどうなるでしょうか?コードは 1 万行くらいですか?行番号の範囲が非常に大きい場合はどうすればよいでしょうか?コードが折りたたまれた後にコード map ファイルがある場合、行番号のレンダリングはまったく役に立たないのでしょうか?

これらの質問に対する答えは非常に簡単だと思います。答えは次のとおりです。これらのことを考えると、一日がかなり悲惨になります。

可読性

ねえ、信じられないと聞きました。あなたはまだ匿名関数にアタッチされており、バグは一度も発生していません。あなたのコードが完璧だと思っていることをお詫びしなければなりません。これを見てみましょう！

次の 2 つのコードを見てください:

function initiate (arguments) {
 return new Promise((resolve, reject) => {
 try {
  if (arguments) {
   return resolve(true);
  }
  return resolve(false);
 } catch (e) {
  reject(e);
 }
 });
}
initiate(true)
 .then(res => {
  if (res) {
   doSomethingElse();
  } else {
   doSomething();
  }
 ).catch(e => {
   logError(e.message);
   restartApp();
   }
 );

これは非常に珍しい例ですが、私が言おうとしていることはすでに理解されていると思います。このメソッドは Promise を返し、この Promiseobject/メソッドを使用して、考えられるさまざまな応答を処理します。

いくつかのコードは読みにくくないと思うかもしれませんが、もっと良くできると思います。

匿名関数をすべて削除したらどうなるでしょうか?

function initiate (arguments) {
 return new Promise(checkForArguments);
}
function checkForArguments (resolve, reject) {
 try {
 if (arguments) {
  return resolve(true); 
 }
 return resolve(false);
 } catch (e) {
 reject(e);
 }
}
function evaluateRes (res) {
 if (res) {
 doSomethingElse();
 } else {
 doSomething();
 }
}
function handleError (e) {
 logError(e.message);
 restartApp();
}
initiate(true)
 .then(evaluateRes)
 .catch(handleError);

さて、はっきりさせておきますが、コードのこの部分は長くなりますが、単に読みやすくなっただけではないと思います。慎重に名前を付けた関数は、名前を見ればすぐにその関数が何であるかがわかるという点で、匿名関数とは異なります。これにより、コードを評価する際の障害が回避されます。

これは関係を明確にするのにも役立ちます。 2 番目の例では、メソッドを作成して渡してロジックを実行するのではなく、then と catch に引数が与えられ、すべてが行われる関数を指すだけです。

読みやすさに関しては、これ以上言うことはありません。しかし、まだ納得していない場合は、最後の議論を試みることができます。

JS 匿名関数を使用しない理由

関連記事