4

私は JS のクロージャーについて学び始めたばかりで、実際にクロージャーであることを認識せずにクロージャーを書いたことがあると誰かに言われました。これは単なるシングルトン オブジェクト/クラスだと思っていましたが、彼はこれをクロージャーだと考えています。

var myWidget = {
    counter : 0,
    init : function() {
        myWidget.left();
        myWidget.right();
    },
    left : function() {
        // whatever
    },
    right : function() {
        // whatever
    }
}
myWidget.init();

これは閉鎖ですか？そうでない場合、それは何ですか?

4

4 に答える 4

3

うん、そうです。

そのコード サンプルでは、​​次のようになります。

  1. いくつかのプロパティを持つプレーン オブジェクトの定義
  2. プロパティ (関数) の 1 つの内部でクロージャを使用して、定義したばかりのオブジェクトを参照します。

グローバル スコープで定義するvar myWidget場合でも、別の関数内で定義する場合でも、スコープ チェーンをたどって への参照を取得していることがわかりますmyWidget。

ここでクロージャーのこの定義を使用すると、次のようになります。

A closure is a combination of a code block and data of 
a context in which this code block is created.

またはモジラの定義：

Closures are functions that refer to independent (free) variables. In other words, 
the function defined in the closure 'remembers' the environment in which it was created.

内部でコード ブロックを実行するときは、呼び出しで参照myWidget.init()するためにクロージャーを使用し、コンテキスト/環境で変数を運ぶときに(関数内でローカルに見つけるのではなく)。myWidgetmyWidget.left()myWidget.right()myWidgetinit()

つまり、実行するmyWidget.init()と次のことが起こります。

  1. myWidget現在の内部にローカル変数はありfunction()ますか? いいえ
  2. 親スコープ (つまり、GLOBAL) に移動します。
  3. 変数はmyWidget現在の (つまり GLOBAL) スコープ内にあるか? はい --> 閉鎖の使用法
  4. このmyWidget参照を使用して変数を取得します。

グローバル スコープのクロージャについて考えたことはありませんでしたが、スコープ チェーンが GLOBAL まで移動し続けることは完全に理にかなっています。GLOBAL は、function() {}すべてをラップする別のコード ブロックとして機能し、変数を見つけるための究極のソースです。その後、このビューをサポートする別の記事を次に示します。

http://lostechies.com/derickbailey/2011/11/30/is-javascripts-global-scope-really-just-a-closure/

于 2013-05-08T06:06:39.593 に答える
2

私には閉鎖のようには見えません。これがより良い例です。

function init() {
    var counter = 0;

    return {
        inc: function() {
            counter++;
        },
        show: function() {
            return counter;
        }
    }
}

閉鎖はcounterここの変数の周りです。理由はあなたが言うときです

var thing = init();

Javascript は、通常はinit関数のローカル変数であったため、実行後に破棄されるものへの参照を保持する必要があります。この設定により、そのローカル変数を操作できる関数が返されました。

電話してみる

thing.inc();
alert(thing.show());
thing.inc();
alert(thing.show());

アラートには 1 が表示され、次に 2 が表示されますが、これは操作しているローカル変数であることを忘れないでください。initそれは閉鎖です。

編集

少し読んでみると、問題のコードにクロージャがあることは明らかです。このトピックで私が最も楽しんだスレッドはhereでした。結局のところ、私の回答にあるのは閉鎖の特定の例ですが、決して唯一のものではありません。

于 2013-05-08T05:50:13.567 に答える
-3 
For implementing javascript closure you have to get plugin that will take care of all closure properties like css closure and javascript closure.

and you have to implement closure like the following example 

<g:compress>
  <link rel="stylesheet" type="text/css" href="css/dp.css"/>
  <link rel="stylesheet" type="text/css" href="css/demo.css"/>    
</g:compress>
...
<div id="datepicker"></div>
<g:compress>
  <script type="text/javascript" src="common.js"/>
  <script type="text/javascript" src="closure/goog/base.js"/>
  <script>
       goog.require('goog.dom');
       goog.require('goog.date');
       goog.require('goog.ui.DatePicker');
  </script>
  <script type="text/javascript">
      var dp = new goog.ui.DatePicker();
      dp.render(document.getElementById('datepicker'));
  </script>
</g:compress>
于 2013-05-08T05:53:10.773 に答える