Question

我试图让下面的代码运转起来没有任何运气，我无法看到如何做到这一点的明确解决方案。

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

我的问题是account.update失败，因为this.model不存在。我怀疑子对象得到一个新的this，因此我的问题，但我不知道如何解决它。

我在这里尝试了替代方案：

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
        }
    }
})()

但显然适用同样的规则。

也许值得注意的是我使用Babel将ES6编译为ES5 javascript。

Answer 1

失败，因为this引用（在这种情况下）窗口对象。像这样引用对象本身：

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

我会采取与您的替代解决方案类似的方法。但是，无需将代码包装在IIFE中，ES2015模块是独立的;你不需要IIFE来封装。

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

由于您已经在使用Babel，我还使用了arrow functions和新的shorthand properties来使代码更短/可读。

在Javascript中养育这个

2 个答案: