วิธีการเพิ่มประสิทธิภาพโค้ด JavaScript โดยคำนึงถึง Hoisting?

ในฐานะซัพพลายเออร์ด้านรอก ฉันได้เห็นโดยตรงแล้วว่าแนวคิดของการยกไม่เพียงเกี่ยวข้องกับโลกทางกายภาพของอุปกรณ์งานหนักเท่านั้น แต่ยังรวมถึงขอบเขตดิจิทัลของการเขียนโปรแกรม JavaScript ด้วย ในบล็อกนี้ ฉันจะสำรวจวิธีเพิ่มประสิทธิภาพโค้ด JavaScript โดยคำนึงถึงการยกข้อมูลด้วย

ทำความเข้าใจเกี่ยวกับการชักรอกใน JavaScript

ก่อนที่เราจะเจาะลึกเรื่องการเพิ่มประสิทธิภาพ สิ่งสำคัญคือต้องทำความเข้าใจว่า JavaScript คืออะไร Hoisting เป็นกลไก JavaScript ที่ตัวแปรและการประกาศฟังก์ชันถูกย้ายไปยังด้านบนของขอบเขตที่มีอยู่ในระหว่างขั้นตอนการคอมไพล์ ซึ่งหมายความว่าคุณสามารถใช้ตัวแปรหรือเรียกใช้ฟังก์ชันก่อนที่จะประกาศจริงในโค้ดได้

ลองดูตัวอย่างง่ายๆ ของการยกตัวแปร:

console.log(x); วาร์ x = 5;

ในโค้ดนี้ผลลัพธ์จะเป็นไม่ได้กำหนดแทนที่จะเป็นข้อผิดพลาดในการอ้างอิง นี่เป็นเพราะตัวแปรxถูกยกขึ้นไปที่ด้านบนของขอบเขต แต่จะย้ายเฉพาะการประกาศเท่านั้น ไม่ใช่การมอบหมาย ดังนั้น ณ เวลาที่console.logคำแถลง,xมีอยู่ในหน่วยความจำแต่ไม่มีค่าที่กำหนด

การประกาศฟังก์ชันก็ถูกยกขึ้นเช่นกัน พิจารณาสิ่งต่อไปนี้:

ฟังก์ชั่นของฉัน(); function myFunction() { console.log('ฟังก์ชั่นนี้ถูกยกขึ้น!'); }

นี่โทรมา.myFunctionก่อนที่การประกาศจะทำงานได้ดีอย่างสมบูรณ์เพราะการประกาศฟังก์ชันทั้งหมดถูกยกไปที่ด้านบนของขอบเขต

ปัญหาที่อาจเกิดขึ้นจากการยก

การยกอาจทำให้เกิดปัญหาสับสนและยากต่อการแก้ไขในโค้ด JavaScript ของคุณ ปัญหาทั่วไปประการหนึ่งเกี่ยวข้องกับการประกาศตัวแปรและการกำหนดตัวแปร ดูรหัสนี้:

วาร์ ก = 1; การทดสอบฟังก์ชัน () { console.log (a); วาร์ ก = 2; } ทดสอบ();

ผลลัพธ์ของโค้ดนี้จะเป็นไม่ได้กำหนด, ไม่1อย่างที่คุณคาดหวัง นี่เป็นเพราะตัวแปรกภายในฟังก์ชั่นถูกยกขึ้นและconsole.logคำสั่งพยายามเข้าถึงก่อนมอบหมายงาน

ปัญหาอื่นอาจเกิดขึ้นเมื่อคุณมีการประกาศฟังก์ชันหลายรายการที่มีชื่อเดียวกัน การประกาศฟังก์ชันล่าสุดจะเขียนทับฟังก์ชันก่อนหน้าเนื่องจากการยก

ฟังก์ชั่น foo() { console.log('First foo'); } ฟังก์ชั่น foo() { console.log('Second foo'); } ฟู();

ผลลัพธ์ที่ได้จะเป็นฟูที่สองเนื่องจากการประกาศฟังก์ชันที่สองจะเขียนทับฟังก์ชันแรกในระหว่างการยก

กลยุทธ์ในการเพิ่มประสิทธิภาพโค้ด JavaScript โดยพิจารณาถึงการยก

1. การใช้งานอนุญาตและค่าคงที่แทนของเรา

ที่อนุญาตและค่าคงที่คีย์เวิร์ดที่นำมาใช้ใน ES6 มีขอบเขตระดับบล็อก และไม่แสดงพฤติกรรมการยกแบบเดียวกับของเรา. ตัวแปรที่ประกาศด้วยอนุญาตและค่าคงที่ถูกยกขึ้น แต่พวกมันอยู่ใน "เขตตายชั่วคราว" (TDZ) จนกว่าจะมีการประกาศจริงในโค้ด

// console.log(y); // สิ่งนี้จะทำให้เกิด ReferenceError ให้ y = 10;

โดยใช้อนุญาตและค่าคงที่สามารถทำให้โค้ดของคุณสามารถคาดเดาได้มากขึ้นและเข้าใจง่ายขึ้น คุณจะไม่เข้าถึงตัวแปรโดยไม่ตั้งใจก่อนที่จะได้รับมอบหมาย ซึ่งช่วยลดโอกาสที่จะเกิดข้อบกพร่องที่เกิดจากการยก

2. ประกาศตัวแปรที่ด้านบนของขอบเขต

แม้ว่าคุณจะใช้อนุญาตและค่าคงที่แนวทางปฏิบัติที่ดีในการประกาศตัวแปรของคุณที่ด้านบนของขอบเขตที่มีอยู่ ทำให้โค้ดมีระเบียบมากขึ้นและอ่านง่ายขึ้น ตัวอย่างเช่น:

ฟังก์ชั่นคำนวณ () { ให้ num1; ให้ num2; ให้ผล; หมายเลข 1 = 5; หมายเลข 2 = 10; ผลลัพธ์ = num1 + num2; ส่งคืนผลลัพธ์; }

3. หลีกเลี่ยงการทำงานที่มากเกินไปผ่านการยก

ตามที่กล่าวไว้ก่อนหน้านี้ การประกาศฟังก์ชันที่มีชื่อเดียวกันอาจทำให้เกิดปัญหาเนื่องจากการยกได้ แทนที่จะใช้ฟังก์ชันมากเกินไปในลักษณะนี้ คุณสามารถใช้นิพจน์ฟังก์ชันได้ นิพจน์ฟังก์ชันไม่ได้ถูกยกขึ้นในลักษณะเดียวกับการประกาศฟังก์ชัน

var add = function(a, b) { คืน a + b; }; var add = function(a, b, c) { คืน a + b + c; };

ในที่นี้ นิพจน์ฟังก์ชันที่สองจะเขียนทับนิพจน์แรก แต่จะชัดเจนกว่าและจัดการได้ง่ายกว่าเมื่อเทียบกับการประกาศฟังก์ชันที่โอเวอร์โหลด

การเชื่อมต่อกับการชักรอกในโลกทางกายภาพ

ในฐานะซัพพลายเออร์ด้านรอก ฉันเห็นความคล้ายคลึงกันระหว่างการปรับโค้ด JavaScript ให้เหมาะสมและการดำเนินการยกทางกายภาพของเรา เช่นเดียวกับที่เราจำเป็นต้องวางแผนและดำเนินการการยกในโลกแห่งความเป็นจริงอย่างระมัดระวังเพื่อความปลอดภัยและประสิทธิภาพ เราจำเป็นต้องจัดการการยกใน JavaScript อย่างระมัดระวังเพื่อเขียนโค้ดที่สะอาดและปราศจากข้อบกพร่อง

ในโลกทางกายภาพที่เราจัดการกับโรงงานเหล็กหนักและโครงเหล็กอาคาร. โครงสร้างเหล่านี้จำเป็นต้องมีการยกที่แม่นยำจึงจะถูกสร้างขึ้นได้อย่างปลอดภัยและมีประสิทธิภาพ ในทำนองเดียวกัน ใน JavaScript เราจำเป็นต้องแม่นยำในโค้ดของเราเพื่อจัดการการยกอย่างถูกต้อง

เช่น เมื่อทำงานการเขียนแบบ 3 มิติสำเร็จรูปสำหรับอาคารสูงโครงสร้างเหล็กทุกรายละเอียดมีความสำคัญ ใน JavaScript การประกาศตัวแปรและคำจำกัดความของฟังก์ชันทุกครั้งมีความสำคัญเมื่อพิจารณาการยก

บทสรุป

การเพิ่มประสิทธิภาพโค้ด JavaScript ในขณะที่พิจารณาถึงการยกเป็นสิ่งสำคัญสำหรับการเขียนโค้ดที่สะอาด บำรุงรักษาได้ และไม่มีจุดบกพร่อง ด้วยการทำความเข้าใจแนวคิดของการยก ตระหนักถึงปัญหาที่อาจเกิดขึ้น และใช้กลยุทธ์การปรับให้เหมาะสมที่กล่าวถึงข้างต้น คุณสามารถปรับปรุงคุณภาพของโค้ด JavaScript ของคุณได้

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับวิธีที่เราสามารถช่วยเหลือคุณเกี่ยวกับความต้องการในการยกของคุณ ไม่ว่าจะเป็นสำหรับโครงการเขียนโปรแกรมหรือการดำเนินการยกทางกายภาพ เราพร้อมให้ความช่วยเหลือคุณ ติดต่อเราเพื่อเริ่มการสนทนาเรื่องการจัดซื้อจัดจ้างและค้นหาโซลูชันที่ดีที่สุดสำหรับความต้องการของคุณ

อ้างอิง

• "JavaScript: The Definitive Guide" โดย David Flanagan
• เอกสาร JavaScript ของ Mozilla Developer Network (MDN)