javascript - javascript 对象字面量 - 嵌套函数和“this”关键字

Question

在下面的示例中，当functionA()被调用时，this关键字指的是包含对象，因此我可以访问它的属性（例如theValue）

我的问题：如何myObj从嵌套 functionB()中引用属性？

var myObj = {
    theValue: "The rain in Spain", 
    functionA: function() {
        alert(this.theValue);
    },
    moreFunctions: {
        functionB: function() {
            alert(????.theValue);
        }
    }
}

myObj.functionA(); 
myObj.moreFunctions.functionB();  

提前致谢。

Answer 1

立即调用救援！

var myObj = (function () {
    var that = {
        theValue: "The rain in Spain", 
        functionA: function() {
            alert(this.theValue); // or that.theValue, both work here
        },
        moreFunctions: {
            functionB: function() {
                alert(that.theValue);
            }
        }
    };
    return that;
}()); // <-- immediate invocation !!

您可以进一步分解它：

var myObj = (function () {
    function functionA() {
        alert(that.theValue);
    }
    function functionB() {
        alert(that.theValue);
    }
    var that = {
        theValue: "The rain in Spain", 
        functionA: functionA,
        moreFunctions: {
            functionB: functionB
        }
    }
    return that;
}());

如果您熟悉 OOP，则可以使用它来制作私有变量。

Answer 2

您可以简单地使用myObj：

alert(myObj.theValue);

查看演示http://jsbin.com/izugon/2/edit

Answer 3

一种常见的做法是定义一个“self”变量并使用它而不是 this 关键字。当您希望添加范围或创建类时，这会有所帮助。

var myObj = new function(){
    var self = this;
    this.theValue = "The rain in Spain";
    this.functionA = function() {
        alert(self.theValue);
    },
    this.moreFunctions = {
        functionB: function() {
            alert(self.theValue);
        }
    }
   }();

   myObj.functionA();
   myObj.moreFunctions.functionB();

另一种可能性是使用 ECMA5 Function.prototype.bind 方法。简单来说，你可以绑定一个方法的this关键字。按照链接或使用搜索引擎了解更多详情。如果您使用此方法，请注意它与旧版浏览器不兼容，但提供的链接显示了您可以用来在旧版浏览器中实现.bind方法的替代实现。

var myObj = new function(){
    this.theValue = "The rain in Spain";
    this.functionA = function() {
        alert(this.theValue);
    }.bind(this);
    this.moreFunctions = {
        functionB: function() {
            alert(this.theValue);
        }.bind(this)
    };
}();

myObj.functionA();
myObj.moreFunctions.functionB();