ก่อนที่จะเรียนรู้เกี่ยวกับขอบเขตของตัวแปรใน JavaScript เราควรชี้แจงบางประเด็นก่อน:
•ขอบเขตตัวแปรของ JavaScript ขึ้นอยู่กับห่วงโซ่ขอบเขตเฉพาะของมัน
•JavaScript ไม่มีขอบเขตระดับบล็อก
•ตัวแปรที่ประกาศในฟังก์ชันถูกกำหนดไว้ทั่วทั้งฟังก์ชัน
1. ห่วงโซ่ขอบเขต JavaScript
ขั้นแรกดูที่รหัสต่อไปนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript"> var = 1; function rainman(){ var man = 2; function inner(){ var innerVar = 4; } ฟังก์ชันภายใน (); } Rainman(); //เรียกใช้ฟังก์ชัน Rainman</script>
สังเกตรหัสแจ้งเตือน(ฝน); ก่อนอื่น JavaScript จะตรวจสอบว่าตัวแปร Rain ถูกกำหนดไว้ในฟังก์ชันภายในหรือไม่ หากถูกกำหนดไว้ ตัวแปร Rain ในฟังก์ชันภายในจะถูกใช้ หากไม่ได้กำหนดตัวแปร Rain ในฟังก์ชันภายใน JavaScript จะตรวจสอบว่าตัวแปร Rain ต่อไปหรือไม่ ถูกกำหนดไว้ในฟังก์ชัน Rainman ในโค้ดนี้ ตัวแปร Rain ไม่ได้ถูกกำหนดไว้ในเนื้อหาของฟังก์ชัน Rainman ดังนั้นเอ็นจิ้น JavaScript จะยังคงค้นหา (วัตถุส่วนกลาง) เพื่อดูว่ามีการกำหนด Rain ในวัตถุส่วนกลางหรือไม่ ฝนที่กำหนด = 1 ดังนั้นผลลัพธ์สุดท้ายจะปรากฏขึ้น '1'
ห่วงโซ่ขอบเขต: เมื่อ JavaScript ต้องการสอบถามตัวแปร x อันดับแรก JavaScript จะค้นหาวัตถุแรกในห่วงโซ่ขอบเขต ถ้าวัตถุแรกไม่ได้กำหนด หากไม่มีคำจำกัดความ การค้นหาจะดำเนินต่อไปเรื่อยๆ
โค้ดด้านบนเกี่ยวข้องกับอ็อบเจ็กต์ขอบเขตขอบเขตสามรายการ ตามลำดับ: ภายใน, Rainman และหน้าต่าง
2. ภายในเนื้อหาของฟังก์ชัน ตัวแปรท้องถิ่นมีลำดับความสำคัญสูงกว่าตัวแปรโกลบอลที่มีชื่อเดียวกัน
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript"> var rain = 1; //กำหนดฟังก์ชันฝนแบบแปรผันทั่วโลก (){ var rain = 100; //กำหนดการแจ้งเตือนฝนแบบแปรผันเฉพาะที่ (ฝน); //100 จะปรากฏขึ้น ที่นี่ } ตรวจสอบ (); การแจ้งเตือน ( ฝน ); //1 จะปรากฏขึ้นที่นี่ </script>
3. JavaScript ไม่มีขอบเขตระดับบล็อก
นี่เป็นส่วนที่ JavaScript มีความยืดหยุ่นมากกว่าภาษาอื่นๆ
โปรดสังเกตโค้ดด้านล่างอย่างระมัดระวัง คุณจะพบว่าขอบเขตของตัวแปร i, j และ k นั้นเหมือนกัน และพวกมันมีอยู่ทั่วทั้งตัวฟังก์ชันฝนทั้งหมด
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript"> function Rainman(){ // มีตัวแปรท้องถิ่น 3 ตัว ijk ในฟังก์ชัน Rainman var i = 0; if ( 1 ) { var j = 0; k < 3; k++) { alert( k ); // ป๊อปอัป 0 1 2 ตามลำดับ } การแจ้งเตือน ( k ); // ป๊อปอัพ 3 } การแจ้งเตือน ( j );
4. ตัวแปรที่ประกาศในฟังก์ชันถูกกำหนดไว้ทั่วทั้งฟังก์ชัน
ก่อนอื่นให้สังเกตรหัสนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript"> function rain(){ var x = 1; function man(){ x = 100; } man(); // 100 จะปรากฏขึ้นที่นี่ } ฝน(); //เรียกฝน</script>
โค้ดด้านบนแสดงให้เห็นว่าตัวแปร x สามารถใช้ทั่วทั้งตัวฟังก์ชัน Rain และสามารถกำหนดใหม่ได้ เนื่องจากกฎนี้ ผลลัพธ์ที่ "ไม่น่าเชื่อ" จึงจะเกิดขึ้น โปรดสังเกตโค้ดด้านล่าง
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript"> var x = 1; function rain(){ alert( x ); // ป๊อปอัป 'ไม่ได้กำหนด' แทน 1 var x = 'rain-man'; /pop 'rain-man' } ฝน();</script>
นี่เป็นเพราะว่าตัวแปรโลคอล x ในฟังก์ชัน Rain ถูกกำหนดทั่วทั้งเนื้อหาของฟังก์ชัน (var x= 'rain-man', ประกาศ) ดังนั้นตัวแปรโกลบอล x ที่มีชื่อเดียวกันจึงถูกซ่อนอยู่ในเนื้อหาของฟังก์ชัน Rain ทั้งหมด สาเหตุที่ 'unknown' ปรากฏขึ้นที่นี่ก็เพราะเมื่อมีการดำเนินการ alert(x) เป็นครั้งแรก ตัวแปรท้องถิ่น x ยังไม่ได้เริ่มต้น
ดังนั้นฟังก์ชันฝนด้านบนจึงเทียบเท่ากับฟังก์ชันต่อไปนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่น ฝน () { var x; alert ( x ); x = 'rain-man';
5. ตัวแปรที่กำหนดโดยไม่ใช้คีย์เวิร์ด var คือตัวแปรส่วนกลาง
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript"> function rain(){ x = 100; // ตัวแปรทั่วโลก x ถูกประกาศและกำหนด} rain(); alert( x ); //100 จะปรากฏขึ้น </script>
นี่เป็นข้อผิดพลาดทั่วไปในหมู่มือใหม่ JavaScript ทำให้เกิดตัวแปรทั่วโลกจำนวนมากโดยไม่ได้ตั้งใจ
6. ตัวแปรโกลบอลเป็นคุณสมบัติทั้งหมดของวัตถุหน้าต่าง
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript"> var x = 100; alert( window.x);//ป๊อปอัป 100 alert(x);</script>
เทียบเท่ากับรหัสต่อไปนี้
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript"> window.x = 100; การแจ้งเตือน( window.x ); การแจ้งเตือน(x)</script>