Parenting dies in Javascript

Question

Ich versuche, den folgenden Code ohne Erfolg arbeitet zu machen, und ich kann nicht eine klare Lösung sehen, wie es zu tun.

export default { 
    model: null, 
    set: function (data) { 
     this.model = data 
    }, 
    account: { 
     update: function (data) { 
      this.model.account = data 
     } 
    } 
} 

Mein Problem hier ist, dass account.update schlägt fehl, da this.model nicht existiert. Ich vermute, dass das Unterobjekt eine neue this bekommt, daher mein Problem, aber ich weiß nicht, wie ich es beheben soll.

versuchte ich die Alternative hier:

export default (function() { 
    let model = null 
    function set (data) { 
     this.model = data // I also tried without the `this.` but without any luck too 
    }, 

    function updateAccount(data) { 
     this.model.account = data 
    } 

    return { 
     'model': model, 
     'set': set, 
     'account': { 
      'update': updateAccount 
     } 
    } 
})() 

Aber anscheinend die gleiche Regel gilt.

Vielleicht lohnt es sich, darauf hingewiesen, dass ich Babel bin mit ES6 zu ES5 Javascript kompilieren nach unten.

Answer 1

Es schlägt fehl, weil this bezieht (in diesem Fall) an das Fenster-Objekt. Verweisen Sie auf das Objekt selbst wie folgt aus:

let myModel = { 
    model: null, 
    set: function (data) { 
     myModel.model = data // reference myModel instead of this 
    }, 
    account: { 
     update: function (data) { 
      myModel.model.account = data // reference myModel instead of this 
     } 
    } 
} 

Answer 2

ich einen Ansatz würde ähnlich wie Ihre alternative Lösung. Es besteht jedoch keine Notwendigkeit, Ihren Code in eine IIFE zu verpacken, ES2015-Module sind in sich abgeschlossen; Sie benötigen keine IIFE für die Kapselung.

let model = null, 
    set = (data) => { 
    model = data; 
    }, 
    updateAccount = (data) => { 
    if (!model) { 
     throw('model not set'); 
    } 
    model.account = data; 
    }; 

export default { 
    model, 
    set, 
    account: { 
     update: updateAccount 
    } 
}; 

Da Sie bereits mit Babel sind, habe ich auch arrow functions und die neuen shorthand properties den Code ein wenig kürzer/lesbar zu machen.