Javascript object literal - вложенные функции и ключевое слово "this"

В приведенном ниже примере, когда вызывается 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();

Спасибо заранее.

Ответ 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;
}());

Если вы знакомы с ООП, вы можете использовать это, чтобы сделать переменные private.

Ответ 2

Вы можете просто использовать myObj:

alert(myObj.theValue);

Проверить демо http://jsbin.com/izugon/2/edit

Ответ 3

Общей практикой является определение переменной "self" и использование этого, а не ключевое слово. Это помогает, когда вы хотите добавить область или создать класс.

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();