Почему мой простой пример обработки событий не работает?

Question

Я пытаюсь сделать простой обработчик событий.

(Обратите внимание, я не пытаюсь реализовать полноценную модель публикации / подписки; меня просто интересует, почему мой пример не делаетработать так, как я думаю)

var myObj = (function () {

  var private = "X";

  function triggerEvent(eventName) {
    if (this[eventName]) {
      this[eventName]();
    }
  }

  // Setter / Getter
  function getProp() {
    return private;
  }

  function setProp(value) {
    private = value;
    triggerEvent("onPropChange");
  }

  // Public API
  return {
    // Events
    "onPropChange": null,    // Fires when prop value is changed

    // Methods
    "getProp": getProp,
    "setProp": setProp
  };
})();

// Now set event handler
myObj.onPropChange = function () {
  alert("You changed the property!");
};

myObj.setProp("Z");  // --> Nothing happens. Wrong
                     // Why doesn't my alert show?

Я установил свойство onPropChange моего объекта в более простую функцию-обработчик, но оно не запускается.Я отладил это, и кажется, что в triggerEvent переменная this ссылается на глобальный объект window.Я думал, что это должно ссылаться на myObj (это то, что мне нужно).

Может кто-нибудь объяснить ошибку в моем мышлении и как я это исправить?Помощь очень ценится.

jsFiddle здесь

Answer 1

Измените свой код, чтобы создать объект, а затем вернуть его так:

var myObj = (function () {

  var private = "X";
  var obj = {
    "onPropChange": null,    // Fires when prop value is changed

    // Methods
    "getProp": getProp,
    "setProp": setProp
  };

  function triggerEvent(eventName) {
    if (obj[eventName]) {
      obj[eventName]();
    }
  }

  // Setter / Getter
  function getProp() {
    return private;
  }

  function setProp(value) {
    private = value;
    triggerEvent("onPropChange");
  }

  return obj;          
})();

Таким образом, у вас есть ссылка на объект для приватных функций.

Фиксированная скрипка - http://jsfiddle.net/infernalbadger/dkqUW/2/

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

function setProp(value) {
    private = value;
    triggerEvent.call(this, "onPropChange");
}

Указывает, что будет this в вызываемом методе (triggerEvent).

http://jsfiddle.net/infernalbadger/dkqUW/3/