如何更新依賴于函式中另一個變數的變數？-有解無憂

在下面的示例代碼中，請注意變數的值dependent取決于變數prereq。當函式changePrereq被呼叫時，它會改變的值prereq。如果記錄，則會顯示此更改，但不會反映在的值中dependent。相反，當dependent被放入跨度時，它顯示Some text - undefined.

如何dependent根據的值進行更改prereq？

PS 謝謝大家的建議。對于我自己，我選擇了“ ztcollazo ”的答案作為正確的決定。

“ outis ” - 感謝您的解釋。我一定會注意您的建議并更詳細地研究它們！

var display = document.getElementById('text'),
    prereq,
    message = "Some text - "   prereq;

function updateDisplay() {
    display.innerHTML = message;
    console.log(prereq);
}

function changePrereq() {
    prereq = "I am some text.";
    updateDisplay();
}

<p><span id="text"></span></p>
<button onclick="changePrereq()">Click</button>

uj5u.com熱心網友回復：

問題是什么changeMyText時候更新不更新someText。您需要changeMyText在函式內部定義changeTextFunc，然后someText作為引數傳遞。

例子：

var myText = document.getElementById('text');
var someText1;

var m1 = 1;

function changeTextFunc(someText, m) {
  var changeMyText = "Some text - "   someText;
  if (m > 0) {
    myText.innerHTML = changeMyText;
  } else {
    console.log('m < 0');
  }
}

function changeText() {
  someText1 = "I a'm some text.";
  changeTextFunc(someText1, m1);
}

<div>
  <button onclick="changeText()">Click</button>
  <p id="text"></p>
</div>

uj5u.com熱心網友回復：

將 changeMyText 變數移動到 changeTextFunc 函式中。代碼看起來像這樣

    function changeMyText(m){
          var changeMyText = "Some text - "   someText1;
          if (m > 0) {
             myText.innerHTML = changeMyText;
          } else {
             console.log('m < 0');
          }
    }

uj5u.com熱心網友回復：

如果您希望一個變數基于另一個變數進行更改，則必須在另一個變數更改后設定其值。有不同的方法，有不同的實作。您可以將其分解為更改的不同方面：

什么：
1. 全域變數（注意：避免在生產中使用全域變數，并在其他背景關系中謹慎使用）
2. 當地人
3. 物件
  1. 簡單的方法
  2. getter / setter 方法
在哪里：
1. 行內，在站點上參考一個變數
2. 在為職責創建的單獨函式中
什么時候：
1. 先決條件變數已更改
2. 使用因變數

以上來自不同方面的一些選項不打算組合，或者不能組合。例如，1.3（物件）旨在與 2.2（單獨的函式）一起使用，而 1.3.2（getter/setter）需要 2.2，因為物件 getter 和 setter 是函式（2.2 基本上意味著“使用 getter 或 setter”，盡管不一定使用 getter/setter 語法）。您也許可以考慮其他方面，或上述方面的其他可能性。

ztcollazo 展示了一個解決方案，該解決方案使用全域作為先決條件 (1.1)，使用本地作為依賴項 (1.2)，并在使用依賴項 (3.2) 時更新行內 (2.1)。如果changeTextFunc設定changeMyText中的行改為移動到changeText（并使用全域），您將擁有 1.1 2.1 3.1。

有關更多示例實作，請檢查以下內容。它說明了上述四種不同的選項，并由評論指出。

var display = document.getElementById('output'),
    dependent, prereq;

/* options 1.1, 2.2, 3.1: global, separate function, prereq change */
function setPrereq(value) {
    prereq = value;
    dependent = "global prereq setter: "   prereq;
}

function updateDisplayFromVariable() {
    display.innerText = dependent;
}

function changePrereq_updateWhenSet(value="setter") {
    setPrereq(value);
    updateDisplayFromVariable();
}

/* options 1.1, 2.2, 3.2: global, separate function, dependent used */
function getDependent(value) {
    return dependent = "global dependent getter: "   prereq;
}

function updateDisplayFromGetter() {
    display.innerText = getDependent();
}

function changePrereq_updateWhenUsed(value="inline, no setter") {
    prereq = value;
    updateDisplayFromGetter();
}

/* options 1.3.2, 2.2: (local) object getter/setter */
/* wrapped in self-called function to prevent polluting global namespace */
var dependency = (function () {
    let display = document.getElementById('output'),

        /* options 1.3.2, 2.2, 3.2: (local) object getter, dependent used */
        inGetter = {
            prereq: 'initial',
            /* note: `dependent` is entirely synthetic */
            get dependent() {
                return "object's dependent getter: "   this.prereq;
            },
        },

        /* options 1.3.2, 2.2, 3.1: (local) object setter, prereq changed */
        inSetter = {
            /* note: when using setter, can't use same name for the 
             * backing property; instead, must also define getter. */
            _prereq: 'initial',
            get prereq() {
                return this._prereq;
            },
            set prereq(value) {
                this._prereq = value;
                this.dependent = "object's prereq setter: "   value;
            },
        };

    function updateDisplay(from) {
        display.innerText = from.dependent;
    }
    
    /* expose 1.3.2, 2.2, 3.1 */
    function whenSet(value) {
        inSetter.prereq = value;
        updateDisplay(inSetter);
    }
    
    /* expose 1.3.2, 2.2, 3.2 */
    function whenUsed(value) {
        inGetter.prereq = value;
        updateDisplay(inGetter);
    }

    return {whenSet, whenUsed};
})();

<button onclick="changePrereq_updateWhenSet('thimbles')">Use global setter</button>
<button onclick="changePrereq_updateWhenUsed('care')">Use global getter</button>
<button onclick="dependency.whenSet('forks')">Use object setter</button>
<button onclick="dependency.whenUsed('hope')">Use object getter</button>
<p><span id="output"></span></p>

與任何設計一樣，上述方法各有利弊，但應首選使用物件設定器/獲取器 (1.3.2)，因為它是最穩健的方法。使用獨立函式（不是 getter/setter）和更新行內函式都比較脆弱，因為程式員可能無法在某處使用它們，而是直接分配和參考變數。更新行內也不太可維護，因為必須對執行更新的每一行進行任何更改。全域變數有其自身的問題，例如：

模塊中有限的代碼重用（注意updateDisplay(from)兩種不同情況下的作業方式，而changePrereq_updateWhenSet每種情況changePrereq_updateWhenUsed都需要不同的顯示功能），以及
不靈活（即為新行為組合現有函式受到更多限制；換句話說，這限制了客戶端代碼的代碼重用），
當不同的模塊使用相同的全域變數時命名沖突，導致它們相互踩踏。

至于是在先決條件的 setter (1.3.2 2.2 3.1) 中更新依賴項還是為沒有支持屬性的依賴項使用 getter（在某些圈子中，這被稱為“綜合屬性”）取決于其他要求（基本上，是否允許為依賴項分配獨立于先決條件的值）。例如，您可以對這兩個屬性使用 getter 和 setter。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/473837.html

標籤：javascript 功能变量

上一篇：從Unix檔案的第6行中提取雙引號之間的字串并將其分配給變數

下一篇：Python：無法使用for回圈獲取變數的子集