Prawidłowe podejście do złożonego/zagnieżdżonego tworzenia obiektów JavaScript w innym obiekcie

Question

Poniższy kod ma być krótkim przykładem prostej konstrukcji obiektu wielokrotnego użytku. Jest to bardzo prosty, głęboki obiekt o jednym poziomie, umieść tyle rekwizytów i metod, ile chcesz, i po prostu je przypisz.

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 
} 

Oto przykład takiego zastosowania:

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

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

W tej wyobraźni obiektu, w rzeczywistości nie jest tak proste, jak ja nie używać w moim kodu, to działa jak jest (nie spróbować ten rzeczywisty, ponieważ jest to tylko przykład.)

Ale ta kolejna konfiguracja, która podobnie używa tego samego podejścia, jest nieco błędna.

To jest przykład dla obiektu, który udało mi się iw mgnieniu oka zaimplementować jako obiekt zagnieżdżony, używając dokładnie tego samego podejścia, co obiekt buggy, czego nie rozumiem, dlaczego zastosowali to samo podejście przeglądarka.

//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; 

} 

Ale następny, poniżej, nie jest, jak to brakuje odpowiedniego podejścia do inicjalizacji ownedFefCollCore

Uncaught TypeError: Cannot read property 'HElmTColl' of undefined

// ten jest ważny, że rozpoczęto jako bardzo dobry, dodając go do obiektu poniżej, aż do dodania członka ownedFefCollCore.

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 

Znalazłem następujące podejście w moich badaniach dla mniej podatnych konstrukcji podatnych na błędy, ale nawet ten nie naprawia błędu. I stwierdzono wśród niektórych innych, takich jak ten 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); 
     } 
    } 
}); 

i last but not least, mój oryginalny kod (zaraz po próbie stworzenia go jako bazę/obiektu udostępnionego).

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; 

} 

Answer 1

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

Jeśli zinterpretować Pytanie poprawnie, można spróbować ustawić FeFDivWFldsColl jako funkcja, która zwraca 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())

Answer 2

var cont = "...see console"; 
 
var DivEmptyhtml = document.createElement('div'); 
 
var elmst = document.createElement('style'); 
 
function stringcss(){ 
 
      return ".cssEmptyhtml{ \r\n\tmargin:auto; margin-top:10px; margin-bottom:20px;"+ 
 
      " text-align:center; top:10px;"+ 
 
      " width:40%; padding: 5px; height: 100px; " + 
 
      "background-color:rgb(96,116,243); "+ 
 
      "color: #B5fee8; "+ 
 
      "background-image:" + 
 
      " linear-gradient(to right bottom, #2983bC 24%, #284a4b 77%);"+ 
 
      " box-shadow: 8px 10px 50px 20px rgb(55, 55, 55); "+ 
 
      " -webkit-border-radius:10px;border-radius:10px; }"; 
 
    } 
 

 
//elmst.innerHTML = stringcss(); 
 
DivEmptyhtml.innerHTML = cont; 
 
DivEmptyhtml.className = "cssEmptyhtml"; 
 
DivEmptyhtml.attributes["id"] ="DivEmptyhtml"; 
 
$("head").append(elmst); 
 
$("body").append(DivEmptyhtml); 
 
$(elmst).attr("id","elmst"); 
 
//$(".cssEmptyhtml").attr("style",stringcss()); 
 
$(elmst).text(stringcss()); 
 

 
var strS, strF, message; 
 
var indx = 123; 
 
var count = 135; 
 
indx = ++count - 1; 
 
var init = true; 
 
//now me 
 
var programSteps = 0; 
 
var starting = "starting"; 
 

 

 
console.log(starting); 
 

 
function Log(strLine) { 
 

 

 
    var d = new Date, 
 
     DS = d.getSeconds(), 
 
     Dms = d.getMilliseconds().toString(); 
 

 
    console.log("[step#" + (++programSteps) + "] " + DS + "." + Dms.substring(0, 2) + "> " + strLine); 
 

 

 

 
    } 
 
    //...see console 
 

 

 

 
function LogObj(p_type) { 
 
    
 
    function Fnl_t_t() { 
 
     this.obj = "\r\n\t\t"; 
 
    } 
 
    function Fnl_5xt() { 
 
     this.obj = "\r\n\t\t\t\t"; 
 
    } 
 
    var obj = { 
 
    doNewLineBold: function(boolPrint, value, value2, value3, value4) { 
 
     var nlttcopy = this.backnl_t_t.obj; 
 
     this._nl_t_t = lnobj1.backnl_5xt.obj+ "|========> [ " + value; 
 
     this._nl_t_t += value2 != "" ? " " + value2 : ""; 
 
     this._nl_t_t += value3 != "" ? " " + value3 : ""; 
 
     this._nl_t_t += value4 != "" ? " " + value4 : ""; 
 
     this._nl_t_t += " ] <=============|" + nlttcopy; 
 
     if (boolPrint) { 
 
     Log(this._nl_t_t); 
 
     return ""; 
 
     } else return this._nl_t_t; 
 
    }, 
 
    doLineBold: function(boolPrint, value, value2, value3, value4) { 
 
     var nlttcopy = this.backnl_t_t.obj; 
 
     this._nl_t_t = "|========> [ " + value; 
 
     this._nl_t_t += value2 != "" ? " " + value2 : ""; 
 
     this._nl_t_t += value3 != "" ? " " + value3 : ""; 
 
     this._nl_t_t += value4 != "" ? " " + value4 : ""; 
 
     this._nl_t_t += " ] <=============|" + nlttcopy; 
 
     if (boolPrint) { 
 
     Log(this._nl_t_t); 
 
     return ""; 
 
     } else return this._nl_t_t; 
 
    }, 
 
    _type: { 
 
     val: p_type, 
 
     formated: "" 
 
    }, 
 

 
    doformatedHeader: function() { 
 
     var splts = this._type.val.split(' '); 
 
     for (var i = 0; i < splts.length; i++) { 
 
     this._type.formated += splts[i] + this.ErowR; 
 
     } 
 

 
     return "|========> [  " + this._type.formated + 
 
     "  ] <=============|" + this.backnl_5xt.obj; 
 

 
    }, 
 
    doformatedTail: function() { 
 
     return this.backnl_5xt.obj + "|========> [ END_ " + this._type.formated + "_END] <=============|" + this.backnl_t_t.obj; 
 
    }, 
 
    _nl_t_t: function() { 
 
         return "\r\n\t\t"; 
 
      }, 
 
    
 
    backnl_5xt: new Fnl_5xt(), 
 
    
 
    backnl_t_t: new Fnl_t_t(), 
 
    
 
    ErowR: ">", 
 
    nlArowR : new Fnl_5xt().obj + ">" 
 

 
    }; 
 
    return obj; 
 
} 
 

 
var lnobj1 = LogObj("listWcounter1() arr"); //create object #1 
 
var lnobj2 = LogObj("listWcounter2() arr"); //make sure #2 is not a-copy 
 

 
var header1 = lnobj1.doformatedHeader(); 
 
var Tail1 = lnobj1.doformatedTail(); 
 

 
var header2 = lnobj2.doformatedHeader(); 
 
var Tail2 = lnobj2.doformatedTail(); 
 

 
var nlarowR1 = lnobj1.backnl_5xt.obj + lnobj1.ErowR; 
 
var nlarowR2 = lnobj2.backnl_t_t.obj + lnobj2.ErowR; 
 

 
Log(header1 + lnobj1.ErowR + " starting1... " + nlarowR1 + " is init1 ok?, and index1 is Ok? " + indx + Tail1); 
 
Log(header2 + lnobj2.ErowR + " starting2... " + nlarowR1 + " is init2 ok?, and index2 is Ok? " + indx + Tail2); 
 
var newbold = lnobj1.doLineBold(0, "a", "b", "c", "d") + lnobj1.backnl_5xt.obj; 
 
Log("newbold looks Like: " + newbold); 
 
lnobj1.doLineBold(1, "A", "B", "C", "D"); 
 
lnobj1.doNewLineBold(1, "e", "f", "g", "h"); 
 
Log(lnobj1.nlArowR);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>