」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > JS 變數宣告簡介

JS 變數宣告簡介

發佈於2024-11-08
瀏覽:536

為正在建造 alis4ops.com 的父親撰寫本指南。

  • 我稱之為「巴巴」。
  • 他正在學習建立 Web 應用程序,以前是一名電氣工程師。
  • 將在提到他的文章周圍留下一些註釋,因此 interwebz 上閱讀本文的任何人都可以忽略這些行。希望大家不要介意!

情境

我們有以下功能:

  • handleStartTouch
  • handleMoveTouch

DragDrop.js 中定義的 Baba

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

function handleMoveTouch(event) {
    event.preventDefault()
    if (draggedElement) {
        const touch = event.touches[0];
        // ..more code
    }
}

注意我們正在在線訪問draggedElement:

  • if (draggedElement) {

hanldeMoveTouch 呼叫時不會引發錯誤。

在 Chrome DevTools 中的 if (draggedElement) 上放置斷點將顯示dragedElement解析為handleStartTouch中的event.target提供的相同html元素

問題

為何在handleStartTouch定義了draggedElement,卻可以在handleMoveTouch中存取draggedElement

更一般地說,為什麼我們可以在javascript中的另一個函數中存取在一個函數中定義的變數?


解釋

看handleStartTouch函數:

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

具體行:

    draggedElement = event.target;

它不使用任一關鍵字宣告變數名稱dragedElement

  • 常數
  • 變數

例如,我們不是這樣定義它的:

    const draggedElement = event.target;

變數聲明(又稱關鍵字)

在Javascript中,當我們不使用變數宣告(也稱為關鍵字)時,javascript認為該變數是全域變數.


鍛鍊

考慮以下範例,其中我們定義了兩個函數:

// Takes in two arguments and returns the sum
function add(x, y) {
  sum = x   y
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}

在 Chrome 中開啟 DevTools

  • 導覽至「控制台」
  • 複製並貼上上面的程式碼
  • 按回車鍵
  • 它將返回未定義,沒關係。

Intro to JS Variable Declarations

在控制台中呼叫add(1,1)

  • 你會看到控制台回傳2
add(1,1)
=> 2

Intro to JS Variable Declarations

然後呼叫 printStatus

  • 您將看到輸出 Sum: 2

Intro to JS Variable Declarations

我們可以看到printStatus()可以存取add(x, y)中定義的變數sum

這是因為變數 sum 是在沒有以下關鍵字的情況下聲明的:

  • 總和 = x y

現在讓我們更改 add(x, y) add 以使用 sum
的變數聲明

// Takes in two arguments and returns the sum
function add(x, y) {
  const sum = x   y // use the variable declartion const
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}
  • 前往 Chrome
  • 使用 Ctrl R 重新整理頁面
    • 您也可以開啟一個新分頁並再次開啟 devtools 控制台。

我們再定義一下控制台日誌中的函數。

  • 將上面的程式碼片段複製並貼上到控制台中,然後按 Enter。

我們需要重新定義它,因為我們啟動了一個新的開發控制台。

Intro to JS Variable Declarations

現在在控制台中,呼叫 add(2, 2)

  • 你會看到控制台返回4

Intro to JS Variable Declarations

呼叫printStatus查看是否可以存取add(x, y)中定義的變數sum

printStatus()
> Uncaught ReferenceError: sum is not defined
    at printStatus (:9:3)
    at :1:1

Intro to JS Variable Declarations

錯誤提示 sum 未定義

這證實了當函數內使用變數宣告(const、let、var)定義變數時,該變數的作用域僅在函數內

當定義變數時而沒有函數內的變數聲明,該變數的作用域是全域的。

希望這對巴巴(以及其他讀到這篇文章的人有幫助。)

版本聲明 本文轉載於:https://dev.to/nerdherd/variable-declartions-14lg?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3