単純な例として、第一引数のみを使い、ただ変換するだけの関数として扱う例を載せる。iterableオブジェクトを受け取る。Arrayオブジェクトにしてくれる。呼び出すことができる。第一引数として渡すことで、各々のイベントに応じて発火する。この中では、DOMNodeInsertedDOMNodeRemovedDOMAttrModifiedDOMCharacterDataModifiedこれらが、それぞれ先程のコードに該当するだろう。これらを使って、一番最初の単純な例を作ってみる。非推奨なのかそれは、これは同期的な処理だからである。同期的にDOMを監視し、なにか処理を入れるということは他の動作に影響を及ぼしてモッサリしてしまう、ということである。代わりに使うことが推奨されている。使わないようにする非推奨だからといって、絶対使わないというわけにもいかないのが現実。できるだけ使いたくない。使うようにしてやればよい。実装しているかどうかを判別することができる。非常に強力な手段であることがわかったが、実際にシステムに組み込んでみると思いの外発火する。様々な変更がひっきりなしに発火していることに気づく。孫まで監視しているような状態では、とんでもない数になると思われる。した変更すべてを検知していては、さすがに今の優秀なブラウザでも重くなりそうである。コールバックが実装されていたり、追加要素にはクラスを振ってくれるライブラリをできるだけ使うことを前提に、最終手段として使っていきたい。呼び出すようにしたいところ。JavaScript月花です。今回は、複雑なJavaScriptを見つけて、リーディングに時間がかかったので、その仕組みを紹介したいと思います。単純な修正なのに、2時間くらいかけて読んで30分くらいかけて修正することになったので、次修正するとき忘れないように書いておきます。その先へ引き回す、というコードです。以下の内容についての解説です。alert(result);}上記のコードはどのように動くだろうか。CodePen.というように動作する。今回はこのコードを読んでいく。使った追加の処理を挿入することである。読んでもわからなかったので、深く読んでみることになった。引数は以下のようになる。今回はclickなのでクリックしたときに発火する。いうクラスを指定する。※今回はイベントデリゲートの話はしません。イベントハンドラにデータを渡すことができる。今回は省略されている。イベントハンドラを設定する。いうクラスを持つ要素に処理をバインドする処理である。コード中のイベントハンドラとして記述している部分に着目すると、何やら関数を呼び出しているようだ。この関数の定義を読んでみよう。};};着目してほしいのは4行目のreturn文で、この関数は関数を返すものであることがわかる。この関数によって返却されてきた関数こそがハンドラとしてバインドされることになる。して掴むには、ここを以下のように修正すればよいことになる。関数を生成する関数の、しかもreturn文の中に入ってしまった。なにか他の書き方ができないか、もっと読んでみよう。});});というように、ネストの中で記述することができる。};};これは関数を定義して変数に収める記述だが、よく見ると関数定義に引数がないにも関わらず呼び出し時に変数を渡している。これは、渡された変数をちゃんと使っている。argumentsオブジェクトJavaScriptの関数では、argumentsというローカル変数が提供される。この中には様々なデータが入っているが、単純に連番の添字を見た場合には引数が入っている。argumentsの中には定義した引数の数に関わらず(たとえゼロでも)呼びだれたときに渡されたものをそのまま保持している。);}というようにループすることができる。これが本来の使い方で、決して引数を定義する必要がないわけではない。