Pengenalan kepada Pengisytiharan Pembolehubah JS

Menulis panduan ini untuk oleh bapa yang sedang membina alis4ops.com.

• Saya merujuk sebagai "Baba".
• Beliau sedang belajar membina aplikasi web, dahulunya seorang Jurutera Elektrik.
• Akan meninggalkan beberapa nota di sekeliling artikel yang merujuk kepadanya, jadi sesiapa di interwebz yang membaca ini boleh mengabaikan baris tersebut. Harap anda semua tidak kisah!

Konteks

Kami mempunyai fungsi berikut:

• mengendalikanStartTouch
• mengendalikanMoveTouch

Baba ditakrifkan dalam DragDrop.js

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
    }
}

Perhatikan bahawa kami sedang mengakses draggedElement dalam talian:

• jika (dragElement) {

hanldeMoveTouch tidak menimbulkan ralat apabila ia dipanggil.

Meletakkan titik putus pada if (draggedElement) dalam Chrome DevTools akan menunjukkan bahawa draggedElement menyelesaikan kepada elemen html yang sama yang disediakan oleh event.target dalam handleStartTouch

Isu

Mengapa kita boleh mengakses draggedElement dalam handleMoveTouch walaupun melaluinya ditakrifkan dalam handleStartTouch

Secara umum, mengapa kita boleh mengakses pembolehubah yang ditakrifkan dalam fungsi dalam fungsi lain dalam javascript?

Penjelasan

Lihat pada fungsi handleStartTouch:

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

Khususnya baris:

    draggedElement = event.target;

Ia tidak mengisytiharkan nama pembolehubah dragElement menggunakan salah satu daripada kata kunci

• konst
• biar
• var

Sebagai contoh, kami tidak mentakrifkannya seperti itu:

    const draggedElement = event.target;

Pengisytiharan Pembolehubah (a.k.a Kata Kunci)

Dalam Javascript, apabila kita tidak menggunakan pengisytiharan pembolehubah (juga dipanggil kata kunci), javascript menganggap pembolehubah itu sebagai pembolehubah global.

Bersenam

Pertimbangkan contoh berikut di mana kita mentakrifkan dua fungsi:

// 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")
  }
}

Buka DevTools dalam Chrome

• navigasi ke "Konsol"
• Salin dan tampal kod di atas
• Tekan enter
• Ia akan kembali tidak ditentukan, tidak mengapa.

Dalam konsol, panggil add(1,1)

• anda akan melihat konsol kembali 2

add(1,1)
=> 2

Kemudian panggil printStatus

• Anda akan melihat Jumlah output: 2

Kita dapat melihat bahawa printStatus() boleh mengakses jumlah pembolehubah yang ditakrifkan dalam add(x, y)

Ini kerana jumlah pembolehubah sedang diisytiharkan tanpa kata kunci berikut:

• jumlah = x + y

Sekarang mari tukar tambah(x, y) tambah untuk menggunakan perisytiharan pembolehubah untuk jumlah

// 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")
  }
}

• Pergi ke Chrome
• Muat semula halaman dengan Ctrl + R
  • anda juga boleh membuka tab baharu dan membuka konsol devtools sekali lagi.

Mari kita tentukan fungsi dalam log konsol sekali lagi.

• Salin dan tampal coretan kod di atas ke dalam konsol dan tekan enter.

Kami perlu mentakrifkannya semula kerana kami memulakan konsol dev baharu.

Sekarang dalam konsol, panggil add(2, 2)

• anda akan melihat konsol mengembalikan 4

Panggil printStatus untuk melihat sama ada boleh mengakses jumlah pembolehubah yang ditakrifkan dalam add(x, y)

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

Ralat mengatakan jumlah tidak ditentukan

Ini mengesahkan bahawa apabila pembolehubah ditakrifkan dengan perisytiharan pembolehubah (const, let, var) dalam fungsi, skop pembolehubah itu hanya dalam fungsi

Apabila pembolehubah ditakrifkan tanpa perisytiharan pembolehubah dalam fungsi, skop pembolehubah itu adalah global.

Semoga ini membantu Baba (dan sesiapa sahaja yang membaca ini.)

Atas ialah kandungan terperinci Pengenalan kepada Pengisytiharan Pembolehubah JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!