Javascript对象文字-嵌套函数和"this"关键字

javascript object literal - nested functions and the "this" keyword

本文关键字：quot this 关键字 函数 对象 文字 嵌套 Javascript      更新时间：2023-09-26

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

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

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

立即调用救援!

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，你可以使用这个来使私有变量

您可以简单地使用myObj:

alert(myObj.theValue);

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

一个常见的做法是定义一个"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关键字。点击链接或使用搜索引擎了解更多细节。如果使用此方法，请注意它与较旧的浏览器不兼容，但提供的链接显示了可用于实现的替代实现。在旧浏览器中绑定方法。

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();
相关文章：