1. ホーム
  2. javascript

[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複

2022-06-29 01:50:39

質問

重複の可能性があります。

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オブジェクトの例と類似していることがおわかりいただけたと思います。