why does setting `this.property` in a function in a class make a new property but getting `this.property` uses the class property?

Question

I have a class in javascript with a property (is_initialized) and a function (isInitialized).

Class definition :

function Test()
{
    this.is_initialized = { obj: { isInitialized: 'notyet' } };
    this.isInitialized = function( ref )
    {
        if ( !ref.obj )
        {
            console.log( 'now: ' + JSON.stringify( this.is_initialized ) );
/*line 9*/  this.is_initialized.obj.isInitialized = ref.isInitialized.toString();
            console.log( ref );
        }
        else {
            bluetoothle.isInitialized( this.isInitialized );
/*line 14*/ ref.obj = this.is_initialized.obj;
        }
    };
}

bluetoothle.isInitialized is a function in a cordova plugin (no knowledge of cordova is required for answering this question), it returns an object { isInitialized : true/false } and will pass the first if-statement whilst my call to isInitialized() will execute the else.

Question :

Why does this.is_initialized on line 9 create a new property inside the function isInitialized while this.is_initialized on line 14 uses the property is_initialized in Test()?

Shouldn't it both use the property inside Test() or use a (new) variable inside isInitialized()?

And if it 'just' behaves like this, what can i do to deal with it?

Code i ran :

var t = new Test();
var r = {obj:{isInitialized:'nope'}};
t.isInitialized(r);

// console.log( 'now: ' + JSON.stringify( this.is_initialized ) ); on line 8:
// now: {"obj":{"isInitialized":"false"}}

// console.log( ref ); on line 10:
// Object {isInitialized: false}

console.log(JSON.stringify(r));
// {"obj":{"isInitialized":"notyet"}}

console.log(JSON.stringify(t));
// {"is_initialized":{"obj":{"isInitialized":"notyet"}}}

What just happened is this:

• i made a new instance of Test() and named it t.
• i made an object with matching structure of is_initialized in Test() but with a different value.
• i called the function with r as parameter.
• code in the else executes.
• asynchronous function with isInitialized as callback is called.
• the function created a reference between the existing is_initialized and r.
• the async function calls isInitialized and executes the code in the if.
• it logs the current value of this.is_initialized on line 8, somehow it gets this.is_initialized after line 9 is executed.
• line 9 executes, creating a new variable named is_initialized inside isInitialized() while i want it to set is_initialized in Test() and not create a new variable that dies when the function is done executing.
• it logs the object that was put into this.is_initialized.obj.isInitialized.
• i log r and see that it contains the initial value of Test.is_initialized.
• i log t and see that is_initialized's value is still initial.

Info :

If you want to test it yourself to answer my question of the why? and the how do i deal with it? but need some code for bluetoothle.isInitialized just use this:

var bluetoothle = {isInitialized:function(){setTimeout(function(){func({isInitialized:false});},20);}};
// to execute:
bluetoothle.isInitialized(/*callbackfunction*/);

I would like to thank you for reading this long question.

Answer 1

You're in a function. Inside a function (unless it's declared as Test.prototype.isInitialized), the scoping rules for 'this' are different. This is one of the gotchas that ES6 aims to eliminate. (If you added "use strict"; at the top of the function most browsers would tell you this.)

Declare var self = this in Test and use self inside your interior function and you should get the result you want. @squint has pretty much already said this.