ອຸຍ, ຂ້ອຍໄດ້ເຮັດມັນອີກຄັ້ງ: ການແກ້ບັນຫາຂໍ້ຜິດພາດທົ່ວໄປໃນ JavaScript

ການຂຽນລະຫັດ JavaScript ສາມາດເປັນສິ່ງທ້າທາຍແລະບາງຄັ້ງກໍ່ຂົ່ມຂູ່ຢ່າງແນ່ນອນ, ຍ້ອນວ່ານັກພັດທະນາຫຼາຍຄົນຄຸ້ນເຄີຍກັບ. ໃນຂະບວນການເຮັດວຽກ, ຂໍ້ຜິດພາດເກີດຂື້ນຢ່າງຫຼີກລ່ຽງ, ແລະບາງສ່ວນຂອງພວກມັນຖືກຊ້ໍາເລື້ອຍໆ. ບົດຄວາມນີ້, ແນໃສ່ນັກພັດທະນາຈົວ, ເວົ້າກ່ຽວກັບຄວາມຜິດພາດເຫຼົ່ານີ້ແລະວິທີການແກ້ໄຂພວກມັນ. ເພື່ອຄວາມຊັດເຈນ, ຊື່ຂອງຫນ້າທີ່, ຄຸນສົມບັດແລະວັດຖຸແມ່ນເອົາມາຈາກ ເພງຍອດນິຍົມ. ທັງຫມົດນີ້ຊ່ວຍໃຫ້ທ່ານຈື່ຈໍາໄດ້ໄວກ່ຽວກັບວິທີການແກ້ໄຂຄວາມຜິດພາດທົ່ວໄປ.

ພວກເຮົາເຕືອນ: ສໍາລັບຜູ້ອ່ານທັງຫມົດຂອງ "Habr" - ສ່ວນຫຼຸດ 10 rubles ເມື່ອລົງທະບຽນໃນຫຼັກສູດ Skillbox ໂດຍໃຊ້ລະຫັດສົ່ງເສີມ "Habr".

Skillbox ແນະນໍາ: ຫຼັກສູດພາກປະຕິບັດ "ຜູ້ພັດທະນາມືຖື PRO".

TypeError: ຄຸນສົມບັດບໍ່ໄດ້ຖືກກໍານົດ

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

ລະຫັດຕົວຢ່າງຂ້າງເທິງນີ້ຖິ້ມຄວາມຜິດພາດ Uncaught TypeError: ບໍ່ສາມາດອ່ານຄຸນສົມບັດ 'ໂຊກດີ' ຂອງ undefined. ບັນຫາແມ່ນວ່າວັດຖຸຂອງເດັກຍິງບໍ່ມີຊັບສິນທີ່ມີຊື່, ເຖິງແມ່ນວ່າມັນມີຊັບສິນຊື່. ແລະນັບຕັ້ງແຕ່ຊັບສິນ girl.named ບໍ່ໄດ້ຖືກກໍານົດ, ທ່ານບໍ່ສາມາດເຂົ້າເຖິງໄດ້, ເພາະວ່າຢ່າງເປັນທາງການມັນບໍ່ມີ. ແຕ່ຖ້າທ່ານປ່ຽນ girl.named.lucky ກັບ girl.name, ຫຼັງຈາກນັ້ນທຸກສິ່ງທຸກຢ່າງຈະເຮັດວຽກແລະໂຄງການຈະກັບຄືນມາ Lucky.

ທ່ານສາມາດຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບຄຸນສົມບັດ ອ່ານທີ່ນີ້.

ວິທີການແກ້ໄຂ TypeErrors

TypeErrors ເກີດຂຶ້ນເມື່ອນັກຂຽນໂປລແກລມພະຍາຍາມປະຕິບັດຂໍ້ມູນທີ່ບໍ່ກົງກັບປະເພດສະເພາະ. ຕົວຢ່າງລວມມີການໃຊ້ .bold(), ການຮ້ອງຂໍຄຸນສົມບັດທີ່ບໍ່ໄດ້ກໍານົດ, ຫຼືການເອີ້ນຟັງຊັນທີ່ຈິງແລ້ວບໍ່ແມ່ນຟັງຊັນ.

ດັ່ງນັ້ນ, ຖ້າທ່ານພະຍາຍາມໂທຫາ girl(), ທ່ານຈະໄດ້ຮັບຄວາມຜິດພາດ Uncaught TypeError: yourVariable.bold ບໍ່ແມ່ນຫນ້າທີ່ແລະເດັກຍິງບໍ່ແມ່ນຫນ້າທີ່, ເພາະວ່າມັນເປັນວັດຖຸທີ່ຖືກເອີ້ນ, ບໍ່ແມ່ນຫນ້າທີ່.

ເພື່ອລົບລ້າງຄວາມຜິດພາດ, ທ່ານຈໍາເປັນຕ້ອງສຶກສາຕົວແປ. ດັ່ງນັ້ນ, ເດັກຍິງແມ່ນຫຍັງ? ສາວ.ຊື່ຫຍັງ? ທ່ານ​ສາ​ມາດ​ຊອກ​ຫາ​ໂດຍ​ການ​ວິ​ເຄາະ​ລະ​ຫັດ​, ສະ​ແດງ​ຕົວ​ແປ​ໂດຍ​ການ​ນໍາ​ໃຊ້ console.log​, ຄໍາ​ສັ່ງ debugger​, ຫຼື​ການ​ເອີ້ນ​ຊື່​ຕົວ​ປ່ຽນ​ແປງ​ໃນ console ໄດ້​. ທ່ານຈໍາເປັນຕ້ອງໃຫ້ແນ່ໃຈວ່າມັນເປັນໄປໄດ້ທີ່ຈະດໍາເນີນການກ່ຽວກັບປະເພດຂໍ້ມູນທີ່ມີຢູ່ໃນຕົວແປ. ຖ້າມັນບໍ່ເຫມາະ, ປ່ຽນແປງມັນ, ຕົວຢ່າງ, ເພີ່ມເງື່ອນໄຂຫຼືພະຍາຍາມ..catch block - ແລະໄດ້ຮັບການຄວບຄຸມການປະຕິບັດການດໍາເນີນການ.

ລົ້ນກອງ

ຖ້າທ່ານເຊື່ອວ່າຜູ້ຂຽນຂອງເນື້ອເພງຂອງເພງ Baby One More Time (ນີ້ແມ່ນ Britney Spears, ແມ່ນແລ້ວ), ຄໍາວ່າຕີໃນສະພາບການນີ້ຫມາຍເຖິງຄວາມປາຖະຫນາຂອງນັກຮ້ອງທີ່ຈະຖືກເອີ້ນອີກເທື່ອຫນຶ່ງ (ນີ້ແມ່ນຄໍາອະທິບາຍກ່ຽວກັບສະພາບການຂອງ. ເພງ - ບັນທຶກຂອງຜູ້ແປ). ມັນດີອາດຈະເປັນຄວາມປາຖະຫນານີ້ຈະນໍາໄປສູ່ການເພີ່ມຂື້ນຂອງຈໍານວນການໂທໃນຊີວິດຈິງ. ແຕ່ໃນການຂຽນໂປລແກລມ, ນີ້ແມ່ນ recursion ທີ່ສາມາດເຮັດໃຫ້ເກີດຄວາມຜິດພາດຖ້າຫາກວ່າ stack ການໂທ overflows.

ຄວາມ​ຜິດ​ພາດ​ເບິ່ງ​ຄື​ນີ້​:

ຜິດພາດ: ພື້ນທີ່ວາງຊ້ອນກັນໝົດ (ຂອບ)
ຄວາມຜິດພາດພາຍໃນ: ເກີດຂຶ້ນຊ້ຳເກີນໄປ (Firefox)
RangeError: ເກີນຂະໜາດ stack call ສູງສຸດ (Chrome)

stack overflow ເກີດຂຶ້ນຖ້າຫາກວ່ານັກພັດທະນາບໍ່ໄດ້ພິຈາລະນາກໍລະນີພື້ນຖານໃນການ recursion, ຫຼືຖ້າຫາກວ່າລະຫັດບໍ່ໄດ້ແກ້ໄຂກໍລະນີທີ່ຕັ້ງໄວ້.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

ໃນກໍລະນີນີ້, StillBelieve ບໍ່ສາມາດເປັນຜິດໄດ້, ດັ່ງນັ້ນ oneMoreTime ຈະຖືກເອີ້ນແຕ່ລະຄັ້ງ, ແຕ່ຟັງຊັນຈະບໍ່ສໍາເລັດ.

ຖ້າເຈົ້າເລີ່ມເພິ່ງພາໝູ່ສອງຄົນ, ນີ້ຈະຫຼຸດຄວາມໂດດດ່ຽວ, ແລະເຈົ້າບໍ່ຈຳເປັນຕ້ອງລໍຖ້າສາຍ.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

ຕົວຢ່າງແມ່ນກໍລະນີທີ່ມີ loops ທີ່ບໍ່ມີຂອບເຂດ, ເມື່ອລະບົບບໍ່ສ້າງຂໍ້ຄວາມສະແດງຂໍ້ຜິດພາດ, ແຕ່ຫນ້າທີ່ລະຫັດ JavaScript ຖືກປະຕິບັດພຽງແຕ່ freezes. ນີ້ເກີດຂຶ້ນຖ້າຫາກວ່າ loop ໃນຂະນະທີ່ບໍ່ມີເງື່ອນໄຂການຢຸດເຊົາ.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

ທ່ານ​ສາ​ມາດ​ແກ້​ໄຂ​ບັນ​ຫາ​ດັ່ງ​ຕໍ່​ໄປ​ນີ້​:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

ການດີບັ໊ກ loops infinite ແລະ recursions

ຖ້າທ່ານມີບັນຫາທີ່ບໍ່ມີຂອບເຂດ, ທ່ານຈໍາເປັນຕ້ອງປິດແຖບໃນ Chrome ຫຼື Edge, ແລະປິດປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບໃນ Firefox. ຫຼັງຈາກນີ້, ທ່ານຈໍາເປັນຕ້ອງວິເຄາະລະຫັດຢ່າງລະມັດລະວັງ. ຖ້າທ່ານບໍ່ສາມາດຊອກຫາບັນຫາໄດ້, ມັນເປັນມູນຄ່າທີ່ຈະເພີ່ມຄໍາສັ່ງ debugger ກັບ loop ຫຼືຫນ້າທີ່ຂອງທ່ານແລະກວດເບິ່ງຄ່າຂອງຕົວແປ. ຖ້າຜົນໄດ້ຮັບບໍ່ກົງກັບສິ່ງທີ່ຄາດຫວັງ, ຫຼັງຈາກນັ້ນພວກເຮົາທົດແທນມັນ, ນີ້ສາມາດເຮັດໄດ້ງ່າຍ.

ໃນຕົວຢ່າງຂ້າງເທິງ, debugger ຄວນຖືກເພີ່ມເປັນແຖວທໍາອິດຂອງຟັງຊັນຫຼື loop. ຫຼັງຈາກນັ້ນ, ທ່ານຈໍາເປັນຕ້ອງໄດ້ເປີດແຖບ debug ໃນ Chrome, ການວິເຄາະຕົວແປໃນຂອບເຂດ. ການນໍາໃຊ້ປຸ່ມຕໍ່ໄປທ່ານສາມາດຕິດຕາມການປ່ຽນແປງຂອງເຂົາເຈົ້າໃນແຕ່ລະ iteration. ທັງຫມົດນີ້ແມ່ນງ່າຍທີ່ຈະເຮັດ, ແລະໃນກໍລະນີຫຼາຍທີ່ສຸດ, ບັນຫາໄດ້ຖືກພົບເຫັນ.

ທ່ານສາມາດອ່ານເພີ່ມເຕີມກ່ຽວກັບສິ່ງທັງຫມົດນີ້ທີ່ນີ້ (ສໍາລັບ Chrome) ແລະ​ນີ້ (ສໍາລັບ Firefox).

syntax ຜິດພາດ

ຫນຶ່ງໃນຄວາມຜິດພາດທົ່ວໄປທີ່ສຸດໃນ JavaScript ແມ່ນ SyntaxError. ສ່ວນຂະຫຍາຍຕົວແກ້ໄຂຂໍ້ຄວາມຈະຊ່ວຍໃຫ້ທ່ານຫຼີກເວັ້ນພວກມັນ. ຕົວຢ່າງ, Bracket Pair Colorizer ກໍານົດວົງເລັບໃນລະຫັດທີ່ມີສີທີ່ແຕກຕ່າງກັນ, ແລະ Prettier ຫຼືເຄື່ອງມືການວິເຄາະທີ່ຄ້າຍຄືກັນເຮັດໃຫ້ມັນສາມາດຊອກຫາຂໍ້ຜິດພາດໄດ້ໄວ. ທາງເລືອກທີ່ດີທີ່ສຸດເພື່ອຫຼຸດຜ່ອນຄວາມເປັນໄປໄດ້ຂອງ SyntaxError ແມ່ນການສ້າງຮັງຫນ້ອຍທີ່ສຸດ.

ແບ່ງປັນໃນຄໍາເຫັນ: ເຈົ້າເຮັດແນວໃດເພື່ອປ້ອງກັນຄວາມຜິດພາດຫຼືໄວກວດພົບແລະລົບລ້າງພວກມັນ?

Skillbox ແນະນໍາ:

• ຫຼັກສູດພາກປະຕິບັດສອງປີ "ຂ້ອຍເປັນນັກພັດທະນາເວັບ PRO".
• ຫຼັກສູດອອນໄລນ "ນັກພັດທະນາ C# ຈາກ 0".
• ຫຼັກສູດພາກປະຕິບັດ "ນັກພັດທະນາ PHP ຈາກ 0 ເຖິງ PRO".

ແຫຼ່ງຂໍ້ມູນ: www.habr.com