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 关键字。 Follow the link or use a search engine for more details。如果您使用此方法，请注意它与旧版浏览器不兼容，但提供的链接显示了可用于在旧版浏览器中实现 .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();

javascript object literal - 嵌套函数和“this”关键字

3 个答案: