Переменная не обновляется в конце цепочки функций

Question

function newBusRoute() {
    busRoute += 1;
    routeName = "Bus Route " + busRoute;
    routeArrayBusRoutes.push(routeName);
    vehArrayBusRoutes.push(0);
    updateRoutes(routeArrayBusRoutes, vehArrayBusRoutes, "busRoutesListDiv", 600, "maintBus", maintBus, 99, 50, "vehCountBus");
}

function updateRoutes(routeArray, vehArray, listid, cost, maintType, maintCost, eivPlus, capacityPlus, vehCountType) {
    document.getElementById(listid).innerHTML = "";
    for (I in routeArray) {
        document.getElementById(listid).innerHTML += ("<button onclick='editRoute(\""+I+"\", \""+vehArray[I]+"\", \""+vehArray+"\", \""+cost+"\", \""+maintType+"\", \""+maintCost+"\", \""+eivPlus+"\", \""+capacityPlus+"\", \""+vehCountType+"\")'>"+routeArray[I]+"</button>");
    }
}

function editRoute(route, vehCount, vehArray, cost, maintType, maintCost, eivPlus, capacityPlus, vehCountType) {
    $("#mainContainer").fadeOut();
    document.getElementById("screen").innerHTML = (
        "<h1>Bus Route "+route+"</h1>" +
        "<p id='routeVehCount'>Vehicles on this route: "+vehCount +
        "<p><button onclick='addVeh(\""+route+"\", \""+vehArray+"\", \""+cost+"\", \""+maintType+"\", \""+maintCost+"\", \""+eivPlus+"\", \""+capacityPlus+"\", \""+vehCountType+"\")'>+ Add Vehicle | Cost: £600 | Maintenance: £50 per day</button>"
    );
    $("#screen").fadeIn();
    $("#closeButton").fadeIn();
}

function addVeh(route, vehArray, cost, maintType, maintCost, eivPlus, capacityPlus, vehCountType) {
    vehArray[route] += 1;
    vehCountType += 1;
    bank -= cost;
    checkBank;
    maintCost = Number(maintCost);
    maintType += maintCost;
    checkIncome();
    eiv = Number(eiv);
    eiv += Number(eivPlus);
    checkEIV();
    capacity = Number(capacity);
    capacity += capacityPlus;
    checkCapacity();
}

Привет, я написал эти функции. Я знаю, что они выглядят грязно, но по существу все переменные передаются по функциям от updateRoutes() до addVeh(). Все они работают нормально, кроме "vehCountBus", который передается как vehCountType. Не выдается никаких ошибок, оно просто не обновляется, если я вручную не заменю vehCountType в addVeh() на vehCountBus.

Почему значение vehCountType не передается, как другие переменные?

Answer 1

Простой пример вашей проблемы:

function increaseA(a) {
    a += 1;
}
let a = 1;
increaseA(a);
console.log(a); // Still 1, not 2

Проблема в том, что a += 1 в increaseA обновляет параметр a. Это никак не влияет на a переменную , определенную вне increaseA. Когда вы

increaseA(a);

читаете значение из a, тогда значение (не ссылка на переменную a) передается в increaseA.

Если вы хотите, чтобы функция изменила переменную, которая не определена внутри функции, вы можете указать следующие параметры:

1. Сделать так, чтобы она напрямую ссылалась на переменную с помощью закрытие it.
2. Пусть он вернет новое значение, которое вы присвоите переменной (a = increaseA(a)).

Возможно, вам интересно, почему vehArray[route] += 1; работает, учитывая вышеизложенное. Это работает, потому что это изменяет состояние объекта, а не значение переменной / параметра. Если бы вместо этого вы сделали vehArray = [], изменив значение параметра vehArray, это также не оказало бы никакого влияния вне функции.

Вы можете использовать этот факт для рефакторинга вашего кода, чтобы передать объект с именованными свойствами в вашу функцию, затем измените состояние объекта (присваивая новые значения его свойствам). Например:

function increaseA(object) {
    object.a += 1;
}
let object = {
    a: 1
};
increaseA(object);
console.log(object.a); // 2