Lacking scope

[ulab]

Hi all,

I can't figure out why the alertDraggable function does have access to the this variable (refering to the object instance), and the onClick function (invoked from within the VE API) doesn't. I appreciate your advise.

ULAB.GeoCMS.Core.Shape = Class.extend({
    initialize: function(type, points) {
        this.veShape = new VEShape(type, points);
        this.locked = true;
        this.previousLocation = null;
        this.draggable = true;
        this.core = ULAB.GeoCMS.Core.Register.getEntry('core');
        this.map = core.getMap();
        this.map.AttachEvent("onclick", this.onClick);
    },
    alertDraggable: function() {
         alert(this.draggable); //true
    },
    onClick: function() {
         alert(this.draggable); //undefined
    });

Note: the code uses the inheritance model as described at: http://twologic.com/projects/inheritance/

Thanks in advance!

[samanime]

This may have nothing to do with it, but the only difference I noticed was that the alert in alertDraggable had a semi-colon at the end whereas onClick's didn't. Try adding one and seeing if that changes anything. Other then that, I don't really see anything that should be different.

You could always have onClick call the alertDraggable function if they are meant to do the same thing.

[ulab]

Thanks for your reply. Sorry my fault typo, the semi-colon has indeed nothing to do with it.

Other suggestions?

[kyberfabrikken]

Because this is a reference to the calling context -- Not to the owning object. This is different in Javascript, than in class based languages. Use a closure to remedy:

var self = this;
this.map.AttachEvent("onclick", function() {
  self.onClick();
});

[ulab]

Thanks! By the way, in the mean time I found an excellent article about this subject at http://www.digital-web.com/articles/...in_javascript/.