Javascript property exist and scope

Question

I try to create a few objects like this:

Object_level_1 = Ext.extend ( Ext.util.Observable, {
  PropA: null,
  ProbB: null,
  initComponent: function () {
    Object_level_1.superclass.initComponent.call ();
  },
  setValue: function ( name, value ) { // it will come as 'PropA', 45 
    if ( this.hasOwnProperty ( name ) ) { // ' fixed base on dtan answer
       // here is a problem 1
       // how I can access correct property and set it up
       // problem 2
       // How I set up property value of right property by having variable name
       this.fireEvent ( 'Update_on_level_1' );
    }    
  }
}

Object_level_2 = Ext.extend ( Object_level_1, {
  PropC: null,
  ProbD: null,
  initComponent: function () {
    Object_level_1.superclass.initComponent.call ();
  },
  setValue: function ( name, value ) { // it will come as 'PropA', 45 or 'PropC', 100
    Object_level_2.superclass.setValue ( name, value );
    if ( this.hasOwnProperty ( name ) ) { // ' fixed base on dtan answer
       // here is a problem 1 again
       // how I can access correct property and set it up
       // problem 2 again
       // How I set up property value of right property by having variable name
       this.fireEvent ( 'Update_on_level_2' );
    }    
  }
}

Does someone know the solution?

score 2 · Answer 1 · answered Jan 22 '11 at 09:57

Actually, I spotted errors in the code:

Always declare var when creating variables
When calling parent's method, use ClassName.superclass.methodName.call(this, arg1, arg2..). It's important to pass the this because it will change the scope of the called parent's method to the scope of current object. (You can remove the this in my following testing code to see the different outputs).
Normally I declare this.addEvents in initComponent before using the events. Not sure if it's necessary.

Here is my full testing codes with outputs:

var Obj1 = Ext.extend(Ext.util.Observable, {
    propA: null,
    propB: null,
    initComponent: function() {
        Obj1.superclass.initComponent.call(this);
    },
    setValue: function(name, value) {
        if (name in this) { //Used dtan suggestion
            this[name] = value;
            console.log(this.propA, this.propB, this.propC, this.propD);
        }else{
            console.log(name+" is not in Obj1");
        }
    }
});

var Obj2 = Ext.extend(Obj1, {
    propC: null,
    propD: null,
    initComponent: function() {
        Obj2.superclass.initComponent.call(this);
    },
    setValue: function(name, value) {
        Obj2.superclass.setValue.call(this, name, value);
    }
});

var obj1 = new Obj1();
var obj2 = new Obj2();
obj1.setValue('propA', '1a'); //1a null undefined undefined
obj1.setValue('propB', '1b'); //1a 1b undefined undefined
obj2.setValue('propC', '2c'); //null null 2c null
obj2.setValue('propD', '2d'); //null null 2c 2d
obj1.setValue('propA', '1a'); //1a 1b undefined undefined
obj1.setValue('propB', '1b'); //1a 1b undefined undefined
obj1.setValue('propC', '1c'); //propC is not in Obj1
obj1.setValue('propD', '1d'); //propD is not in Obj1
obj2.setValue('propA', '2a'); //2a null 2c 2d
obj2.setValue('propB', '2b'); //2a 2b 2c 2d
obj2.setValue('propC', '2c'); //2a 2b 2c 2d
obj2.setValue('propD', '2d'); //2a 2b 2c 2d

Try to read how ExtJS developers write their code in the src folders. You will see the correct usages of Ext.extend

var Obj1, var Obj2 will declare varables - reason why I skipped var that I want to declare object ( var obj1 = new Obj1 (Obj1 is var) ???) - reason to separate setValues and whole question is to make sure that seting value will happen in correct method... Try to read a question. — bensiu, Jan 22 '11 at 12:26
Sorry, maybe your question is unclear, that's why the answer might not meet your requirement. — Lionel Chan, Jan 22 '11 at 12:43
@bensiu This might interest you regarding `var` http://stackoverflow.com/questions/1470488/difference-between-using-var-and-not-using-var-in-javascript — Lionel Chan, Jan 22 '11 at 15:23

hellatan · Accepted Answer · 2011-01-20T14:29:37.970

1

try adding this to your if statement:

if ( name in this && this.hasOwnProperty(name) && this[name]) {
   this.fireEvent ( 'Update_on_level_2' );
}

the this[name] i believe is more for IE b/c I have read that it has some problems with hasOwnProperty on its own (this might be a legacy thing though for IE6 and not be much of a problem for the newer versions). the the this[name] is there to make sure your property has a value. If you don't care that the value is false or null, then that portion can be taken out. Also, the hasOwnProperty method excludes properties from the prototype, which sounds like what you are going for.

edit. as per @Pointy's comment below.

edited Jan 20 '11 at 14:29

answered Jan 20 '11 at 13:58

hellatan

3,517
2
29
37

The check for `this[name]` is not for IE weaknesses. It's possible for an object to have a property, but the value of the property might be null. However, the check `this[name]` will be `false` also if the property is not null but equal to numeric zero, the boolean `false` value, or the empty string. Thus it may or may not be desirable here. – Pointy Jan 20 '11 at 14:24
Seems like something to start however: var xxx = new Object_level_2 ( { } ); xxx.setValue ( 'PropA', 345678 ); - fireEvent level_1 xxx.setValue ( 'PropD', 345678 ); - DO NOT fireEvent level_2 ??? – bensiu Jan 20 '11 at 15:31
these lines: `Object_level_1.superclass.initComponent.call ()` should not have the space after `call`. not sure if that has anything to do with this not working. Also, is `this` scoping to the correct object? – hellatan Jan 21 '11 at 01:20

Javascript property exist and scope

2 Answers2