IIFEの(すぐに呼び出された関数式)Javascriptで3分で説明
4741 ワード
元来ポストxtrp.io , Gabriel Romalaldo、10代のWeb開発者、JavaScript、CSSについて、そして何かプログラミングについてのブログ.
JavaScriptは、多くのプログラミング言語のように、グローバル変数を暗示しています.変数は、変数がグローバルであることを指定せずに、宣言されて定義された後の任意の関数でアクセスできる変数です.例えば、
グローバル変数は、このような小さなサイトやコード例に有用かもしれませんが、大規模なプロジェクトやWebアプリケーションで問題を引き起こす可能性があります.
globalsが有害でありえる主な理由の1つは変数命名衝突です.そして、それは名前がグローバルである異なった変数によってすでに取られた変数を作成するか、参照するとき、起こります.
この例では、衝突がある変数名は
例えば、PHPプログラミング言語の作者であるRasmus Lerdorfは、グローバルと衝突を含む非常に複雑なバグを抱えた会社で働いた.バグを見つけるために、彼は紙のコードの何千もの線を印刷して、彼が同じ名前を持つ2つのglobalsが互いと衝突するのを発見するまで、コードの全く無関係の場所でハイライトしました.閉じるこの動画はお気に入りから削除されていますhis talk about 25 years of PHP .
グローバルなスコープではなく、関数ではなく、これらの関数が明示的に定義されているか、DOMイベントで使用されるか、ステートメントでラップされたコードのためにグローバル変数が作成されます
Iifes(またはすぐに呼び出された関数式)は、JavaScriptコードを関数内で書き込むことができますが、すぐにその関数を呼び出します.IIFES内のすべてのコードは、グローバルスコープを汚染したり、グローバル変数を作成する必要はありません.
iifesは括弧内の関数をラップして、
以下はIFEのないプログラムの例です.
さて、IFEで
ES 6の矢印機能の導入により、IFEのこのようにさらに短くすることができます.
より複雑なプログラムやWebアプリケーションでは、それは完全にグローバル変数を削除するのに役立つことができます.その場合、グローバルコードは定義されません.コードは関数とIifesで定義されます.
実際、グローバル変数を全く使わないことは非常に一般的です、そしてJavaScriptは
より小さなサイトとスクリプトのために、私は個人的に単に積極的に可能な限りIifesを使用しようとして、世界的なコードを制限しようと勧めます.私は個人的に簡潔にいくつかの基本的なサイトでグローバル変数を使用しますが、それはあなたのコードのグローバルスコープがどのように見えるかを明確に理解することが重要であり、それに基づいて予期しない問題が発生する可能性があります.
私はあなたがこの記事を楽しんで、Iifesが将来のプロジェクトとスクリプトで使用できる何かであることを願っています.
スクロールありがとう.
このポストはもともとですmy blog , 私は十代の開発者として、ウェブ開発とプログラミングについて書きます.
-ガブリエル・ロムアルド、2020年2月29日
注:私は以前私の偽名、フレッドアダムズの下に書いた.
JavaScriptは、多くのプログラミング言語のように、グローバル変数を暗示しています.変数は、変数がグローバルであることを指定せずに、宣言されて定義された後の任意の関数でアクセスできる変数です.例えば、
// a global variable
var exampleStr = "Hello, World!"
function exampleFunction(){
console.log(exampleStr)
}
exampleFunction();
// --> logs "Hello, World!" (contents of exampleStr global variable)
ここで、グローバル変数は"Hello , World !"の値で定義されました.そして呼び出された関数はその変数にアクセスし、コンソールにログオンしました.グローバル変数は、このような小さなサイトやコード例に有用かもしれませんが、大規模なプロジェクトやWebアプリケーションで問題を引き起こす可能性があります.
globalsが有害でありえる主な理由の1つは変数命名衝突です.そして、それは名前がグローバルである異なった変数によってすでに取られた変数を作成するか、参照するとき、起こります.
この例では、衝突がある変数名は
name
:var name = "Fred"
function myFunction(){
// intended to create variable, but changed global instead
name = "John"
// "John"
console.log(name);
}
// "John", not "Fred"
console.log(name);
これは非常に基本的な例ですが、多くのJavaScriptコードを持つプログラムでは、グローバル変数を追跡するのは非常に困難になる可能性が非常に困難なデバッグすることができます深刻な予期しない問題を引き起こす.例えば、PHPプログラミング言語の作者であるRasmus Lerdorfは、グローバルと衝突を含む非常に複雑なバグを抱えた会社で働いた.バグを見つけるために、彼は紙のコードの何千もの線を印刷して、彼が同じ名前を持つ2つのglobalsが互いと衝突するのを発見するまで、コードの全く無関係の場所でハイライトしました.閉じるこの動画はお気に入りから削除されていますhis talk about 25 years of PHP .
IFEのヘルプグローバルヘルプの問題を修正
グローバルなスコープではなく、関数ではなく、これらの関数が明示的に定義されているか、DOMイベントで使用されるか、ステートメントでラップされたコードのためにグローバル変数が作成されます
setTimeout()
or setInterval
.Iifes(またはすぐに呼び出された関数式)は、JavaScriptコードを関数内で書き込むことができますが、すぐにその関数を呼び出します.IIFES内のすべてのコードは、グローバルスコープを汚染したり、グローバル変数を作成する必要はありません.
関数()
iifesは括弧内の関数をラップして、
();
.以下はIFEのないプログラムの例です.
さて、IFEで
ES 6の矢印機能の導入により、IFEのこのようにさらに短くすることができます.
// Without ES6:
(function(){
})();
// With ES6:
(()=>{
})();
Iifesを使うとき
より複雑なプログラムやWebアプリケーションでは、それは完全にグローバル変数を削除するのに役立つことができます.その場合、グローバルコードは定義されません.コードは関数とIifesで定義されます.
実際、グローバル変数を全く使わないことは非常に一般的です、そしてJavaScriptは
use strict
グローバル変数の使用を防止し、作成時にエラーをスローするにはJavaScript use strict Explained in 2 Minutes .より小さなサイトとスクリプトのために、私は個人的に単に積極的に可能な限りIifesを使用しようとして、世界的なコードを制限しようと勧めます.私は個人的に簡潔にいくつかの基本的なサイトでグローバル変数を使用しますが、それはあなたのコードのグローバルスコープがどのように見えるかを明確に理解することが重要であり、それに基づいて予期しない問題が発生する可能性があります.
私はあなたがこの記事を楽しんで、Iifesが将来のプロジェクトとスクリプトで使用できる何かであることを願っています.
スクロールありがとう.
このポストはもともとですmy blog , 私は十代の開発者として、ウェブ開発とプログラミングについて書きます.
-ガブリエル・ロムアルド、2020年2月29日
注:私は以前私の偽名、フレッドアダムズの下に書いた.
Reference
この問題について(IIFEの(すぐに呼び出された関数式)Javascriptで3分で説明), 我々は、より多くの情報をここで見つけました https://dev.to/xtrp/iife-s-in-javascript-explained-in-3-minutes-647テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol