Javascript：将变量从父函数传递到子函数

我想将许多变量传递给子函数，并且传递的变量也应该传递给下一个子函数。每次将它们作为参数传递都是一项乏味的工作。我想知道用Js做这件事的更好方法是什么。我尝试使用this关键字，但不确定这是否是实现此目的的正确用法

var scriptConfig = {
  availableOptions: {
    version: "1",
    type: "one",
    status: "free",
  },
  availableCategories: {
    navbar: true,
    hasCoupon: true
  }
};

window.addEventListener('load', function() {
  let options = scriptConfig.availableOptions;
  let version = options.version;
  renderDashboard(options, version);
});

function renderDashboard(options, version) {
  createNavbar(options, version);
}

function createNavbar(options, version) {
  console.log(options);
  console.log(version);
}

用这个

var scriptConfig = {
  availableOptions: {
    version: "1",
    type: "one",
    status: "free",
  },
  availableCategories: {
    navbar: true,
    hasCoupon: true
  }
};

window.addEventListener('load', function() {
  this.options = scriptConfig.availableOptions;
  this.version = options.version;
  this.renderDashboard();
});

function renderDashboard() {
  this.createNavbar();
}

function createNavbar() {
  console.log(this.options);
  console.log(this.version);
}

有人能建议哪一种方法更好吗？另外，如果有人建议对上述代码行进行更好的编码实践，那就太好了。

JS中有

[apply（）][1]

函数

---

它允许您在调用函数时指定此是什么，并提供其他参数。

如果您不断地将变量从一个函数传递给它的子函数，或者从一个ui组件传递给它的ui组件，那么在这种情况下，您所做的是在这些实体之间共享上下文（函数、组件或根据其输出类型调用它们）

应该避免使用全局变量，但是在某些用例中，它们是唯一有效的解决方案，全局变量的一个用例是上下文-有些人区分上下文和全局状态，因为上下文是只读的，而全局状态是可变的，为了管理全局状态，javascript有许多库来处理这就像是雷杜

假设您使用的是一个不可变的上下文，那么最好的选择是一个全局变量，显然，您应该将该全局变量隐藏在getter函数后面，以使代码更加简洁

// Assuming you are using javascript modules if not just remove the export keyword
// obviously add the needed properties for the object
const globalContext = Object.freeze({}) // freeze object to prevent mutations to it
export const getGlobalContext = () => {
    // hiding the global variable behind a getter offers two advantages, it better conveys the message that this object should not mutated by code
    // later it enables more customization of context sharing, if for example later you decide to nest contexts, but if your context will get complicated, then doing that through a library should be better option
    return globalContext;
}

---

最后，不要在实例/类上下文之外使用

this

关键字，这将产生不好的代码，难以阅读，并且更容易出错，这也是ES6添加syntactic sugar

class

的原因之一，以使使用该关键字的代码只在那里使用，而不在正常函数中使用（尽管它仍然是有效的语法）在全局范围内（类外）使用

此
不是一个好主意，因为它会污染
窗口
对象。我建议您创建一个类，并像这样包装所有内容：

class Dashboard {
    constructor(config) {
        this.options = config.availableOptions;
        this.version = this.options.version;
    }

    renderDashboard() {
        this.createNavbar();
    }

    createNavbar() {
        console.log(this.options, this.version);
    }
}

var scriptConfig = {
    availableOptions: {
        version: "1",
        type: "one",
        status: "free",
    },
    availableCategories: {
        navbar: true,
        hasCoupon: true
    }
};

window.addEventListener('load', function () {
    const dashboard = new Dashboard(scriptConfig);
    dashboard.renderDashboard();
});

谢谢。但我也希望在其他函数中使用选项和版本变量，而不仅仅是在createNavbar（）中，所以在哪里可以将其声明为全局变量？您可以在构造函数中使用所有变量，也可以在同一类的任何函数中使用。
constructor（config）{this.options=config.availableOptions；this.version=this.options.versions；}
ok，这是打字错误吗-this.config.availableOptions，不应该是this.scriptConfig.availableOptions。您使用了config而不是scriptConfig？不，如果您要检查
构造函数（config）{
然后它以
config
的形式接收参数，我更新了我的评论。更新了我的答案。