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

Question

以下代码旨在作为可重用对象的简单构造的简短示例。这是一个非常简单的单层深度对象，放置任意多的属性和方法，然后分配它们。

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 设置为返回 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())