通过原型了解如何将函数与函数一起使用

Question

我只是在四处闲逛，试图模仿某些jQuery函数（试图为jQuery函数编写普通的javascript ），我在这里做了这个

function ezWork(element) {
    if (typeof element === 'string') {
        document.getElementById(element);
        console.log('Got element');
    }
}


ezWork.prototype.on = function(event, callback) {
    if (typeof event === 'string') {

        if (event === 'click') {
            if(window.addEventListener) {
                element.addEventListener('mousedown', callback);
                alert('addEventListener called');
            } else if (window.attachEvent) {
                element.attachEvent('onmousedown', callback);
            } else {
                element.onmousedown = callback;
            }
        }
    }
}

ezWork('click').on('click', function(e) {
    e.preventDefault();
    alert('Worked');
});

http://jsfiddle.net/aJmMa/

我只是很好奇为什么没有定义.on（我正在按照我认为应该做的方式进行此操作，而不是是否知道我是否知道这样做的正确方法，我只是在尝试学习，什么是我要为功能添加功能的正确方法？）

非常感谢您的帮助！

我现在得到的错误是，未定义“ .on”。

Answer 1

var ezWork = (function(win, doc) {

  // Constructor
  function EzWork(element) {
    this.element = this._init(element);
  }

  EzWork.prototype = {
    _init: function(element) {
      return doc.getElementById(element);
    },

    on: function(event, callback) {
      // simplified...
      this.element.addEventListener(event, callback);
    }
  };

  // Shortcut to create a new instance without using 'new'
  return function(element) {
    return new EzWork(element);
  };

}(window, document));

ezWork('click').on('click', function(e) {
  e.preventDefault();
  alert('Worked');
});

演示： http ： //jsbin.com/oquduf/2/edit

Answer 2

因为ezWork()不返回ezWork的实例。 实际上，它不返回任何东西 。 解决此问题后，您将发现该element未定义。 您必须添加它并将其作为属性访问。

function ezWork(element) {
    if (!(this instanceof ezWork)) {
        return new ezWork(element);
    }
    if (typeof element === 'string') {
        element = document.getElementById(element);
        console.log('Got element');
    }
    this.element = element;
}

http://jsfiddle.net/aJmMa/1/