javascriptoopobjectinstantiation

Proper approach for complex / nested JavaScript-object creation within another object


The following code is meant to be a short example for a simple construct of a reusable object. This is a very simple, one level depth object, put as many props and methods as you like and just assign them.

function someDesiredReusableType(optionally, pass, ctor, pars, here) {
   //core obj to return
  var DesiredTypeCrtor = {
              propSkiingLocation: "canada",
              OrderTickets: function(optionally){
                             var tryRoomWView = optionaly;
                             print(
                                  "Dear " + ctor +", your request for " +
                                  propSkiingLocation + " is now being processed: an " +
                                  tryRoomWView  + " request was notified, we understand you have " + pars + " for cross country transportation, confirmation email will be sent " + here + " as soon as we process your order. }
              } 
      };
 return DesiredTypeCrtor 
}

Here is an example of this use:

 var DesrVacSkC = someDesiredReusableType("could really help!",null, "mr. Bean", "my mini", "Fun@bbc.co.uk") 

//oh..almost forgot
DesrVacSkC.OrderTickets();

As this imaginative object, is actually not as simple as I did use in my code, it does work as is (didn't try this actual one, as it's just an example.)

But this next setup that is similarly using the same approach is buggy somewhat.

This is an example for an object I have successfully and in a blink of an eye implemented as a nested object using the exact same approach as the buggy object, which I do not understand why they Applied the not with same approach by the browser.

//this is an important one, a smart property / value holder I came up with and does work perfectly, as a nested member.

function Rprp(parVal) {
    var cretdprp = {

        propVal: parVal,
        propValAsint: parseInt(parVal)

    };
    return cretdprp;

}

But the next one, here below, does not, as it lacks the proper approach for the initialization of ownedFefCollCore

Uncaught TypeError: Cannot read property 'HElmTColl' of undefined

//this is an important one, that was started as a very good one, with adding it to the object below, up until I have added ownedFefCollCore member.

function CreateFileEditForm_Manager() {
//as i do usually base/inner/creator and a return obj
var Repo = {
    CsDataLocals:
               {

                GetCurLastfileId:Rprp($("#HLocModelData_LastFileId").val())

                 },
    FormFldNames:
                        { JRdrData_FileName: "JRdrData_FileName" },

    //this is my bugg ! with and without new keyword & as function or Object!!
    ownedFefCollCore: new FefCollCore(),

   //and this is the line that chrome get's is anger on --> all day long 
    FeFDivWFldsColl: this.ownedFefCollCore.HElmTColl,
    FeFDivWFlds_IdColl: this.ownedFefCollCore.HElmT_IdColl,
    FeFDivWFldsCollAdd: function (parId, parFefDivWrpDivflds) {
        this.ownedFefCollCore.CollAdd(parId, parFefDivWrpDivflds);
    },
       / ........

     //some more code was removed trying to keep it as short as possible
  }

 //fefa stands for fileRecord Edit Form , core just says nothing, is there to imply the 'thing' is to be shared between variation of instances from the base object

I found the following approach in my research for less error prone constructs, but even this one does not correct the bug. And it was found among some others, such as this Object.create()

var FefCore = JClassProto({
    initialize: function () {
        this.HElmTColl = new Array();//was originally [] ...             
    //i changed because i wanted to eliminate any doubt that it's one of the reasons my code is ... Somewhere undefined , now i know (pretty sure they might be little different but both are ok.) it's not it.
        this.HElmT_IdColl = new Array();
        this.CollAdd = function (parId, parHElmT) {
            this.HElmTColl.push(parHElmT);
            this.HElmT_IdColl.push(parId);
        }
        this.Coll_Remove = function (parHElmT) {
            this.HElmTColl.pop(parHElmT);
        }
        // this is the first move, if a new object(which is an element in the array) about to be created,
        // call this to make sure not exist for i create do
        this.ElmObjCanCreate = function (parId) {
            return this.getIndexOfValuInDivWFldsColl(parId) < 0;
        }
        this.HElmTColl_FindById = function (parId) {
            var collindexofCurFileReadyDivWrpFlds = this.getIndexOfValuInDivWFldsColl(parId);
            return this.HElmTColl[collindexofCurFileReadyDivWrpFlds];
        }

        this.getIndexOfValuInHElmTColl = function (parId) {
            return $.inArray(parId, this.HElmT_IdColl);
        }
    }
});

And last but not least, my original code (right after the attempt to create it as a base /shared object).

function FefCollCore() {
    this.Cr = {
        HElmTColl: new Array(),
        HElmT_IdColl: new Array(),
        CollAdd: function (parId, parHElmT) {
            this.HElmTColl.push(parHElmT);
            this.HElmT_IdColl.push(parId);
        },
        Coll_Remove: function (parHElmT) {
            this.HElmTColl.pop(parHElmT);
        },
        CollNeedCreate: function (parId) {
            return this.getIndexOfValuInDivWFldsColl(parId) < 0;
        },
        HElmTColl_FindById: function (parId) {
            var collindexofCurFileReadyDivWrpFlds = this.getIndexOfValuInDivWFldsColl(parId);
            return this.HElmTColl[collindexofCurFileReadyDivWrpFlds];
        },

        getIndexOfValuInHElmTColl: function (parId) {
            return $.inArray(parId, this.HElmT_IdColl);
        }
    };
    return this.Cr;

}

Solution

  •    //and this is the line that chrome get's is anger on --> all day long 
        FeFDivWFldsColl: this.ownedFefCollCore.HElmTColl,
    

    If interpret Question correctly, you could try to set FeFDivWFldsColl as a function that returns this.ownedFefCollCore.HElmTColl

    var FefCore = function() {
      this.e = new Array();
      this.e.push(2);
    }
    
    function CreateFileEditForm_Manager() {
      var Repo = {
        a: 0,
        b: 1,
        c: new FefCore(),
        // set `FeFDivWFldsColl` value as a function
        d: function() {
          // `this.c` : `new FefCore()` , `this.c.e` : `new Array()`      
          return this.c.e
        }
      };
      return Repo
    }
    
    var Fef = new CreateFileEditForm_Manager();
    console.log(Fef.d())