对象字面量内的范围

Question

我将从一个示例 sn-p 开始：

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/>', {}); 合并
之后，ns.box() 返回一个包含一些方法的新对象。
--

我想要归档的是能够访问event handlers 中的那些propertys / methods。当然，此时我无法访问box.somemethod，因为此时我无法引用外部box 属性。所以我尝试将事件处理程序的范围从jQuery.proxy() 更改为this，但没有成功。
this.somemethod 即使在代理时也未被引用。 我还尝试从上到下代理所有对象，也没有成功。

在像这样的构造中，甚至有可能在事件处理程序中从ns.box() 的返回对象访问属性吗？

Answer 1

您可以使用范围函数来实现这一点，如下所示：

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
    };
})());

通过将框分配给我们的作用域函数内的 var，我们创建了一个符号，事件处理程序（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
    };
})());

这些函数的名称现在可以显示在调用堆栈和错误消息中，但它们是完全私有的，不会弄乱全局命名空间。