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

在下面的例子中，何时 functionA() 被调用， this keyword是指包含对象，因此我可以访问其属性（例如 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();

提前致谢。

4485

2018-06-13 23:19

起源

答案:

立即援引救援！

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，可以使用它来制作 私人的 变量。

2018-06-13 23:21

我很困惑接受哪个答案。 elclanrs的建议（alert(myObj.theValue);）工作（不需要重构），但Frits的解决方案（以及更多的研究）为我提供了关于闭包，立即调用以及如何使用它来制作私有变量的信息，所以我接受了这个答案那个基础。感谢大家。 - Bumpy

答案:

立即援引救援！

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，可以使用它来制作 私人的 变量。

2018-06-13 23:21

你可以简单地使用 myObj：

alert(myObj.theValue);

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

2018-06-13 23:21

通常的做法是定义一个“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方法。简单地说，你可以绑定一个方法这个关键词。请点击链接或使用搜索引擎获取更多详细信息。如果您使用此方法，请注意它与旧版浏览器不兼容，但提供的链接显示了您可能用于实现 .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();

2018-06-13 23:28

NOP： jsbin.com/ofehap/1/edit， this 在那里 window。 this 适用内功能，以及上下文取决于你怎么称呼那个功能。 - elclanrs

我想你错过了这一点。编辑后它会工作，但你刚刚改变了数据结构。加上选项 bind 不会工作，因为 this 还是 window。 - elclanrs

你是对的，当我最初阅读这篇文章时，我有一个功能，而不是一个简单干净的JSON结构。我修改了代码以使其按照我原先的意图工作，但如果你想保持它干净的JSON，我不建议它作为答案。但是，范围确实使它更具吸引力。 - andrewjs

我会删除这项努力的投票，但你已经说过，这不是一个好的答案。对于范围界定，您可以使用模块模式方法，如@FritsvanCampen的答案。 - elclanrs

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

答案:

答案:

热门问题