ความขัดแย้งของตัวแปรใน JavaScript

สมมติว่าเรามีหน้า HTML index.html, ซึ่งในแท็ก script คุณสร้าง ตัวแปร str และแสดงมันบนหน้าจอ:

index.html<html>
  <head>
    <script>
      let str = 'script text';
      alert(str); // แสดง 'script text'
    </script>
  </head>
  <body>
    ...
  </body>
</html>

สมมติว่าเรามีไฟล์ script.js, ซึ่งในนั้นก็กำหนดตัวแปร str:

script.jslet str = 'file text';

สมมติว่าตอนนี้ไฟล์ script.js ของเรา ถูกเชื่อมต่อกับหน้า index.html ดังนี้:

html<html>
  <head>
    <script>
      let str = 'script text';
    </script>
    <script src="script.js"></script>
    <script>
      alert(str);
    </script>
  </head>
  <body>
    ...
  </body>
</html>

เนื่องจากมีตัวแปร str ทั้งในไฟล์ index.html และในไฟล์ script.js, จึงจะเกิดความขัดแย้ง ซึ่งตัวแปรที่เขียนอยู่ด้านล่าง จะชนะ นั่นคือตัวแปร จากไฟล์ script.js ซึ่งโค้ดของเรา จะแสดง 'file text' ไม่ใช่ 'script text' ตามที่เราคาดหวัง

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