Блог

У меня есть этот 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();
})();
  

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

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

Перед закрытием задайте переменной с именем ‘that’ значение this.

 var that = this;
  

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

Внутри 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); 
        }
     },
  

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

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