[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
質問
重複の可能性があります。
JavaScriptの(function() { } )()構文とは何ですか?
私はこのJavaScriptコードのビットに遭遇しました。このコードを実行すると、なぜ "1" が表示されるのでしょうか? この奇妙な (1) の小さな付録は何ですか、そしてなぜ関数は括弧で囲まれているのですか?
(function(x){
delete x;
return x;
})(1);
どのように解決するのですか?
ここでは、いくつかのことが起こっています。まず第一に が即座に呼び出される関数式 (IIFE) パターンです。
(function() {
// Some code
})();
これは JavaScript のコードを独自のスコープで実行する方法を提供します。これは通常、関数内で作成された変数がグローバルスコープに影響を与えないようにするために使用されます。代わりにこれを使うこともできます。
function foo() {
// Some code
}
foo();
しかし、これには関数に名前を付ける必要があり、これは必ずしも必要ではありません。また、名前を付けた関数を使うと、将来のある時点でその関数が再び呼び出される可能性があり、それは望ましくないかもしれません。この方法で無名関数を使用することで、一度だけ実行されることを保証します。
この構文は無効です。
function() {
// Some code
}();
なぜなら、関数を式としてパースさせるためには、括弧でくくらなければならないからです。詳しくはこちらです。 http://benalman.com/news/2010/11/immediately-invoked-function-expression/
というわけで、IIFEパターンについて簡単におさらいしておきます。
(function() {
// Some code
})();
あるコード」を、あたかもインラインで書かれたかのように、即座に実行できるようにします。また、グローバルな名前空間に影響を与えないように、それ自身のスコープ内で実行します(したがって、他のスクリプトに干渉したり、干渉されたりする可能性があります)。
関数には、例えば通常の関数と同じように引数を渡すことができます。
(function(x) {
// Some code
})(1);
つまり、関数への最初の引数として値 '1' を渡し、それをローカルにスコープされた変数 x という名前で受け取っています。
次に、関数のコードそのものです。
delete x;
return x;
delete演算子は、オブジェクトからプロパティを削除します。変数を削除することはありません。ですから
var foo = {'bar':4, 'baz':5};
delete foo.bar;
console.log(foo);
この結果、ログに記録される。
{'baz':5}
これに対して
var foo = 4;
delete foo;
console.log(foo);
は値4を記録します。fooはプロパティではなく変数なので、削除することができないからです。
多くの人が、deleteは変数を削除できると思い込んでいますが、それはオートゴールの仕組みのせいです。最初に宣言せずに変数に代入すると、実際には変数にはならず、グローバル オブジェクトのプロパティになります。
bar = 4; // Note the lack of 'var'. Bad practice! Don't ever do this!
delete bar;
console.log(bar); // Error - bar is not defined.
今回は変数ではなく、グローバルオブジェクトのプロパティを削除しているので、削除はうまくいきます。事実上、前のスニペットはこれと同等です。
window.bar = 4;
delete window.bar;
console.log(window.bar);
そして今、foo変数の例ではなく、fooオブジェクトの例と類似していることがおわかりいただけたと思います。
関連
-
[解決済み] ('b'+'a'+ +'a').toLowerCase() の結果はなぜ 'banana' なのですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] JavaScriptでNULL、未定義、空白の変数をチェックする標準的な関数はありますか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] setTimeout(fn, 0)が役に立つことがあるのはなぜですか?
-
[解決済み] JavaScriptの(function() { } )()構文とは何ですか?
-
[解決済み] JavaScriptの "require "とは何ですか?
-
[解決済み】JavaScriptの関数にデフォルトのパラメータ値を設定する
-
[解決済み】JavaScriptの関数式の前にプラス記号がある場合
-
[解決済み] jQueryを使用してAJAXリクエストに失敗した場合に再試行する最善の方法は何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptの(function() { } )()構文とは何ですか?
-
[解決済み] JSのDateからDay名
-
[解決済み] express.json()とexpress.urlencoded()とは何ですか?
-
[解決済み] WebpackでjQueryを本物のWindowオブジェクトに公開する
-
[解決済み] javascriptからフィールドを無効とすることはできますか?
-
[解決済み] truthy や falsy を明示的なブール値、すなわち True や False に変換する。
-
[解決済み] 料金制限のあるAPIを独自にDogfoodする
-
[解決済み] Firebase用Cloud Functionsのトリガーは時間通り?
-
[解決済み] JavaScript 予期せぬ事態に対する可能な反復処理
-
[解決済み] JavaScript 配列の項目を前に移動させる