JS匿名関数の使い方

今回は、JSの匿名関数の使い方と、JSの匿名関数を使用する際の注意事項についてご紹介します。実際の事例を見てみましょう。

匿名関数の基本形式は次のとおりです (function(){...})();

最初の括弧には関数本体が含まれており、次の括弧は匿名関数にパラメータを渡してすぐに実行します

匿名関数の目的は、グローバル変数の汚染と関数名の競合を避けることです

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

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

匿名関数は、実行時に動的に宣言される関数です。これらは、通常の関数とは異なり、関数名を持たないため、匿名関数と呼ばれます。 — ヘレン・エマーソン、Helenphant.com

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

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

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

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

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

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

function start () {
 (function middle () {
 (function end () {
  console.lg('test');
 })()
 })()
}

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

今、私たちはその真相に到達しなければなりません。 注意深く名前を付けた関数を使用すると、次のようなスタック トレースが得られます:

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

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

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

(function () {
 (function () {
 (function () {
  console.lg('test');
 })();
 })();
})();

当然のことながら、この開発者は 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);

好，先讲清楚：这部分代码更长，但我认为其不仅仅是有更多的可读性！我们精心命名的函数与匿名函数不一样，只要我们一看到它们的名字就知道它们的功能是什么。这避免了在评估代码时的障碍。

这也有助于分清楚其中的关系。与创建一个方法、将其传递、然后运行逻辑不同，在第二个例子中的参数被给到了then，catch只是指向了发生所有事情的函数。

关于更具有可读性，我没有什么再能说服你的了。但是也许你还没被说服的话，我可以试一下最后的论据。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

以上がJS匿名関数の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。