JS литерал объекта, этот контекст меняющегося

Question

Я нахожусь в процессе улучшения моей структуры Javascript и пытается работать, какие модели мне нравится, я следующее:

var aThing = (function() { 

    var module; 

    return { 

    init: function() { 
     module = this; 
     console.log(module); 
    }, 

    }; 

})(); 

Когда я бегу aThing.init(); он записывает Object {init: function} это то, что я хочу, проблема возникает, когда я делаю что-то вроде этого:

document.addEventListener('click', aThing.init, false); 

Это регистрирует #document. Кажется, что this меняется, когда я запускаю функцию без скобок, и я понятия не имею, почему.

Answer 1

Это все о контексте выполнения. Хотя ваш метод init находится внутри вашего модуля aThing, вы выполняете его в другом месте, поэтому ваше использование ключевого слова «this» будет ссылаться на контекст выполнения.

Вместо того, чтобы записывать обработчик событий вне вашего модуля, вы должны рассмотреть возможность использования своего самого модуля для его обработки. Это можно сделать изнутри метода init вашего модуля, и это даст вам более чистую структуру, поскольку вы bucketing все, что касается вашего модуля внутри самого модуля, а не делать что-то вне его и других внутри.

Смотрите ниже:

var aThing = (function() { 
 

 
    var module; 
 

 
    return { 
 
    
 
    init: function() { 
 
     module = this; 
 

 
     // Handle event binding from somewhere within your module 
 
     document.addEventListener('click', module.doSomething, false); 
 
    }, 
 
    
 
    doSomething: function() { 
 
     console.log('Doing something.'); 
 
    } 
 
    }; 
 

 
})(); 
 

 
// Initialize your module 
 
aThing.init();

Answer 2

Вы получаете ссылку 'document', потому что функция init() вызвана в контексте документа. Либо вы можете привязать функцию к тому, что вам нужно.

aThing.init.bind(aThing) 

Или вы можете обратиться с модулем, если его как,

var aThing = (function() { 
    var module = { 
     name : 'My module', 
     init : function() { 
      alert(module.name); 
     } 

    }; 
    return module; 

})(); 

Answer 3

Конечно, так как контекст в обработчик события будет document. Либо используйте:

document.addEventListener('click', function() { 
    aThing.init(); 
}, false); 

или

document.addEventListener('click', aThing.init.bind(aThing), false);