I tried to modify a variable in a constructor using a prototype function but I got unexpected results

Question

I thought I understood the constructors and prototypes in javascript until I wrote this code and got unexpected results...

function Person() {
    var age = 18;
    Person.prototype.getAge = function() {
      return age;
    };
    Person.prototype.setAge = function(value) {
      age = value;
    }
    this.getAge1 = function() {
      return age;
    };
    this.setAge1 = function(value) {
      age = value;
    }
  };

  var marry = new Person();
  var jack = new Person();
  console.log(marry.getAge()); //output 18
  console.log(jack.getAge()); //output 18
  console.log(marry.getAge1()); //output 18
  console.log(jack.getAge1()); //output 18

  marry = new Person();
  jack = new Person();
  marry.setAge(22);
  console.log(marry.getAge()); //output 22
  console.log(jack.getAge()); //output 22
  console.log(marry.getAge1()); //output 18
  console.log(jack.getAge1()); //output 22

  marry = new Person();
  jack = new Person();
  jack.setAge(22);
  console.log(marry.getAge()); //output 22
  console.log(jack.getAge()); //output 22
  console.log(marry.getAge1()); //output 18
  console.log(jack.getAge1()); //outputv 22

  marry = new Person();
  jack = new Person();
  marry.setAge1(22);
  console.log(marry.getAge()); //output 18
  console.log(jack.getAge()); //output 18
  console.log(marry.getAge1()); //output 22
  console.log(jack.getAge1()); //output 18

  marry = new Person();
  jack = new Person();
  jack.setAge1(22);
  console.log(marry.getAge()); //output 22
  console.log(jack.getAge()); //output 22
  console.log(marry.getAge1()); //output 18
  console.log(jack.getAge1()); //output 22

why I get same outputs after calling marry.setAge(22) and jack.setAge(22)?

why I get different outputs after calling marry.setAge1(22) and jack.setAge(22)?

Is the variable age Shared by the objects(jack and marry)?

Answer 1

• Person.prototype.getAge is only a single function to which same variable age
• is available in the both objects because of Closure
  this.getAge1 is a separate for each object. So that it doesnot change the private property i.e age of other object.

When you use Person.prototype.getAge = funct.... It updates the getAge(). method. for both objects.

But when you assign this.get/setAge1 a new value it doesnot change the getAge1() of other object.

Answer 2

The problem seems more about closure, not prototypes.

As the prototype method is common to all objects, and your prototype method setAge is updating the closure age.

now every time you create an object it creates a new closure for it, so your prototype will refer to the last closure created.

check below example no matter for which object you set the value for it will always update for the last one.

That's why it's not a good idea to use a prototype inside the function in most cases.

refer Setting javascript prototype function within object class declaration for more info.

function Person() {
 var age = 18;
 Person.prototype.getAge = function() {
  return age;
 };
 Person.prototype.setAge = function(value) {
  age = value;
 }
 this.getAge1 = function() {
  return age;
 };
 this.setAge1 = function(value) {
  age = value;
 }
};

marry = new Person();
jack = new Person();
marry.setAge(22);
console.log(marry.getAge()); //output 22
console.log(jack.getAge()); //output 22
console.log(marry.getAge1()); //output 18
console.log(jack.getAge1()); //output 22
console.log("---------------------------------------------")
jack = new Person();
marry = new Person();
marry.setAge(22);
console.log(marry.getAge()); //output 22
console.log(jack.getAge()); //output 22
console.log(marry.getAge1()); //output 22
console.log(jack.getAge1()); //output 18