Проблема с закрытием JS

Question

У меня есть это js:

(function () {

    Namespace = {

        settings: {
            myVar: 'test' 
        },

        init: function() {

            var memberSearchFrm = document.getElementById('memberSearch');
            memberSearchFrm.onsubmit = function() {

                this.someOtherFunction(); // doesn't work
                console.log(this.settings.myVar); // doesn't work 
            }
         },

        someOtherFunction: function() {
            console.log('test');  
        }
    }

    Namespace.init();
})();

Я теряю контекст «this», когда вхожу в функцию onSubmit.Можете ли вы помочь мне понять, почему это происходит и как обойти эту ситуацию?

Answer 1

Внутри memberSearchFrm.onsubmit, this относится к memberSearchFrm, а не к объекту, который вы хотите.Вам необходимо сохранить ссылку на this.

    init: function() {
        var that = this;
        var memberSearchFrm = document.getElementById('memberSearch');
        memberSearchFrm.onsubmit = function() {
            that.someOtherFunction();
            console.log(that.settings.myVar); 
        }
     },

Answer 2

Попробуйте этот трюк.

Перед закрытием установите переменную с названием 'that' для этого.

var that = this;

Затем используйте это в закрытии.Проблема в том, что замыкание связано с вашим DOM-узлом, а не с вашим объектом.Поэтому, когда вы вызываете замыкание, это имеет значение узла DOM.

Answer 3

Я столкнулся с той же проблемой с замыканиями и заставил эту скрипку поэкспериментировать с другими способами вызова других функций в замыкании.

http://jsfiddle.net/7FzEz/5/

Я, наконец, остановился на этом формате:

(function () {

     var obj = {

        settings: {
            myVar: 'test' 
        },

        init: function() {

            var memberSearchFrm = document.getElementById('memberSearch');
            memberSearchFrm.onsubmit = function() {

                obj.someOtherFunction(); 
                console.log(obj.settings.myVar);  
            }
         },

        someOtherFunction: function() {
            console.log('test');  
        }
    }

    obj.init();
})();