javascript - 从另一个属性的函数中使用时，对象文字根属性未定义

Question

我已经阅读了几个小时，但似乎找不到适合我需要的答案。由于代码的大小，此时我不想更改结构。如果可能的话，我正试图在我已经准备好的结构中找到一个可行的解决方案。

首先，这是我的对象文字结构的一个非常简化的模型:

NS = 
{
    x: undefined,

    button: undefined,

    fn: 
    {
        root: undefined,

        doSomething: function () 
        {
            var root = this.root,
                x = root.x;       // exception occurs here

            // do something with x
        }
    },

    init: function () 
    {
        var self = this,
            x = self.x,
            button = self.button,
            fn = self.fn,
            fn.root = self;

        x = $("#x");
        button = $("#button");    

        button.on("click", fn.doSomething);
    }
};

我知道 init() 下的声明看起来并不是真正需要的，但是命名空间可能会变得相当长，所以我喜欢这样缩短它们。在我遇到这个障碍之前，这几乎在所有情况下都对我有用。我知道我可以完全限定所有内容并且它应该可以工作，但由于前面提到的长命名空间，我真的不想这样做。

我的问题是，当我的根属性 x 在 init() 函数中设置后，当从另一个属性的函数中访问它时，它的值没有保留.您可以从 init() 函数中获取 console.log(this.x)，它就在那里。但是，当您单击按钮并且 onClick 函数尝试声明 x = root.x 时，它会抛出:

Uncaught TypeError: Cannot read property 'x' of undefined

---

更新:

添加 console.log() 显示 fn.root.x 甚至在调用处理程序之前也是未定义的:

init: function () 
{
    var self = this,
        x = self.x,
        button = self.button,
        fn = self.fn,
        fn.root = self;

    x = $("#x");

    console.log(x); // this shows the object
    console.log(fn.root.x); // this throws the undefined exception

    button = $("#button");    
    button.on("click", fn.doSomething);
}

Answer 1

当 doSomething 作为事件处理程序被调用时，this 将成为函数内的事件目标。所以 this.root 将是未定义的，而 undefined 没有任何属性，所以 root.x 会引发错误。

一个解决方案是用 $.proxy 修复 this 的值:

button.on("click", $.proxy(fn.doSomething, self));