对象文字范围

Question

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

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/>', {});合并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，我们创建了一个符号，事件处理程序（即Closure ）关闭并因此可以访问。 我们立即调用该函数，让它返回对象。 闭包持有的引用是持久的，所以...

我一直使用这种模式，因为我不喜欢拥有匿名函数（例如，事件处理程序是匿名的）； 这里更多 。 如果执行上述操作，则将其命名，如下所示：

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

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