代码之家 › 专栏 › 技术社区 › jAndy

对象文本中的范围

scope jquery javascript

jAndy · 技术社区 · 16 年前

我将从一个示例片段开始:

self.addwidget({
    box:    ns.box({                        
                text:       'Foobar',
                fromTop:    ~~(Math.random()*window.innerHeight),
                fromLeft:   ~~(Math.random()*window.innerWidth),
                toTop:      240,
                toLeft:     40,
                css:        'foobar',
                easing:     'easeOutCirc',
                duration:   2000,
                events:     {
                    mousedown:      function(e){
                        e.target.position = {x: e.pageX, y: e.pageY};
                    },
                    mouseup:        function(e){
                        // "this" should reference be "box"                                     
                    }
                }
    }),
    delay:  3000
});

简短描述 :
ns.box() 将对象作为参数并创建新的 jQuery object jQuery.extend() 合并 events jQuery constructor $('<elem/>', {});

--

propertys / methods event handlers box.somemethod 因为我不能引用 box 此时的属性。所以我尝试用 jQuery.proxy() this ,但没有成功。
this.somemethod 即使被代理也不被引用。我还尝试从上到下代理所有对象,但也没有成功。

ns.box公司()

1 回复 | 直到 11 年前

T.J. Crowder 16 年前

您可以通过作用域函数实现这一点,如下所示:

self.addwidget((function() {
    var box = ns.box({                        
                text:       'Foobar',
                fromTop:    ~~(Math.random()*window.innerHeight),
                fromLeft:   ~~(Math.random()*window.innerWidth),
                toTop:      240,
                toLeft:     40,
                css:        'foobar',
                easing:     'easeOutCirc',
                duration:   2000,
                events:     {
                    mousedown:      function(e){
                        e.target.position = {x: e.pageX, y: e.pageY};
                    },
                    mouseup:        function(e){
                        // You can access `box` here                         
                    }
                }
    });

    return {
        box:   box,
        delay: 3000
    };
})());

closures )关闭,从而可以访问。我们立即调用函数,让它返回对象。闭包的引用是持久的,所以。。。

我一直使用这种模式,因为我不喜欢匿名函数(例如,您的事件处理程序是匿名的); more here . 如果我做了以上的工作,我会把这些命名为:

self.addwidget((function() {
    var box = ns.box({                        
                text:       'Foobar',
                fromTop:    ~~(Math.random()*window.innerHeight),
                fromLeft:   ~~(Math.random()*window.innerWidth),
                toTop:      240,
                toLeft:     40,
                css:        'foobar',
                easing:     'easeOutCirc',
                duration:   2000,
                events:     {
                    mousedown:      boxMousedown,
                    mouseup:        boxMouseup
                }
    });

    function boxMousedown(e){
        e.target.position = {x: e.pageX, y: e.pageY};
    }

    function boxMouseup(e){
        // You can access `box` here                         
    }

    return {
        box:   box,
        delay: 3000
    };
})());

完全保密 ,而不是混乱的全局命名空间。