在另一个对象中创建复杂/嵌套 JavaScript 对象的正确方法

Question

以下代码旨在作为可重用对象的简单构造的简短示例。这是一个很简单的，一级深度的对象，props和methods你想放多少就放多少，赋值就可以了。

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 
}

这是一个使用示例：

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

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

由于这个富有想象力的对象，实际上并不像我在代码中使用的那么简单，它确实可以正常工作（没有尝试这个实际的对象，因为它只是一个例子。）

但是同样使用相同方法的下一个设置有些问题。

这是一个对象的例子，我已经成功地在眨眼间实现了一个嵌套对象，使用与错误对象完全相同的方法，我不明白为什么他们应用了不同的方法通过浏览器。

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

}

但是下面的下一个没有，因为它缺少初始化 ownedFefCollCore

的正确方法

Uncaught TypeError: Cannot read property 'HElmTColl' of undefined

//这是一个重要的，开始作为一个非常好的，将它添加到下面的对象，直到我添加了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

我在我的研究中发现了以下方法，用于不易出错的结构，但即使是这种方法也不能纠正错误。它被发现在其他一些人中，例如 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);
        }
    }
});

最后但同样重要的是，我的原始代码（在尝试将其创建为基础/共享对象之后）。

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,

如果正确解释问题，您可以尝试将 FeFDivWFldsColl 设置为 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())

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>

在另一个对象中创建复杂/嵌套 JavaScript 对象的正确方法

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

javascript

oop

objectinstantiation