匿名関数（）呼び出しでJavaScriptクラスを埋め込むのはなぜですか？

StackOverflow https://stackoverflow.com//questions/12692250

  •  12-12-2019
  •  | 
  •  

質問

私は、Microsoftから新しいJavaScript様言語について読んで、 typescript 。遊び場（例）には、JavaScriptコードに変換されたTyptionScript構文に単純なクラスがあります。Javaプログラミングの背景から来ると、TysscriptからコンパイルされているようにJavaScriptでOOPがどのように行われるかを学ぶのは面白かったです。

TypeScriptコード：

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}   

var greeter = new Greeter("world");

var button = document.createElement('button')
button.innerText = "Say Hello"
button.onclick = function() {
    alert(greeter.greet())
}

document.body.appendChild(button)
.

と同等のJavaScriptコード：

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();
var greeter = new Greeter("world");
var button = document.createElement('button');
button.innerText = "Say Hello";
button.onclick = function () {
    alert(greeter.greet());
};
document.body.appendChild(button);
.

TypeScript部品はJavaと非常によく似ていますので、わかります。これで、JavaScriptのGreeterクラスの本文が匿名function()呼び出しに埋め込まれているのはなぜですか？

このように書いてみませんか？

function Greeter(message) {
    this.greeting = message;
}
Greeter.prototype.greet = function () {
    return "Hello, " + this.greeting;
};
.

各方法の利点/不利益は何ですか？

役に立ちましたか？

解決

次はすぐに呼び出された関数式：

と呼ばれます。 
(function(){ ... })();
.

グローバルスコープをクリーンに保つために使用されます。しかし、この場合、戻り値が変数Greeterに割り当てられているため必要ではありません。このパターンが役に立つ唯一の時間は、 "Private" static メンバーを望む場合です。

e.g： 

var Greeter = (function () {
    var foo = 'foo', bar = 'bar'; /* only accessible from function's defined
                                     in the local scope ... */

    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();
.

他のヒント

これは私的メンバーを可能にすることです。この例では、すべてのメンバーは一般に公開されています。ただし、あなたが私的メンバーを提供したい場合は、クロージャーを介して呼び出し元のスコープから隠す必要があります。したがって、あなたがそのような私的なメンバーを持っているならば：

class Greeter {
    private greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
.

おそらくこのようなものを手に入れるでしょう：

var Greeter = (function () {
    var greeting="";
    function Greeter(message) {
        greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + greeting;
    };
    return Greeter;
})();
.

グリーティング変数は、匿名関数内で定義されている関数で利用可能ですが、他の至る所には見えません。

明らかなスコープ/クロージャーの推論以外にも。クラス定義を再起動する（解釈）匿名関数を使用する。これにより、JITの最適化を実行中にフロントロードすることができます。要するに、より複雑なアプリケーションではパフォーマンスが向上します。

匿名関数/自己実行クロージャーは通常スコープをカプセル化するために使用され、返された値のみがその外部にアクセス可能になります。（またはウィンドウのように、他のオブジェクトに添付しているもの）

匿名関数はおそらく、コードの他の部分との名前照合を防ぐためのものです。このようにして、あなたの匿名関数の中で、 "$"という変数を宣言することさえ、あなたが望むものは何でも、そして同時に、競合することなくあなたのコードの他の部分にjQueryを使うことさえできます。

クロージャーは、コンストラクタをパラメーターで呼び出すための唯一の平均です。

var w = new Greeter("hello")
.

他の方法がありますが、すべて複雑で制限事項と欠点があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top