Question

How can I rewrite a function that is in the form:

 foo = function(arg1,arg2){....};

into a form such that arg1 becomes the receiver, to be used like the following?

arg1.foo(arg2);

---

Edit
I found out that with jQuery, I can do this.

jQuery.fn.foo = function(arg){
  ...
}

What is the way to do this with Javascript not using jQuery?

Answer 1

The objects that jQuery returns are jQuery objects, not DOM objects. They contain collections of DOM objects, but jQuery does not directly add any methods to DOM objects at all. jQuery.fn is simply a reference to the prototype of the objects returned by jQuery, allowing you to add methods to that prototype directly.

Since you’re interested in reproducing jQuery’s behavior, you could do the same: wrap native DOM objects in a class of your own, adding whatever methods you want to that wrapper class. Note that you cannot call just any DOM object method on a jQuery instance; jQuery defines some utility methods for invoking actual DOM methods, but in order to call many other DOM methods, you need to access the real DOM objects wrapped inside the jQuery instance. You will have the same limitation with your custom wrapper class — you will need to implement methods on your wrapper that forward the call to the underlying DOM object.

Example:

function DOMWrapper(domObject) {
    this.domObject = domObject;
}

DOMWrapper.prototype = {

    constructor: DOMWrapper,

    foo: function(arg1, arg2, arg3) {
        // this.domObject refers to the wrapped object here
        this.domObject.nativeMethod();
        // you could do things like this here:
        return this.bar.call(this.domObject, arg1, arg2, arg3);
    },

    bar: function(arg1, arg2, arg3) {
        // now, even though "bar" is defined as a method of
        // the DOMWrapper prototype, it has been invoked by "foo"
        // in the context of the wrapped DOM object, so
        // "this" refers directly to the DOM object in this method

        // this goes to the actual DOM nativeMethod:
        return this.nativeMethod();
    },

    domMethodWrapper: function() {
        return this.domObject.nativeMethod();
    }

}