How do I write a function with extend functionality in javascript?

Question

I try to realize a function e.g. MyFn() with some features as follows:
1. MyFn('Id') > It must be result the value of document.getElementById('Id');
2. MyFn('Id').MyMethode(); > It must be result the performing of a function.
Below this is realized by means of "Object.prototype" as follows:

Object.prototype.MyFn =function(param1){ return document.getElementById(param1); };
alert( MyFn('mydiv1') );
MyFn('mydiv1').posi = function() { alert("Hello, I'm the function posi!"); };
MyFn('mydiv1').posi();
alert( MyFn('mydiv1') );

Just the above example is what I'm trying to realize. But I don't want to use Object.prototype or jQuery.
Below is my wrong approach (it is maybe helpfully what I'm trying to say or to do):

var MyObj = {
    method: function(args, callback) {
        if(typeof callback == "function") {
            callback();
        }
        return 123;
    }
}

MyFn = function(sId) { 
    return MyObj;
};

alert( MyFn("mydiv1").method() ); // This is ok, because it calls the method: MyObj.method() as it was expected.
alert( MyFn("mydiv1") ); // <-- But here I like to get document.getElementById("mydiv1").

Note: The syntax of code (how the functions are to call) is important! The functions are to call as follows: MyFn('Element-Id') or MyFn('Element-Id').posi(), but not something as follows: MyObj.MyMethode()
Do you have any idea how can I it realize? Thanks in advance.

You can't return 2 different results from a single function with the same input. You either return the HTMLElement object, or your own. MyFn(id) will always return the same result - regardless of what you want to do with it afterwards (such as .method()) — Amit
– Amit, Commented Jun 3, 2015 at 13:45
That's right! But I want to somehow achieve something as I explained above. For example jQuery do something like it. E.g. $('#Id') and $('#Id').position().left. — user3815508
– user3815508, Commented Jun 3, 2015 at 13:55
jQuery doesn't return an HTMLElement. It returns a jQuery wrapper object with a lot of functionality (such as position()). When you want the actuall element, you call .get(). — Amit
– Amit, Commented Jun 3, 2015 at 13:58

Alex · Accepted Answer · 2015-06-03 14:00:49Z

1

You could try something like:

var MyObj = {
    method: function(args, callback) {
        if(typeof callback == "function") {
            callback();
        }
        return 123;
    }
}

var MyFn = function(sId) { 
    this.elem = document.getElementById(sId);
    this.MyObj = MyObj;
    return this;
};

alert( MyFn("mydiv1").MyObj.method() ); 
alert( MyFn("mydiv1").elem );

This returns a reference to the function, after the function executes, so offers syntax much like C# extension methods for example.

edited Jun 3, 2015 at 14:00

answered Jun 3, 2015 at 13:50

Alex

4,9438 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3815508 Over a year ago

Almost what I'm trying to achieve. I think with a little tricks and some functions like .apply(), .call() or .bind() it could be done. But I don't know how :)

Alex Over a year ago

Yeah you can use MyFunc.call(MyObj) to add the object to the function object. JavaScript is all about tricks which is why I love it :)

adeneo · Accepted Answer · 2015-06-03 14:19:02Z

1

Should be rather straight forward, seeing as functions are objects as well.
The way it's usually done, and the way jQuery does it, is to return a new instance of the function, which is done with a simple check

function MyFn(selector, context) {

    if ( !(this instanceof MyFn) ) { // not an instance

        return new MyFn(arguments);  // calls itself with the "new" keyword

    } else { // now it is an instance

        context = context || document;
        this[0] = context.getElementById(id);
    }

    return this;
}

Now building on that, we can add methods, but that requires prototyping them, which is the correct way to do this anyway

MyFn.prototype.width = function() {
    return this[0].style.width;
}

and even make those methods chainable

MyFn.prototype.width = function(width) {

    if ( width ) {
        this[0].style.width = width + 'px';
        return this;
    } else {
        return this[0].style.width;
    }

}

FIDDLE

answered Jun 3, 2015 at 14:19

adeneo

319k29 gold badges410 silver badges392 bronze badges

2 Comments

user3815508 Over a year ago

1. I can call a function like alert( element.width() ); 2. I can get the id alert( element[0].id ); 3. and I can get the reference as follows: alert( MyFn('mydiv1')[0] ); Very nice. But it would be even nicer if "[0]" could be eliminate. Maybe with a little tricks and some functions like .apply(), .call() it .bind() it could be done. :)

adeneo Over a year ago

Yes, you can eliminate the [0] in certain instances, jQuery for instance does this for many methods, where it automatically uses the first element in the collection, and it also provides methods like eq to select a certain element in the collection. You could of course just replace the [0] with this.elem or something instead, if you only ever have one element, but the element has to be stored somewhere, and it can't be returned directly otherwise the methods won't be chainable, the object instance has to be returned to do that.

Remy Grandin · Accepted Answer · 2015-06-03 13:49:08Z

0

Ugly, not recomended by almost all design patern, but should work :

MyFn = function(sId) {
    var obj = document.getElementById(param1);

    obj.method = function(args, callback) {
        if(typeof callback == "function") {
            callback();
        }
        return 123;
    }
    return MyObj;
};

Basicly you add the function manualy to the object.

It's not a good desing patern as someone external won't know in advance that the object has an extra method.

answered Jun 3, 2015 at 13:49

Remy Grandin

1,5961 gold badge14 silver badges36 bronze badges

Comments

meskobalazs · Accepted Answer · 2015-06-03 13:49:20Z

0

This is a bit hacky solution:

var MyObj = function (id) {
    var obj = document.getElementById(id);
    // attach functions here
    obj.myFun = function () {
        // ...
    }
    // ...
    return obj;
}

You get the object, attach your own functions to the object (hopefully without redefining existing ones), then return it.

answered Jun 3, 2015 at 13:49

meskobalazs

16.1k2 gold badges44 silver badges63 bronze badges

Collectives™ on Stack Overflow

How do I write a function with extend functionality in javascript?

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related