主頁 >  其他 > 如何更新依賴于函式中另一個變數的變數?

如何更新依賴于函式中另一個變數的變數?

2022-05-14 15:06:39 其他

在下面的示例代碼中,請注意變數的值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. 什么:
    1. 全域變數(注意:避免在生產中使用全域變數,并在其他背景關系中謹慎使用)
    2. 當地人
    3. 物件
      1. 簡單的方法
      2. getter / setter 方法
  2. 在哪里:
    1. 行內,在站點上參考一個變數
    2. 在為職責創建的單獨函式中
  3. 什么時候:
    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行中提取雙引號之間的字串并將其分配給變數

下一篇:返回列表

標籤雲
其他(140569) Python(32323) JavaScript(20394) Java(15597) C(13629) 區塊鏈(8222) AI(7469) 基礎類(6313) C#(6256) MySQL(6074) 爪哇(5872) html(5323) 腳本語言(PerlPython)(5129) PHP(4993) 熊猫(4973) 非技術區(4971) sql(4932) Linux(4724) 数组(4493) R(4363) Android(4340) 反应(4001) 数据框(3451) css(3391) C語言(3288) 节点.js(3199) C++語言(3117) Java相關(2746) 疑難問題(2699) json(2665) 列表(2550) 單片機工控(2479) 扑(2458) VBA(2443) 安卓(2430) 打字稿(2314) ASP.NET(2072) 细绳(2048) iOS(2025) Web開發(1951) MongoDB(1874) 字典(1819) 循环(1817) 麻木的(1817) 網絡通信(1793) 蟒蛇-3.x(1774) 數據庫相關(1767) VB基礎類(1755) 正则表达式(1750) 擅长(1741) .NETCore(1731) 镖(1720) 迅速(1702) C++(1653) 開發(1646) Unity3D(1633) 系統維護與使用區(1617) .NET技术(1610) HtmlCss(1594) 基礎和管理(1579)

熱門瀏覽
  • 網閘典型架構簡述

    網閘架構一般分為兩種:三主機的三系統架構網閘和雙主機的2+1架構網閘。 三主機架構分別為內端機、外端機和仲裁機。三機無論從軟體和硬體上均各自獨立。首先從硬體上來看,三機都用各自獨立的主板、記憶體及存盤設備。從軟體上來看,三機有各自獨立的作業系統。這樣能達到完全的三機獨立。對于“2+1”系統,“2”分為 ......

    uj5u.com 2020-09-10 02:00:44 more
  • 如何從xshell上傳檔案到centos linux虛擬機里

    如何從xshell上傳檔案到centos linux虛擬機里及:虛擬機CentOs下執行 yum -y install lrzsz命令,出現錯誤:鏡像無法找到軟體包 前言 一、安裝lrzsz步驟 二、上傳檔案 三、遇到的問題及解決方案 總結 前言 提示:其實很簡單,往虛擬機上安裝一個上傳檔案的工具 ......

    uj5u.com 2020-09-10 02:00:47 more
  • 一、SQLMAP入門

    一、SQLMAP入門 1、判斷是否存在注入 sqlmap.py -u 網址/id=1 id=1不可缺少。當注入點后面的引數大于兩個時。需要加雙引號, sqlmap.py -u "網址/id=1&uid=1" 2、判斷文本中的請求是否存在注入 從文本中加載http請求,SQLMAP可以從一個文本檔案中 ......

    uj5u.com 2020-09-10 02:00:50 more
  • Metasploit 簡單使用教程

    metasploit 簡單使用教程 浩先生, 2020-08-28 16:18:25 分類專欄: kail 網路安全 linux 文章標簽: linux資訊安全 編輯 著作權 metasploit 使用教程 前言 一、Metasploit是什么? 二、準備作業 三、具體步驟 前言 Msfconsole ......

    uj5u.com 2020-09-10 02:00:53 more
  • 游戲逆向之驅動層與用戶層通訊

    驅動層代碼: #pragma once #include <ntifs.h> #define add_code CTL_CODE(FILE_DEVICE_UNKNOWN,0x800,METHOD_BUFFERED,FILE_ANY_ACCESS) /* 更多游戲逆向視頻www.yxfzedu.com ......

    uj5u.com 2020-09-10 02:00:56 more
  • 北斗電力時鐘(北斗授時服務器)讓網路資料更精準

    北斗電力時鐘(北斗授時服務器)讓網路資料更精準 北斗電力時鐘(北斗授時服務器)讓網路資料更精準 京準電子科技官微——ahjzsz 近幾年,資訊技術的得了快速發展,互聯網在逐漸普及,其在人們生活和生產中都得到了廣泛應用,并且取得了不錯的應用效果。計算機網路資訊在電力系統中的應用,一方面使電力系統的運行 ......

    uj5u.com 2020-09-10 02:01:03 more
  • 【CTF】CTFHub 技能樹 彩蛋 writeup

    ?碎碎念 CTFHub:https://www.ctfhub.com/ 筆者入門CTF時時剛開始刷的是bugku的舊平臺,后來才有了CTFHub。 感覺不論是網頁UI設計,還是題目質量,賽事跟蹤,工具軟體都做得很不錯。 而且因為獨到的金幣制度的確讓人有一種想去刷題賺金幣的感覺。 個人還是非常喜歡這個 ......

    uj5u.com 2020-09-10 02:04:05 more
  • 02windows基礎操作

    我學到了一下幾點 Windows系統目錄結構與滲透的作用 常見Windows的服務詳解 Windows埠詳解 常用的Windows注冊表詳解 hacker DOS命令詳解(net user / type /md /rd/ dir /cd /net use copy、批處理 等) 利用dos命令制作 ......

    uj5u.com 2020-09-10 02:04:18 more
  • 03.Linux基礎操作

    我學到了以下幾點 01Linux系統介紹02系統安裝,密碼啊破解03Linux常用命令04LAMP 01LINUX windows: win03 8 12 16 19 配置不繁瑣 Linux:redhat,centos(紅帽社區版),Ubuntu server,suse unix:金融機構,證券,銀 ......

    uj5u.com 2020-09-10 02:04:30 more
  • 05HTML

    01HTML介紹 02頭部標簽講解03基礎標簽講解04表單標簽講解 HTML前段語言 js1.了解代碼2.根據代碼 懂得挖掘漏洞 (POST注入/XSS漏洞上傳)3.黑帽seo 白帽seo 客戶網站被黑帽植入劫持代碼如何處理4.熟悉html表單 <html><head><title>TDK標題,描述 ......

    uj5u.com 2020-09-10 02:04:36 more
最新发布