未定義をJavaScriptに渡す即時呼び出し関数式

時々あなたは野生の古いコードを見つけることができますundefined関数に渡されます。どうして?

有名な人を見ながらこの小さなトリックを発見しましたjQueryソースコードに関するPaulIrishのビデオ

そのビデオは別の時代のものであり、執筆時点で9年前のものであり、jQueryのソースコードが変更されているため、ここでこのことを見つけることはできませんが、それでも興味深いと思いました。

また、JavaScriptもその後変更されました。この手法は、ES5より前のJavaScriptにのみ適用されました。

2009年にリリースされたES5以前は、これはほとんど必要な手順でした。

注:ES5 +コードベースでは、これを追加する必要はありません。undefinedは読み取り専用の値です。

コードでは、次のように変数をチェックして、変数が未定義かどうかを確認することがあります。

if (car !== undefined) {

}

これが私たちのコードであり、私たちが制御する独自のサーバーで実行されている場合、これは正常に機能するはずです。しかし、jQueryのようなライブラリは、考えられるすべてのサイトで機能するために、バトルテストが必要だと想像してみてください。

誰かが上書きした場合undefinedシンプルで

undefined = '🤔' //whatever value you prefer

その後、上記if比較して失敗しますcar🤔

これはES5で修正されましたが、それ以前は可能でした。

場合car実際には未定義でしたが、今は知る方法がありませんでした。

この手法を使用する場合を除いて、すべてのコードをIIFEでラップします(即時呼び出し関数式)そして、呼び出しフェーズで追加せずに、1つのパラメーターを関数定義に渡します。

(function() {
  /* our function code */
})()
(function(undefined) {
  /* our function code */
})()

見る、undefined引数として渡されますが、関数を呼び出すときにパラメーターとして渡されません。したがって、関数内では変数の値undefinedの元の値は(保証されています)undefined。ページ上の他のスクリプトがそれに対して何をするかに関係なく、それは分離されています。

さて、この問題を解決するための私のお気に入りの方法は、この手法を使用して未定義の値をチェックすることです。

if (typeof car !== 'undefined') {

}

ザ・typeof演算子は、変数の型を含む文字列を返します。に対して確認できます'undefined'文字列であり、そもそも上記の問題は発生しません。

しかし、他の人が書いたコードで読むことができるいくつかのことについての理由を知ることは常に良いことです。特に、どこでも実行する必要があるのがライブラリレベルのコードである場合はそうです。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: