Javascript Inheritance - Using object create

Question

So I'm experimenting with Object.create(), Ecmascript 5!

I need to understand something and therefore I see no better place than this.

Question is why is Family #2 changing the Family #1 object?!

Code

window.onload = function() {
     init();
}

function Family(surName) {
  this.surName = surName;
  this.meowMachine = 0;
  this.NameHistory = new Array();
  this.NameHistory[0] = surName;
}

function MakeFamily(familyToInherit, NewSurName, xMeows) {
  var newFam = Object.create(familyToInherit);
  newFam.surName = NewSurName;
  newFam.meowMachine += xMeows;
  newFam.NameHistory[0] = NewSurName;
  return newFam;
}

Family.prototype.myNameIs = function () {
  console.log('Family surname is: ' + this.surName);
}

Family.prototype.myHistoryIs = function() {

   for(var i = 0; i < this.NameHistory.length; i++)
   {
       console.log(this.NameHistory[i]);
   }    
} 

Family.prototype.XamountOfCats= function () {
  console.log('Familjen:' + this.surName + 
      ' Has a total number of cats: ' + this.meowMachine);
}

Family.prototype.ChangeSureName = function(surName) {
  this.NameHistory.push(surName);
  this.surName = surName;
}


function init() {
  //Instantiate Family #1 based on family base object
  var myFam1 = new Family("1# Family the:  Smiths");
  //Instantiate Family #2 based on Family #1 object
  var myFam2 = MakeFamily(myFam1,"2# Family the: Johnsons",2)
  //change the surName of Family #2
  myFam2.ChangeSureName("2# Family the: Simpsons");
  //Instantiate Family  #3 based on family base object
  var myFam3 = new Family("3# Family the: Akbars");
  console.log("------- Family #1 History -------");
  myFam1.myHistoryIs();
  console.log("------- Family #2 History -------");
  myFam2.myHistoryIs();
  console.log("------- Family #3 History -------");
  myFam3.myHistoryIs();
}

Console --> OUTPUT

------- Family #1 History ------- 
2# Family the: Johnsons 
2# Family the: Simpsons 
------- Family #2 History ------- 
2# Family the: Johnsons 
2# Family the: Simpsons 
------- Family #3 History ------- 
3# Family the: Akbars

The way I want it to behave

    ------- Family #1 History ------- 
    1# Family the:  Smiths
    ------- Family #2 History ------- 
    2# Family the: Johnsons 
    2# Family the: Simpsons 
    ------- Family #3 History ------- 
    3# Family the: Akbars

It seems quite odd to add the Object.create mechanism on top of the function constructor one. Why not use Object.create even for the original Family? — Scott Sauyet
– Scott Sauyet, Commented Apr 25, 2014 at 19:40
@ScottSauyet Good Point! I was going there but everything halted on my little question here, that's really the next step. I should have been the first I know thanks for pointing it out! — 8bitcat
– 8bitcat, Commented Apr 25, 2014 at 19:42

Oriol · Accepted Answer · 2014-04-25 19:32:52Z

3

In MakeFamily, you must use

newFam.NameHistory = [NewSurName];

instead of

newFam.NameHistory[0] = NewSurName;

If not, you are modifying familyToInherit's NameHistory.

answered Apr 25, 2014 at 19:32

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

8bitcat Over a year ago

it works! But could you take some time to explain why? I can't see how I'm interacting with my old object sine newFam is its own object? Am I instansiating a new Array by doing [NewSurName]? If so I can understand why :) anyway thanks for the answer I'm, accepting it!

Scott Sauyet Over a year ago

The syntax var x = [] is a simpler syntax than var x = new Array(), but does much the same thing.

Oriol Over a year ago

@8bitcat Yes. Using newFam.NameHistory[0], since there is no own NameHistory, you overwrite the inherited one. Instead, you must create an own NameHistory array, either using newFam.NameHistory = [NewSurName] or newFam.NameHistory = new Array(); newFam.NameHistory[0] = NewSurName

Collectives™ on Stack Overflow

Javascript Inheritance - Using object create

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related