JS Class not implementing in IE

[DoomedLung]

Hey everyone,

I've been writing some classes and have a problem with one in
particular not implementing in IE.

Here's the code:

var Expand = function(){
this.childmenu = function(){
alert('drop');
}
this.init = function(){
var self = Expand;
document.getElementById('expImg1').onclick = self.childmenu;
}
}

window.onload = Expand.init;

can anyone tell me if I've missed something please ???

 

[Michael Winter]

I've been writing some classes ...

In a language that doesn't have them?

var Expand = function(){
this.childmenu = function(){
alert('drop');
}
this.init = function(){
var self = Expand;
document.getElementById('expImg1').onclick = self.childmenu;
}
}

window.onload = Expand.init;

There won't be an init property because the function expression is never
executed. If the parentheses denoting a function call were appended:

var Expand = function() {
this.init = function() {/* ... */};
}();
^^
this would still fail as the this operator would reference the global
object.

Either use the new operator to call the internal [[Construct]] method of
the function expression:

var Expand = new function() {
this.init = function() {/* ... */};
}();

or change your approach to use an object literal:

var Expand = {
init: function() {/* ... */}
};

Which you would choose would depend on whether was any advantage to
establishing a new execution context.

Mike

 

[DoomedLung]

Hey Mike,

Thanks for your reply... I have tried your latter recommendation and
this has fixed the problem. Forgive me for being naive but when the
keyword 'new' is appended before the keyword 'function' does this not
make this function a Singleton?

 

[Douglas Crockford]

Hey Mike,

Thanks for your reply... I have tried your latter recommendation and
this has fixed the problem. Forgive me for being naive but when the
keyword 'new' is appended before the keyword 'function' does this not
make this function a Singleton?

No, it makes it a mistake. It unnecessarily imposes the overhead of a
constructor on what should be a simple invocation. Leave the new out.

var instance = function () {
...
}();

http://javascript.crockford.com/

 

[DoomedLung]

Hey Douglas, thank you for your reply...

I have tried it your way and it doesn't work. I'm going to have to
rewrite the code so it can be implemented without the 'new' keyword.

Thanks again

 

[DoomedLung]

Hey Douglas, thank you for your reply...

I have tried it your way and it doesn't work. I'm going to have to
rewrite the code so it can be implemented without the 'new' keyword.

Thanks again

 

[Michael Winter]

Hey Douglas, thank you for your reply...

Please quote appropriately when replying.

I have tried it your way and it doesn't work.

It will if you return an object. It's the way I'd normally create an
interface with "private" data or functions (rather than using the new
operator), but I didn't mention it for some reason.

var Expand = function() {
return {
init: function() {/* ... */}
};
}();

Again, unless there's some reason to introduce that extra execution
context, there's not much point in using it rather than using a simple
object literal. For example, if your childmenu method wouldn't be called
from the interface, it could be declared within the enclosing function
expression making it "private":

var Expand = function() {
function childMenu() {
/* ... */
}

return {
init: function() {
var element;

if (document.getElementById
&& (element = document.getElementById('expImg1')) {
element.onclick = childMenu;
}
}
};
}();

Mike

 

[DoomedLung]

Thanks again

 

[VK]

I have tried it your way and it doesn't work. I'm going to have to
rewrite the code so it can be implemented without the 'new' keyword.

If you just like to have "new" keyword used in your code you can
also use anonymous object's method call:

function Expand() {
this.init = function() {
window.alert('Hi from anonymous object!');
}
}

window.onload = (new Expand).init;