วัตถุโกลบอล

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

ในเบราว์เซอร์จะมีชื่อว่า window สำหรับ Node.js จะเป็น global สำหรับสภาพแวดล้อมอื่น ๆ อาจมีชื่ออื่น

เมื่อเร็วๆ นี้ globalThis ถูกเพิ่มให้กับภาษา ซึ่งเป็นชื่อมาตรฐานสำหรับวัตถุส่วนกลาง ที่ควรได้รับการสนับสนุนในทุกสภาพแวดล้อม รองรับเบราว์เซอร์หลักๆ ทั้งหมด

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

คุณสมบัติทั้งหมดของอ็อบเจ็กต์โกลบอลสามารถเข้าถึงได้โดยตรง:

 alert("สวัสดี");
//ก็เหมือนกับ.
window.alert("สวัสดี");

ในเบราว์เซอร์ ฟังก์ชันโกลบอลและตัวแปรที่ประกาศด้วย var (ไม่ let/const !) กลายเป็นคุณสมบัติของอ็อบเจ็กต์โกลบอล:

 วาร์ กวาร์ = 5;

การแจ้งเตือน (window.gVar); // 5 (กลายเป็นคุณสมบัติของอ็อบเจ็กต์โกลบอล)

การประกาศฟังก์ชันมีผลเช่นเดียวกัน (คำสั่งที่มีคีย์เวิร์ด function ในโฟลว์โค้ดหลัก ไม่ใช่นิพจน์ของฟังก์ชัน)

โปรดอย่าพึ่งสิ่งนั้น! ลักษณะการทำงานนี้มีอยู่เพื่อเหตุผลด้านความเข้ากันได้ สคริปต์สมัยใหม่ใช้โมดูล JavaScript โดยที่สิ่งนั้นจะไม่เกิดขึ้น

หากเราใช้ let แทน สิ่งนี้จะไม่เกิดขึ้น:

 ให้ gLet = 5;

การแจ้งเตือน (window.gLet); // ไม่ได้กำหนด (ไม่ถือเป็นคุณสมบัติของอ็อบเจ็กต์โกลบอล)

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

 // ทำให้ข้อมูลผู้ใช้ปัจจุบันเป็นสากล เพื่อให้สคริปต์ทั้งหมดเข้าถึงได้
window.currentUser = {
  ชื่อ: "จอห์น"
-

// อยู่ที่อื่นในโค้ด
การแจ้งเตือน (ชื่อผู้ใช้ปัจจุบัน);  // จอห์น

// หรือถ้าเรามีตัวแปรท้องถิ่นชื่อ "currentUser"
// รับจากหน้าต่างอย่างชัดเจน (ปลอดภัย!)
การแจ้งเตือน (window.currentUser.name); // จอห์น

อย่างไรก็ตาม โดยทั่วไปแล้วการใช้ตัวแปรร่วมนั้นไม่สนับสนุน ควรมีตัวแปรร่วมน้อยที่สุดเท่าที่จะเป็นไปได้ การออกแบบโค้ดที่ฟังก์ชันรับตัวแปร “อินพุต” และสร้าง “ผลลัพธ์” บางอย่างมีความชัดเจนกว่า มีแนวโน้มที่จะเกิดข้อผิดพลาดน้อยกว่า และทดสอบได้ง่ายกว่าการใช้ตัวแปรภายนอกหรือตัวแปรร่วม

ใช้สำหรับโพลีฟิล

เราใช้วัตถุส่วนกลางเพื่อทดสอบการสนับสนุนคุณลักษณะภาษาสมัยใหม่

ตัวอย่างเช่น ทดสอบว่ามีวัตถุ Promise ในตัวอยู่หรือไม่ (ไม่มีในเบราว์เซอร์รุ่นเก่าจริงๆ):

 ถ้า (!window.Promise) {
  alert("เบราว์เซอร์ของคุณเก่ามาก!");
-

หากไม่มี (เช่น เราอยู่ในเบราว์เซอร์รุ่นเก่า) เราสามารถสร้าง "polyfills": เพิ่มฟังก์ชันที่สภาพแวดล้อมไม่รองรับ แต่มีอยู่ในมาตรฐานสมัยใหม่

 ถ้า (!window.Promise) {
  window.Promise = ... // การใช้งานคุณลักษณะภาษาสมัยใหม่แบบกำหนดเอง
-

สรุป

• วัตถุโกลบอลเก็บตัวแปรที่ควรมีทุกที่

  ซึ่งรวมถึง JavaScript ในตัว เช่น Array และค่าเฉพาะสภาพแวดล้อม เช่น window.innerHeight – ความสูงของหน้าต่างในเบราว์เซอร์

• วัตถุโกลบอลมีชื่อสากล globalThis

  …แต่บ่อยครั้งที่ชื่อเฉพาะสภาพแวดล้อม “แบบเก่า” เรียกกันมากกว่า เช่น window (เบราว์เซอร์) และ global (Node.js)

• เราควรเก็บค่าไว้ในอ็อบเจ็กต์ส่วนกลางเฉพาะในกรณีที่ค่านั้นเป็นโกลบอลสำหรับโครงการของเราอย่างแท้จริง และรักษาจำนวนให้น้อยที่สุด

• ในเบราว์เซอร์ เว้นแต่ว่าเราใช้โมดูล ฟังก์ชันโกลบอลและตัวแปรที่ประกาศด้วย var จะกลายเป็นคุณสมบัติของอ็อบเจ็กต์โกลบอล

• เพื่อให้โค้ดของเรารองรับอนาคตและเข้าใจได้ง่ายขึ้น เราควรเข้าถึงคุณสมบัติของอ็อบเจ็กต์โกลบอลโดยตรง เช่น window.x