How does the array property work in JS object












11














For the following code, why the propB of myObj is updated? And why test.childObj doesn't have the own property propB?






var myObj = { propA: '', propB:  }
var fatherObj = {
childObj: null,
init: function() {
this.childObj = Object.create(myObj);
this.childObj.propA = 'A';
this.childObj.propB.push(2);
}
}

var test = Object.create(fatherObj);
test.init();

console.log(myObj.propB.length);
console.log(test.childObj.hasOwnProperty('propA'));
console.log(test.childObj.hasOwnProperty('propB'));












share|improve this question





























    11














    For the following code, why the propB of myObj is updated? And why test.childObj doesn't have the own property propB?






    var myObj = { propA: '', propB:  }
    var fatherObj = {
    childObj: null,
    init: function() {
    this.childObj = Object.create(myObj);
    this.childObj.propA = 'A';
    this.childObj.propB.push(2);
    }
    }

    var test = Object.create(fatherObj);
    test.init();

    console.log(myObj.propB.length);
    console.log(test.childObj.hasOwnProperty('propA'));
    console.log(test.childObj.hasOwnProperty('propB'));












    share|improve this question



























      11












      11








      11


      1





      For the following code, why the propB of myObj is updated? And why test.childObj doesn't have the own property propB?






      var myObj = { propA: '', propB:  }
      var fatherObj = {
      childObj: null,
      init: function() {
      this.childObj = Object.create(myObj);
      this.childObj.propA = 'A';
      this.childObj.propB.push(2);
      }
      }

      var test = Object.create(fatherObj);
      test.init();

      console.log(myObj.propB.length);
      console.log(test.childObj.hasOwnProperty('propA'));
      console.log(test.childObj.hasOwnProperty('propB'));












      share|improve this question















      For the following code, why the propB of myObj is updated? And why test.childObj doesn't have the own property propB?






      var myObj = { propA: '', propB:  }
      var fatherObj = {
      childObj: null,
      init: function() {
      this.childObj = Object.create(myObj);
      this.childObj.propA = 'A';
      this.childObj.propB.push(2);
      }
      }

      var test = Object.create(fatherObj);
      test.init();

      console.log(myObj.propB.length);
      console.log(test.childObj.hasOwnProperty('propA'));
      console.log(test.childObj.hasOwnProperty('propB'));








      var myObj = { propA: '', propB:  }
      var fatherObj = {
      childObj: null,
      init: function() {
      this.childObj = Object.create(myObj);
      this.childObj.propA = 'A';
      this.childObj.propB.push(2);
      }
      }

      var test = Object.create(fatherObj);
      test.init();

      console.log(myObj.propB.length);
      console.log(test.childObj.hasOwnProperty('propA'));
      console.log(test.childObj.hasOwnProperty('propB'));





      var myObj = { propA: '', propB:  }
      var fatherObj = {
      childObj: null,
      init: function() {
      this.childObj = Object.create(myObj);
      this.childObj.propA = 'A';
      this.childObj.propB.push(2);
      }
      }

      var test = Object.create(fatherObj);
      test.init();

      console.log(myObj.propB.length);
      console.log(test.childObj.hasOwnProperty('propA'));
      console.log(test.childObj.hasOwnProperty('propB'));






      javascript






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 29 at 8:26









      falinsky

      3,35731942




      3,35731942










      asked Nov 29 at 7:57









      Rick

      1277




      1277
























          4 Answers
          4






          active

          oldest

          votes


















          11














          Using Object.create you do not copy an object, but you create a new object that inherits the passed one:



            this.childObj { } ->  myObj { propA: "", propB:  }


          Now when you get a property, it gets looked up in the inheritance chain. As it can't be found in the child object, it gets looked up in myObj. That is usually not a problem, as setting an objects property directly sets it on the object itself without using the inheritance chain, therefore this:



            this.childObj.propA += "test";


          looks up propA on myObj but sets propA on the childObj. With reference types however, you do not rewrite the property, therefore this:



            this.childObj.propB.push(1);


          looks up propB in myObj, and pushes to that, the result is:



           this.childObj { propA: "test" } ->  myObj { propA: "", propB: [1] }


          To resolve that, the childObj has to have its own propB array:



           this.childObj.propB = this.childObj.propB.slice();


          That results in:



           this.childObj { propA: "test", propB: [1] } ->  myObj { propA: "", propB: [1] }


          and now pushing to propB pushes to the array in childObj.






          share|improve this answer































            3














            That is because myObj becomes a prototype of newly created test object (caused by creating it via Object.create.



            Due to you just modify underlying prop propB of childObj (and not assign the new value like for propA) you only modify the prop of prototype. Please read more about inheritance in javascript.






            share|improve this answer





























              2














              By using Object.create(myObj);, myObj becomes the prototype of childObj. If a property is not found in an object and is found in the prototype, the one from the prototype is used. Also note that hasOwnProperty tells if the objects owns the property itself, and will return false if it exists only in the prototype and not in the object. By assigning directly a property on an object, you set it on the object, not on the prototype, but when you modify the property propB with push, the property is not found directly in childObject, so you modify the prototype.



              You have to be careful with that, as all objects created this way will share the same prototype object and by modifying one, you will modify it for all instances.



              You have also to be extra careful because it can be tricky to know in javascript where in the prototype chain your property come from, as myObj also have a prototype.






              var myObj = { propA: '', propB:  }
              var fatherObj = {
              childObj: null,
              init: function() {
              this.childObj = Object.create(myObj);
              this.childObj.propA = 'A';
              this.childObj.propB.push(2);
              }
              }

              var test = Object.create(fatherObj);
              test.init();

              console.log('test: ', test);
              console.log('test prototype: ', test.__proto__);
              console.log('test.childObj: ', test.childObj);
              console.log('test.childObj prototype: ', test.childObj.__proto__);
              console.log(test.childObj.hasOwnProperty('propA'));
              console.log(test.childObj.hasOwnProperty('propB'));








              share|improve this answer































                1














                Javascript inheritance does not work like in most other languages. When using var x = Object.create(someObj), the new object x is actually empty (it has no properties of its own) along with a reference to its prototype: the separate object someObj.



                Any property or function that you then try to access from x which does not resolve there, will be looked up in someObj - or even higher up, if someObj also has a prototype object, etc.



                Things can get confusing when inherited properties are modifiable objects, as in your example. As we have seen, trying to modify the array x.propB by pushing an item to it, will actually modify the inherited array contained in someObj.



                I'm strongly convinced that it is bad style to have modifiable objects (both arrays and regular objects) in prototype objects. Instead, prototype objects should contain only functions and no data, or at least no data beyond simple strings, numbers and booleans which are not modifiable.



                To summarize:




                • Functions are useful to inherit, they are not modifiable (you can't change the function body), and can still be overridden/replaced if needed.

                • Data becomes shared data by all inheritors, unless/until they override it by a re-assignment, which is a burden in itself.






                share|improve this answer























                  Your Answer






                  StackExchange.ifUsing("editor", function () {
                  StackExchange.using("externalEditor", function () {
                  StackExchange.using("snippets", function () {
                  StackExchange.snippets.init();
                  });
                  });
                  }, "code-snippets");

                  StackExchange.ready(function() {
                  var channelOptions = {
                  tags: "".split(" "),
                  id: "1"
                  };
                  initTagRenderer("".split(" "), "".split(" "), channelOptions);

                  StackExchange.using("externalEditor", function() {
                  // Have to fire editor after snippets, if snippets enabled
                  if (StackExchange.settings.snippets.snippetsEnabled) {
                  StackExchange.using("snippets", function() {
                  createEditor();
                  });
                  }
                  else {
                  createEditor();
                  }
                  });

                  function createEditor() {
                  StackExchange.prepareEditor({
                  heartbeatType: 'answer',
                  autoActivateHeartbeat: false,
                  convertImagesToLinks: true,
                  noModals: true,
                  showLowRepImageUploadWarning: true,
                  reputationToPostImages: 10,
                  bindNavPrevention: true,
                  postfix: "",
                  imageUploader: {
                  brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                  contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                  allowUrls: true
                  },
                  onDemand: true,
                  discardSelector: ".discard-answer"
                  ,immediatelyShowMarkdownHelp:true
                  });


                  }
                  });














                  draft saved

                  draft discarded


















                  StackExchange.ready(
                  function () {
                  StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53534256%2fhow-does-the-array-property-work-in-js-object%23new-answer', 'question_page');
                  }
                  );

                  Post as a guest















                  Required, but never shown

























                  4 Answers
                  4






                  active

                  oldest

                  votes








                  4 Answers
                  4






                  active

                  oldest

                  votes









                  active

                  oldest

                  votes






                  active

                  oldest

                  votes









                  11














                  Using Object.create you do not copy an object, but you create a new object that inherits the passed one:



                    this.childObj { } ->  myObj { propA: "", propB:  }


                  Now when you get a property, it gets looked up in the inheritance chain. As it can't be found in the child object, it gets looked up in myObj. That is usually not a problem, as setting an objects property directly sets it on the object itself without using the inheritance chain, therefore this:



                    this.childObj.propA += "test";


                  looks up propA on myObj but sets propA on the childObj. With reference types however, you do not rewrite the property, therefore this:



                    this.childObj.propB.push(1);


                  looks up propB in myObj, and pushes to that, the result is:



                   this.childObj { propA: "test" } ->  myObj { propA: "", propB: [1] }


                  To resolve that, the childObj has to have its own propB array:



                   this.childObj.propB = this.childObj.propB.slice();


                  That results in:



                   this.childObj { propA: "test", propB: [1] } ->  myObj { propA: "", propB: [1] }


                  and now pushing to propB pushes to the array in childObj.






                  share|improve this answer




























                    11














                    Using Object.create you do not copy an object, but you create a new object that inherits the passed one:



                      this.childObj { } ->  myObj { propA: "", propB:  }


                    Now when you get a property, it gets looked up in the inheritance chain. As it can't be found in the child object, it gets looked up in myObj. That is usually not a problem, as setting an objects property directly sets it on the object itself without using the inheritance chain, therefore this:



                      this.childObj.propA += "test";


                    looks up propA on myObj but sets propA on the childObj. With reference types however, you do not rewrite the property, therefore this:



                      this.childObj.propB.push(1);


                    looks up propB in myObj, and pushes to that, the result is:



                     this.childObj { propA: "test" } ->  myObj { propA: "", propB: [1] }


                    To resolve that, the childObj has to have its own propB array:



                     this.childObj.propB = this.childObj.propB.slice();


                    That results in:



                     this.childObj { propA: "test", propB: [1] } ->  myObj { propA: "", propB: [1] }


                    and now pushing to propB pushes to the array in childObj.






                    share|improve this answer


























                      11












                      11








                      11






                      Using Object.create you do not copy an object, but you create a new object that inherits the passed one:



                        this.childObj { } ->  myObj { propA: "", propB:  }


                      Now when you get a property, it gets looked up in the inheritance chain. As it can't be found in the child object, it gets looked up in myObj. That is usually not a problem, as setting an objects property directly sets it on the object itself without using the inheritance chain, therefore this:



                        this.childObj.propA += "test";


                      looks up propA on myObj but sets propA on the childObj. With reference types however, you do not rewrite the property, therefore this:



                        this.childObj.propB.push(1);


                      looks up propB in myObj, and pushes to that, the result is:



                       this.childObj { propA: "test" } ->  myObj { propA: "", propB: [1] }


                      To resolve that, the childObj has to have its own propB array:



                       this.childObj.propB = this.childObj.propB.slice();


                      That results in:



                       this.childObj { propA: "test", propB: [1] } ->  myObj { propA: "", propB: [1] }


                      and now pushing to propB pushes to the array in childObj.






                      share|improve this answer














                      Using Object.create you do not copy an object, but you create a new object that inherits the passed one:



                        this.childObj { } ->  myObj { propA: "", propB:  }


                      Now when you get a property, it gets looked up in the inheritance chain. As it can't be found in the child object, it gets looked up in myObj. That is usually not a problem, as setting an objects property directly sets it on the object itself without using the inheritance chain, therefore this:



                        this.childObj.propA += "test";


                      looks up propA on myObj but sets propA on the childObj. With reference types however, you do not rewrite the property, therefore this:



                        this.childObj.propB.push(1);


                      looks up propB in myObj, and pushes to that, the result is:



                       this.childObj { propA: "test" } ->  myObj { propA: "", propB: [1] }


                      To resolve that, the childObj has to have its own propB array:



                       this.childObj.propB = this.childObj.propB.slice();


                      That results in:



                       this.childObj { propA: "test", propB: [1] } ->  myObj { propA: "", propB: [1] }


                      and now pushing to propB pushes to the array in childObj.







                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      edited Nov 29 at 8:23

























                      answered Nov 29 at 8:14









                      Jonas Wilms

                      54.2k42648




                      54.2k42648

























                          3














                          That is because myObj becomes a prototype of newly created test object (caused by creating it via Object.create.



                          Due to you just modify underlying prop propB of childObj (and not assign the new value like for propA) you only modify the prop of prototype. Please read more about inheritance in javascript.






                          share|improve this answer


























                            3














                            That is because myObj becomes a prototype of newly created test object (caused by creating it via Object.create.



                            Due to you just modify underlying prop propB of childObj (and not assign the new value like for propA) you only modify the prop of prototype. Please read more about inheritance in javascript.






                            share|improve this answer
























                              3












                              3








                              3






                              That is because myObj becomes a prototype of newly created test object (caused by creating it via Object.create.



                              Due to you just modify underlying prop propB of childObj (and not assign the new value like for propA) you only modify the prop of prototype. Please read more about inheritance in javascript.






                              share|improve this answer












                              That is because myObj becomes a prototype of newly created test object (caused by creating it via Object.create.



                              Due to you just modify underlying prop propB of childObj (and not assign the new value like for propA) you only modify the prop of prototype. Please read more about inheritance in javascript.







                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered Nov 29 at 8:10









                              falinsky

                              3,35731942




                              3,35731942























                                  2














                                  By using Object.create(myObj);, myObj becomes the prototype of childObj. If a property is not found in an object and is found in the prototype, the one from the prototype is used. Also note that hasOwnProperty tells if the objects owns the property itself, and will return false if it exists only in the prototype and not in the object. By assigning directly a property on an object, you set it on the object, not on the prototype, but when you modify the property propB with push, the property is not found directly in childObject, so you modify the prototype.



                                  You have to be careful with that, as all objects created this way will share the same prototype object and by modifying one, you will modify it for all instances.



                                  You have also to be extra careful because it can be tricky to know in javascript where in the prototype chain your property come from, as myObj also have a prototype.






                                  var myObj = { propA: '', propB:  }
                                  var fatherObj = {
                                  childObj: null,
                                  init: function() {
                                  this.childObj = Object.create(myObj);
                                  this.childObj.propA = 'A';
                                  this.childObj.propB.push(2);
                                  }
                                  }

                                  var test = Object.create(fatherObj);
                                  test.init();

                                  console.log('test: ', test);
                                  console.log('test prototype: ', test.__proto__);
                                  console.log('test.childObj: ', test.childObj);
                                  console.log('test.childObj prototype: ', test.childObj.__proto__);
                                  console.log(test.childObj.hasOwnProperty('propA'));
                                  console.log(test.childObj.hasOwnProperty('propB'));








                                  share|improve this answer




























                                    2














                                    By using Object.create(myObj);, myObj becomes the prototype of childObj. If a property is not found in an object and is found in the prototype, the one from the prototype is used. Also note that hasOwnProperty tells if the objects owns the property itself, and will return false if it exists only in the prototype and not in the object. By assigning directly a property on an object, you set it on the object, not on the prototype, but when you modify the property propB with push, the property is not found directly in childObject, so you modify the prototype.



                                    You have to be careful with that, as all objects created this way will share the same prototype object and by modifying one, you will modify it for all instances.



                                    You have also to be extra careful because it can be tricky to know in javascript where in the prototype chain your property come from, as myObj also have a prototype.






                                    var myObj = { propA: '', propB:  }
                                    var fatherObj = {
                                    childObj: null,
                                    init: function() {
                                    this.childObj = Object.create(myObj);
                                    this.childObj.propA = 'A';
                                    this.childObj.propB.push(2);
                                    }
                                    }

                                    var test = Object.create(fatherObj);
                                    test.init();

                                    console.log('test: ', test);
                                    console.log('test prototype: ', test.__proto__);
                                    console.log('test.childObj: ', test.childObj);
                                    console.log('test.childObj prototype: ', test.childObj.__proto__);
                                    console.log(test.childObj.hasOwnProperty('propA'));
                                    console.log(test.childObj.hasOwnProperty('propB'));








                                    share|improve this answer


























                                      2












                                      2








                                      2






                                      By using Object.create(myObj);, myObj becomes the prototype of childObj. If a property is not found in an object and is found in the prototype, the one from the prototype is used. Also note that hasOwnProperty tells if the objects owns the property itself, and will return false if it exists only in the prototype and not in the object. By assigning directly a property on an object, you set it on the object, not on the prototype, but when you modify the property propB with push, the property is not found directly in childObject, so you modify the prototype.



                                      You have to be careful with that, as all objects created this way will share the same prototype object and by modifying one, you will modify it for all instances.



                                      You have also to be extra careful because it can be tricky to know in javascript where in the prototype chain your property come from, as myObj also have a prototype.






                                      var myObj = { propA: '', propB:  }
                                      var fatherObj = {
                                      childObj: null,
                                      init: function() {
                                      this.childObj = Object.create(myObj);
                                      this.childObj.propA = 'A';
                                      this.childObj.propB.push(2);
                                      }
                                      }

                                      var test = Object.create(fatherObj);
                                      test.init();

                                      console.log('test: ', test);
                                      console.log('test prototype: ', test.__proto__);
                                      console.log('test.childObj: ', test.childObj);
                                      console.log('test.childObj prototype: ', test.childObj.__proto__);
                                      console.log(test.childObj.hasOwnProperty('propA'));
                                      console.log(test.childObj.hasOwnProperty('propB'));








                                      share|improve this answer














                                      By using Object.create(myObj);, myObj becomes the prototype of childObj. If a property is not found in an object and is found in the prototype, the one from the prototype is used. Also note that hasOwnProperty tells if the objects owns the property itself, and will return false if it exists only in the prototype and not in the object. By assigning directly a property on an object, you set it on the object, not on the prototype, but when you modify the property propB with push, the property is not found directly in childObject, so you modify the prototype.



                                      You have to be careful with that, as all objects created this way will share the same prototype object and by modifying one, you will modify it for all instances.



                                      You have also to be extra careful because it can be tricky to know in javascript where in the prototype chain your property come from, as myObj also have a prototype.






                                      var myObj = { propA: '', propB:  }
                                      var fatherObj = {
                                      childObj: null,
                                      init: function() {
                                      this.childObj = Object.create(myObj);
                                      this.childObj.propA = 'A';
                                      this.childObj.propB.push(2);
                                      }
                                      }

                                      var test = Object.create(fatherObj);
                                      test.init();

                                      console.log('test: ', test);
                                      console.log('test prototype: ', test.__proto__);
                                      console.log('test.childObj: ', test.childObj);
                                      console.log('test.childObj prototype: ', test.childObj.__proto__);
                                      console.log(test.childObj.hasOwnProperty('propA'));
                                      console.log(test.childObj.hasOwnProperty('propB'));








                                      var myObj = { propA: '', propB:  }
                                      var fatherObj = {
                                      childObj: null,
                                      init: function() {
                                      this.childObj = Object.create(myObj);
                                      this.childObj.propA = 'A';
                                      this.childObj.propB.push(2);
                                      }
                                      }

                                      var test = Object.create(fatherObj);
                                      test.init();

                                      console.log('test: ', test);
                                      console.log('test prototype: ', test.__proto__);
                                      console.log('test.childObj: ', test.childObj);
                                      console.log('test.childObj prototype: ', test.childObj.__proto__);
                                      console.log(test.childObj.hasOwnProperty('propA'));
                                      console.log(test.childObj.hasOwnProperty('propB'));





                                      var myObj = { propA: '', propB:  }
                                      var fatherObj = {
                                      childObj: null,
                                      init: function() {
                                      this.childObj = Object.create(myObj);
                                      this.childObj.propA = 'A';
                                      this.childObj.propB.push(2);
                                      }
                                      }

                                      var test = Object.create(fatherObj);
                                      test.init();

                                      console.log('test: ', test);
                                      console.log('test prototype: ', test.__proto__);
                                      console.log('test.childObj: ', test.childObj);
                                      console.log('test.childObj prototype: ', test.childObj.__proto__);
                                      console.log(test.childObj.hasOwnProperty('propA'));
                                      console.log(test.childObj.hasOwnProperty('propB'));






                                      share|improve this answer














                                      share|improve this answer



                                      share|improve this answer








                                      edited Nov 29 at 8:31

























                                      answered Nov 29 at 8:22









                                      Kaddath

                                      2,3571316




                                      2,3571316























                                          1














                                          Javascript inheritance does not work like in most other languages. When using var x = Object.create(someObj), the new object x is actually empty (it has no properties of its own) along with a reference to its prototype: the separate object someObj.



                                          Any property or function that you then try to access from x which does not resolve there, will be looked up in someObj - or even higher up, if someObj also has a prototype object, etc.



                                          Things can get confusing when inherited properties are modifiable objects, as in your example. As we have seen, trying to modify the array x.propB by pushing an item to it, will actually modify the inherited array contained in someObj.



                                          I'm strongly convinced that it is bad style to have modifiable objects (both arrays and regular objects) in prototype objects. Instead, prototype objects should contain only functions and no data, or at least no data beyond simple strings, numbers and booleans which are not modifiable.



                                          To summarize:




                                          • Functions are useful to inherit, they are not modifiable (you can't change the function body), and can still be overridden/replaced if needed.

                                          • Data becomes shared data by all inheritors, unless/until they override it by a re-assignment, which is a burden in itself.






                                          share|improve this answer




























                                            1














                                            Javascript inheritance does not work like in most other languages. When using var x = Object.create(someObj), the new object x is actually empty (it has no properties of its own) along with a reference to its prototype: the separate object someObj.



                                            Any property or function that you then try to access from x which does not resolve there, will be looked up in someObj - or even higher up, if someObj also has a prototype object, etc.



                                            Things can get confusing when inherited properties are modifiable objects, as in your example. As we have seen, trying to modify the array x.propB by pushing an item to it, will actually modify the inherited array contained in someObj.



                                            I'm strongly convinced that it is bad style to have modifiable objects (both arrays and regular objects) in prototype objects. Instead, prototype objects should contain only functions and no data, or at least no data beyond simple strings, numbers and booleans which are not modifiable.



                                            To summarize:




                                            • Functions are useful to inherit, they are not modifiable (you can't change the function body), and can still be overridden/replaced if needed.

                                            • Data becomes shared data by all inheritors, unless/until they override it by a re-assignment, which is a burden in itself.






                                            share|improve this answer


























                                              1












                                              1








                                              1






                                              Javascript inheritance does not work like in most other languages. When using var x = Object.create(someObj), the new object x is actually empty (it has no properties of its own) along with a reference to its prototype: the separate object someObj.



                                              Any property or function that you then try to access from x which does not resolve there, will be looked up in someObj - or even higher up, if someObj also has a prototype object, etc.



                                              Things can get confusing when inherited properties are modifiable objects, as in your example. As we have seen, trying to modify the array x.propB by pushing an item to it, will actually modify the inherited array contained in someObj.



                                              I'm strongly convinced that it is bad style to have modifiable objects (both arrays and regular objects) in prototype objects. Instead, prototype objects should contain only functions and no data, or at least no data beyond simple strings, numbers and booleans which are not modifiable.



                                              To summarize:




                                              • Functions are useful to inherit, they are not modifiable (you can't change the function body), and can still be overridden/replaced if needed.

                                              • Data becomes shared data by all inheritors, unless/until they override it by a re-assignment, which is a burden in itself.






                                              share|improve this answer














                                              Javascript inheritance does not work like in most other languages. When using var x = Object.create(someObj), the new object x is actually empty (it has no properties of its own) along with a reference to its prototype: the separate object someObj.



                                              Any property or function that you then try to access from x which does not resolve there, will be looked up in someObj - or even higher up, if someObj also has a prototype object, etc.



                                              Things can get confusing when inherited properties are modifiable objects, as in your example. As we have seen, trying to modify the array x.propB by pushing an item to it, will actually modify the inherited array contained in someObj.



                                              I'm strongly convinced that it is bad style to have modifiable objects (both arrays and regular objects) in prototype objects. Instead, prototype objects should contain only functions and no data, or at least no data beyond simple strings, numbers and booleans which are not modifiable.



                                              To summarize:




                                              • Functions are useful to inherit, they are not modifiable (you can't change the function body), and can still be overridden/replaced if needed.

                                              • Data becomes shared data by all inheritors, unless/until they override it by a re-assignment, which is a burden in itself.







                                              share|improve this answer














                                              share|improve this answer



                                              share|improve this answer








                                              edited Nov 29 at 8:49

























                                              answered Nov 29 at 8:41









                                              Peter B

                                              12.7k51941




                                              12.7k51941






























                                                  draft saved

                                                  draft discarded




















































                                                  Thanks for contributing an answer to Stack Overflow!


                                                  • Please be sure to answer the question. Provide details and share your research!

                                                  But avoid



                                                  • Asking for help, clarification, or responding to other answers.

                                                  • Making statements based on opinion; back them up with references or personal experience.


                                                  To learn more, see our tips on writing great answers.





                                                  Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                                                  Please pay close attention to the following guidance:


                                                  • Please be sure to answer the question. Provide details and share your research!

                                                  But avoid



                                                  • Asking for help, clarification, or responding to other answers.

                                                  • Making statements based on opinion; back them up with references or personal experience.


                                                  To learn more, see our tips on writing great answers.




                                                  draft saved


                                                  draft discarded














                                                  StackExchange.ready(
                                                  function () {
                                                  StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53534256%2fhow-does-the-array-property-work-in-js-object%23new-answer', 'question_page');
                                                  }
                                                  );

                                                  Post as a guest















                                                  Required, but never shown





















































                                                  Required, but never shown














                                                  Required, but never shown












                                                  Required, but never shown







                                                  Required, but never shown

































                                                  Required, but never shown














                                                  Required, but never shown












                                                  Required, but never shown







                                                  Required, but never shown







                                                  Popular posts from this blog

                                                  Wiesbaden

                                                  Marschland

                                                  Dieringhausen