Fluffy.AJAX is not a constructor. Why not?

[dennis.sprengers]

To avoid future collisions in the global namespace, I'm transferring
all javascript functions my CMS uses to a global object called
"Fluffy". I'm experiencing a problem. FF Firebug tells me Fluffy.AJAX
is not a constructor. I don't understand why not. Could somebody help
me getting this code to work?

---------------------------------------------------------------------
var Fluffy = {};

Fluffy.Bootstrap = {version : '0.1 beta', release : 'jan 1st, 2008'}

Fluffy.Module = function(properties) {
var module = function() {return this.init.apply(this, arguments);};
Fluffy.extend(module, this);
module.prototype = properties;
return module;
}

Fluffy.extend = function() {
var args = arguments;
if (!args[1]) args = [this, args[0]];
for (var property in args[1]) args[0][property] = args[1][property];
return args[0];
}

Fluffy.AJAX = new Fluffy.Module ({
init : function() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
});

var ajax = new Fluffy.AJAX(); // Fluffy.AJAX is not a constructor

 

[Thomas 'PointedEars' Lahn]

To avoid future collisions in the global namespace, I'm transferring
all javascript functions my CMS uses to a global object called
"Fluffy".

That's a good idea if you want to show that you are a script-kiddie ;-)

[...]
Fluffy.Module = function(properties) {
var module = function() {return this.init.apply(this, arguments);};
Fluffy.extend(module, this);
module.prototype = properties;
return module;

A constructor must not return a value different from `undefined'.

}
[...]
Fluffy.AJAX = new Fluffy.Module ({
init : function() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
});

You are calling `Fluffy.Module' as a constructor. A constructor call
returns a reference to the newly constructed object. That object is not a
Function object,

var ajax = new Fluffy.AJAX(); // Fluffy.AJAX is not a constructor

so it cannot be used as a constructor.

You are following the misguided Prototype.js example that requires objects
to have an `init' method in order to be initialized. Use constructor code
for the initialization instead, and use the prototype chain to have one
object inherit properties from another.


PointedEars

 

[Anthony Levensalor]

Thomas 'PointedEars' Lahn posted :

so it cannot be used as a constructor.

You are following the misguided Prototype.js example that requires objects
to have an `init' method in order to be initialized. Use constructor code
for the initialization instead, and use the prototype chain to have one
object inherit properties from another.


PointedEars

You just solved a problem I was having too, Thomas. Thanks.

~A!

 

[dennis.sprengers]

Thomas, thanks for a quick reply!

That's a good idea if you want to show that you are a script-kiddie ;-)

Seriously, do you think it's a good idea or not? I'm not that
experienced in javascripting...

You are following the misguided Prototype.js example that requires objects
to have an `init' method in order to be initialized. Use constructor code
for the initialization instead, and use the prototype chain to have one
object inherit properties from another.

So I now have this:

Fluffy.AJAX = function() {
this.init = function() {
if (window.XMLHttpRequest) {
new XMLHttpRequest();
}
else {
new ActiveXObject("Microsoft.XMLHTTP");
}
}

this.sendRequest = function(url) {
http.open('get', url);
http.onreadystatechange = handleResponse;
http.send(null);
}
}

var ajax = new Fluffy.AJAX(); // obviously returns an empty object,
but
var ajax = new Fluffy.AJAX.init(); // gives another "not a
constructor" error

What am I doing wrong? And what's then the proper way to initialize a
new XMLHttpRequest object? I want to be able to

- create a new XMLHttpRequest instance by calling Fluffy.AJAX
- send a request by invoking Fluffy.AJAX.sendRequest('test.php')

Hope you can give me some more point-ers

 

[Thomas 'PointedEars' Lahn]

Thomas, thanks for a quick reply!

You're welcome.

Seriously, do you think it's a good idea or not? I'm not that
experienced in javascripting...

I would certainly use another, meaningful identifier, which is what I was
referring to with this. But I also don't think it would be necessary to
make all user-defined constructors properties of a user-defined Object
object. The so-called namespace issue is heavily overrated. With
client-side scripting, you are in control of the code that you use. Unless
you don't apply care in selecting the identifiers of your libraries or you
mindlessly put together a number of foreign libraries, there is little
chance that said namespace collision would ever occur. And if it occurred,
you could easily work around it.

So I now have this:

Fluffy.AJAX = function() {
this.init = function() {
if (window.XMLHttpRequest) {
new XMLHttpRequest();
}
else {
new ActiveXObject("Microsoft.XMLHTTP");
}
}

As I said, an `init' method only introduces overhead as compared to
constructor-based initialization.

this.sendRequest = function(url) {
http.open('get', url);
http.onreadystatechange = handleResponse;
http.send(null);
}
}

var ajax = new Fluffy.AJAX(); // obviously returns an empty object,
but
var ajax = new Fluffy.AJAX.init(); // gives another "not a
constructor" error

What am I doing wrong?

You defined Fluffy.AJAX as being a reference to a Function object. However,
Fluffy.AJAX.init is `undefined'. With the first statement you create a new
Fluffy.AJAX object and assign a reference to it to `ajax'. *That* object,
and not Fluffy.AJAX, has the init() method you are trying to use as a
constructor. So that would be

var o = new ajax.init();

However, constructing two objects when only one is needed does not make
sense either.

And what's then the proper way to initialize a new XMLHttpRequest object?

What I meant with constructor-based initialization is instead something like
the following:

// fluffy is not a constructor, should not start uppercase
fluffy.AJAX = function()
{
// prefer this branch order for local filesystem access
if (typeof ActiveXObject != "undefined")
{
// you have to add exception handling here
this.http = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (typeof XMLHttpRequest != "undefined")
{
this.http = new XMLHttpRequest();
}
};

fluffy.AJAX.prototype = {
constructor: fluffy.AJAX,

// ...

sendRequest: function(url)
{
if (typeof this.http != "undefined")
{
var req = this.http;
req.open('get', url);
req.onreadystatechange = this.handleResponse;
req.send(null);
}
}
};

I want to be able to

- create a new XMLHttpRequest instance by calling Fluffy.AJAX
- send a request by invoking Fluffy.AJAX.sendRequest('test.php')

var ajax = new fluffy.AJAX();
ajax.sendRequest('test.php');

But, as I said, I don't see the necessity of the encapsulation of
constructors that you are trying to do. It only accounts for overhead.

Hope you can give me some more point-ers

[x] done *g*


BTW: Please don't delete the attribution line.


PointedEars