关闭时没有变量

时间:2012-10-05 05:03:02

标签: javascript jquery closures

我在javascript类/ jQuery插件的闭包范围内分配一些变量时遇到了麻烦。

当我像Article类的构造函数一样进入Article.initObj()时,我在封闭范围内看不到domElementsettings,但我可以< / strong>请参阅metestVar。这让我很困惑。任何人都可以对这里发生的事情有所了解吗?

编辑:我在firefox和chrome中都试过这个。

这是我的HTML:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="ArticleNav.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // Init our Viomedia article graph
                var articleList = $("#entityList").children().ArticleNav();             
            });
        </script>
    </head>
    <body>
        <div id="leftPanel" class="vpanel">
            <div id="#search">
                <label for="searchField">Search </label>
                <input style="float: right;" name="searchField" id="searchField"/>
            </div>
            <div id="tree">
            </div>
        </div>
        <div id="rightPanel" class="vpanel">
            <div id="entityList" >
                <div class="article program" id="1">
                    <div class="title">The Simpsons</div>
                    <div class="article playlist" id="2">
                        <div class="title">Classic Episodes</div>
                        <div class="article episode" id="6">
                            <div class="title">Homer the Heretic</div>
                        </div>
                    </div>
                    <div class="article season" id="3">
                        <div class="title">Season 4</div>
                        <div class="article episode" id="4">
                            <div class="title">Kamp Krusty</div>
                        </div>
                        <div class="article episode" id="5">
                            <div class="title">A Streetcar Named Marge</div>
                        </div>
                        <div class="article episode" id="6">
                            <div class="title">Homer the Heretic</div>
                        </div>
                        <div class="article episode" id="7">
                            <div class="title">Lisa the Beauty Queen</div>
                        </div>
                    </div>
                </div>
                <div class="artist article" id="7">
                    <div class="title">Electric Light Orchestra</div>
                    <div class="article album" id="8">
                        <div class="title">The Essential Electric Light Orchestra</div>
                        <div class="article album" id="9">
                            <div class="title">Disc 1</div>
                            <div class="article track" id="10">
                                <div class="title">So Serious</div>
                            </div>
                        </div>
                        <div class="article album" id="11">
                            <div class="title">Disc 2</div>
                            <div class="article track" id="12">
                                <div class="title">Last Train to London</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="program article" id="13">
                    <div class="title">Archer</div>
                </div>
            </div>
        </div>
    </body>
</html>

这是我的jQuery插件:

(function($){

    var Article = function (element, options)
    {
        var me = this;
        var testVar = "I can read this";
        var domElement = $(element);

        var settings = $.extend({}, options || {});

        this.initObj = function()
        {
            me.test();
        };

        this.test = function()
        {
            console.log(testVar);
        };

        this.initObj();
    };

    var construct = function(element) {
        var element = $(element);
        // If this element already has this plugin attached to it.
        if(element.data('Article')) {
            return;
        }

        var ArticlePlugin = new Article(element);
        element.data('Article', ArticlePlugin);
    };

    $.fn.ArticleNav = function(func) {

        return this.each(function()
        {
            switch (func) {
                default:
                    construct(this);
                    break;
            }
        });
    };

}( jQuery ));

1 个答案:

答案 0 :(得分:1)

来自父关闭范围的domElement可以获得

.initObj()。您是否真的尝试过使用它,或者您是否只是在调试器中看不到它?

如果您在调试器中单步执行initObj(),则不会在调试器中看到domElement作为局部变量,因为它位于更高的范围内,但是如果您明确监视它,你将能够看到它。如果您在引用它的initObj()中编写代码,它将起作用。

settings相同。