javascript: passing as object or function

Question

My question is rather weird, it has to do with something i have seen in jQuery but so far i have been unable to recreate it.

in jQuery you can go like this

jQuery('div').append

or

jQuery.ajax

the application i am making would need a similar syntax, i notice if you use new like

var that=new function(){
}

you can call the function with just that, without the (), but in some cases i would need it.

The reason for this is some functions i have need to select a dom element just like jQuery so.

that('[data-something="this"]').setEvent('click',functin(){})

and some automatically do it so:

that.loadIt('this','[data-something="that"]')

the reason for this is that the dom elements are loaded externally and pushed, then the script waits for it to be ready before continuing. and doing it this way, to me anyway seems like the most cleanest way to get this functionality (i am coding a full javascript framework so i avoid libraries to keep the scripts fast)

Functions are objects in javascript. So, nothing is stopping them from having properties attached to them as well. — FatalError
– FatalError, Commented Sep 12, 2012 at 18:45

gray state is coming · Accepted Answer · 2012-09-12 18:48:09Z

Functions are objects.

Just get rid of new, and add properties directly to that.

var that = function() {
    // do some work
}

that.loadit = function() {
    // do other work
}

Since you're trying to achieve something like jQuery does, then have that call a constructor.

;(function(global) {

       // function to be publicly exposed
    var that = function(foo, bar) {
        return new MyLibrary(foo, bar);
    }

       // publicly expose the function
    global.that = that;

       // use the function as a namespace for utilities
    that.loadit = function() {
        // do other work
    }

       // The actual constructor function, like the internal jQuery constructor
    MyLibrary(foo, bar) {
        // constructor function
    }

       // Prototypal inheritance of objects created from the constructor
    MyLibrary.prototype.setEvent = function() {
        // do some work
        return this;  // allows for method chaining
    };
    MyLibrary.prototype.otherMethod = function() {
        // do something else
        return this;  // allows for method chaining
    };
})(this);

gen_Eric · Accepted Answer · 2012-09-13 11:25:20Z

5

Functions are objects and can have properties, just like other objects can. So, you can add a property to a function like this:

function myFunc(){}
myFunc.someFunc = function(){}

If you use new myFunc the resulting object won't have someFunc as it's not part of the prototype.

So, you can make something like this:

function myFunc(){
    // This lets you do "myFunc()" instead of "new myFunc()"
    if (!(this instanceof myFunc)) {
        return new myFunc();
    }
    else{
        this.val = 0;

        this.setVal = function(x){
            this.val = x;
            // for function chaining
            return this;
        }

        this.getVal = function(){
            return this.val;
        }
    }
}

// This function is not part of the prototype
myFunc.test = function(){
    alert('hi');
}

// Some tests
var obj = myFunc();
obj.setVal(12).getVal(); // 12

myFunc.test();

obj.test(); // Error: 'test' is not a function

myFunc.getVal(); // Error: 'getVal' is not a function

edited Sep 13, 2012 at 11:25

answered Sep 12, 2012 at 18:42

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

7 Comments

user1666672 Over a year ago

so both myFunc().someFunc() and myFunc.someFunc() will work? ill give that a shot and see how it goes ^^

Rune FS Over a year ago

@user1666672 myFunc().someFunc() will call someFUnc as an instance method of what ever myFunc returns whereas myFunc.someFunc() will call the instance method called someFunc of the object identified by myFunc (an object in this case representing a function but that's irrelevant it could be any object)

gen_Eric Over a year ago

@user1666672: Not quite. In the example: myFunc().getVal() will work, but myFunc.getVal() won't. Conversely, myFunc.test() will work, but myFunc().test() won't.

Rune FS Over a year ago

be aware that using constructor functions are dangerous. (and they are by convention named with a Capital starting letter). If you call a constructor function without new your code will execute just fine but will not create a new object but instead alter the global object (this will represent the global object of you forget the new) this can be a real nightmare to debug

gen_Eric Over a year ago

@RuneFS: What do you mean "alter the global object"?

|

vonflow · Accepted Answer · 2012-09-12 18:42:33Z

0

$.fn.loadIt=function(var1,var2) {
  // $(this) is automatically passed
  // do stuff
}

call it like this

$('#element').loadIt('a variable','another variable');

answered Sep 12, 2012 at 18:42

vonflow

3891 silver badge4 bronze badges

2 Comments

user1666672 Over a year ago

i need to clarify, i'm not using jQuery, just using it as an example as it uses similar syntax to what i need to create.

vonflow Over a year ago

ah sorry, suppose I should have read a little more thoroughly.

Collectives™ on Stack Overflow

javascript: passing as object or function

3 Answers 3

Comments

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related