How do I call a function as a "new object" and call the function again?
As a learning experience, I am trying to make my own little debug console script object oriented. I want it to be like jQuery in that you can call it like a function ( jQuery('div')
) or like an object ( jQuery.ajax()
).
I have the code below that almost works. It's basically an alias for "console.log".
My goal is to accomplish the following:
var log = new RadDebug;
// Create our function
log('You selected: %s', fruit_type);
// Invoke the top-level function
// Output: You selected: "Apple"
log.warn('You selected: %s', fruit_type);
// Invoke a method "warn", which displays a caution icon next to the log.
// Output: (!) You selected "Apple"
script I am working on:
function RadDebug() {
var debug_enabled = (debug_mode && window.console && window.console.log instanceof Function);
// If this object was already initialize, redirect the function call to the ".log()" as default
if ( this.initialized ) {
return this.log.apply( this, arguments );
}
this.initialized = true;
this.log = function() {
if ( !debug_enabled ) return;
console.log.apply( console, arguments );
};
this.info = function() {
if ( !debug_enabled ) return;
console.info.apply( console, arguments );
};
// More methods below
}
Problem:
The call log.warn("hello world")
works as you expected.
The call log("hello world")
tells me that TypeError: Object is not a function
.
Question: How do I make it work like a function and have object-like properties? (Like how jQuery does it)
(This question was resolved thanks to @FelixKling. The final code is available as a Gist if you want to check it out).
source to share
Don't use RadDebug
as a constructor function, just attach methods to the function itself.
For example:
var RadDebug = (function() {
// Some IIFE to keep debug_enabled and functions local
var debug_enabled = (debug_mode && window.console && window.console.log instanceof Function);
// Functions here
function log() {
if ( !debug_enabled ) return;
console.log.apply( console, arguments );
}
function info() {
if ( !debug_enabled ) return;
console.info.apply( console, arguments );
}
// ...
// Attach methods to "main" log function
log.log = log;
log.info = info;
// ...
// Return log function (RadDebug === log)
return log;
}());
Then you use it like
RadDebug('You selected: %s', fruit_type);
// same as
RadDebug.log('You selected: %s', fruit_type);
RadDebug.info('You selected: %s', fruit_type);
or an alias RadDebug
for what you want (for example log
).
source to share
Functions are objects in Javascript. You can return a function to your function RadDebug
and set one of its members to the same returned function. For example:
var hello = function () {
var fn = function () {
console.log("Hello");
}
fn.hello = fn;
return fn;
}
var sayHello = new hello();
sayHello(); // prints "Hello"
sayHello.hello(); // prints "Hello"
source to share