Why is property unaccessible from the setter defined on prototype

Question

I have this code:

function Test2() {
  this.data = 1;
  this.unaccesible = 7;
}

Object.defineProperty(Test2.prototype, "data", {
  get: function() {
    return this.data;
  },
  set: function(nv) {
    // here this.unaccesible is undefined - why?
    console.log(this.unaccesible);
  }
});

var o = new Test2();
o.data = 2;

Why the property is not available inside the setter?

console.log(this.unaccesible);

Answer 1

Because you define a property on the prototype, not an instance of Test2. this.data is only accessible because you are defining a property data . It's not the same data as the one set in the constructor of Test2.

Answer 2

When the instance of Test2 is created and line 2 is executed, which is this.data = 1 , this is defined and it has prototype which has "data" property but the instance itself doesn't have "data" yet. That's why prototype's data-property setter method is called and it's happening before this.unaccesible = 7 . that is why this.unaccesible is undefined at this point

Answer 3

You need to create a separate Object.defineProperty for each variable. Check out the following fiddle for code example with comments. Hope this answers your query.

JSfiddle example for the problem

OR Check out the same code below

            function Test2() {
              this.data = 1;
              this.unaccesible = 5;
            }

            Object.defineProperty(Test2.prototype, "unaccesible", {
              get: function() {
                return this.data;
              },
              set: function(nv) {
                // here this.unaccesible is undefined - why?
                // You cannot access "unaccesible" directly as the parameter for the
                // setter function is nv.
                var test = nv;
                alert("Unaccessible:" + test);
              }
            });
            // Use object.defineProperty for each variable as follows to set data value
            Object.defineProperty(Test2.prototype, "data", {
              get: function() {
                return this.data;
              },
              set: function(nv) {
                // here this.unaccesible is undefined - why?
                // You cannot access "unaccesible" directly as the parameter for the
                // setter function is nv.
                var test = nv;
                alert("Data:" + test);
              }
            });

            var o = new Test2();
            //This sets the value of unaccesible to 2 after the intial value 5 is stored.
            o.unaccesible = 6;
            //This sets the value of data to 2 after the intial value 1 is stored.
            // This is executed after unaccesible
            o.data = 2;