javascript - 使用原型查看如何将函数与函数一起使用

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/