TLDR
JavaScript มีการกำหนดขอบเขตและคำศัพท์ (หรือที่เรียกว่าแบบคงที่) ซึ่งหมายความว่าคุณสามารถบอกขอบเขตของตัวระบุได้โดยดูที่ซอร์สโค้ด
สี่ขอบเขตคือ:
- ทั่วโลก - ทุกอย่างสามารถมองเห็นได้
- ฟังก์ชั่น - มองเห็นได้ภายในฟังก์ชั่น (และฟังก์ชั่นย่อยและบล็อก)
- บล็อก - มองเห็นได้ภายในบล็อก (และบล็อกย่อย)
- โมดูล - มองเห็นได้ภายในโมดูล
นอกเหนือจากกรณีพิเศษของขอบเขตโกลบอลและโมดูลตัวแปรจะถูกประกาศโดยใช้var(ขอบเขตฟังก์ชั่น), let(ขอบเขตบล็อก) และconst(ขอบเขตบล็อก) การประกาศตัวระบุรูปแบบอื่น ๆ ส่วนใหญ่มีขอบเขตบล็อกในโหมดเข้มงวด
ภาพรวม
ขอบเขตคือขอบเขตของ codebase ซึ่งตัวระบุนั้นถูกต้อง
สภาพแวดล้อมศัพท์คือการทำแผนที่ระหว่างชื่อตัวระบุและค่าที่เกี่ยวข้องกับพวกเขา
ขอบเขตถูกสร้างขึ้นจากการซ้อนการลิงก์ของสภาวะแวดล้อมคำศัพท์โดยแต่ละระดับในการซ้อนจะสอดคล้องกับสภาวะแวดล้อมคำศัพท์ของบริบทการดำเนินการบรรพบุรุษ
สภาพแวดล้อมศัพท์ที่เชื่อมโยงเหล่านี้สร้างขอบเขต "โซ่" ความละเอียดของตัวระบุเป็นกระบวนการค้นหาตามสายโซ่นี้เพื่อหาตัวระบุที่ตรงกัน
ความละเอียดของตัวระบุจะเกิดขึ้นในทิศทางเดียวเท่านั้น: ออกไปด้านนอก ด้วยวิธีนี้สภาวะแวดล้อมคำศัพท์ภายนอกไม่สามารถ "เห็น" ในสภาวะแวดล้อมคำศัพท์ภายใน
มีปัจจัยที่เกี่ยวข้องสามประการในการตัดสินใจขอบเขตของตัวระบุใน JavaScript:
- วิธีประกาศตัวระบุ
- ตำแหน่งที่มีการประกาศตัวระบุ
- ไม่ว่าคุณจะอยู่ในโหมดเข้มงวดหรือโหมดไม่เข้มงวด
สามารถประกาศตัวระบุวิธีได้บางวิธี:
var, letและconst- พารามิเตอร์ฟังก์ชั่น
- จับพารามิเตอร์บล็อก
- ประกาศฟังก์ชั่น
- นิพจน์ฟังก์ชันที่ระบุชื่อ
- คุณสมบัติที่กำหนดโดยปริยายบนออบเจ็กต์โกลบอล (เช่น. หายไป
varในโหมดที่ไม่เข้มงวด)
import งบeval
ตัวระบุตำแหน่งบางตัวสามารถประกาศได้:
- บริบทระดับโลก
- ฟังก์ชั่นร่างกาย
- บล็อกสามัญ
- ด้านบนของโครงสร้างการควบคุม (เช่นลูปถ้าในขณะที่ ฯลฯ )
- โครงสร้างร่างกายควบคุม
- โมดูล
รูปแบบการประกาศ
var
ตัวระบุที่ประกาศโดยใช้var มีขอบเขตฟังก์ชั่นนอกเหนือจากเมื่อมีการประกาศโดยตรงในบริบทโลกซึ่งในกรณีนี้พวกเขาจะถูกเพิ่มเป็นคุณสมบัติในวัตถุทั่วโลกและมีขอบเขตทั่วโลก มีกฎแยกต่างหากสำหรับการใช้งานในevalฟังก์ชั่น
ให้และ const
ตัวระบุที่ประกาศใช้letและconst มีขอบเขตบล็อกนอกเหนือจากเมื่อมีการประกาศโดยตรงในบริบทส่วนกลางซึ่งในกรณีนี้จะมีขอบเขตทั่วโลก
หมายเหตุ: การlet, constและยกทั้งหมดvar ซึ่งหมายความว่าตำแหน่งเชิงตรรกะของการกำหนดความหมายคือด้านบนของขอบเขตการปิดล้อม (บล็อกหรือฟังก์ชัน) อย่างไรก็ตามตัวแปรที่ประกาศใช้letและconstไม่สามารถอ่านหรือกำหนดให้จนกว่าการควบคุมจะผ่านจุดประกาศในซอร์สโค้ด ช่วงเวลาระหว่างกาลเป็นที่รู้จักกันในชื่อเขตตายชั่วคราว
function f() {
function g() {
console.log(x)
}
let x = 1
g()
}
f() // 1 because x is hoisted even though declared with `let`!
ชื่อพารามิเตอร์ฟังก์ชั่น
ชื่อพารามิเตอร์ฟังก์ชั่นจะถูกกำหนดขอบเขตให้กับร่างกายของฟังก์ชั่น โปรดทราบว่ามีความซับซ้อนเล็กน้อยในเรื่องนี้ ฟังก์ชั่นที่ประกาศเป็นอาร์กิวเมนต์เริ่มต้นจะปิดรายการพารามิเตอร์ไม่ใช่ส่วนของฟังก์ชัน
ประกาศฟังก์ชั่น
การประกาศฟังก์ชั่นมีขอบเขตบล็อกในโหมดเข้มงวดและขอบเขตฟังก์ชันในโหมดไม่เข้มงวด หมายเหตุ: โหมดที่ไม่เข้มงวดเป็นชุดที่ซับซ้อนของกฎฉุกเฉินตามการใช้งานทางประวัติศาสตร์ที่แปลกประหลาดของเบราว์เซอร์ที่แตกต่างกัน
นิพจน์ฟังก์ชันที่ระบุชื่อ
นิพจน์ฟังก์ชันที่ระบุชื่อจะถูกกำหนดขอบเขตให้กับตัวเอง (เช่นเพื่อการเรียกซ้ำ)
คุณสมบัติที่กำหนดโดยปริยายบนอ็อบเจ็กต์โกลบอล
ในโหมดที่ไม่เข้มงวดคุณสมบัติที่กำหนดโดยปริยายบนวัตถุโกลบอลจะมีขอบเขตส่วนกลางเนื่องจากวัตถุทั่วโลกอยู่ที่ด้านบนของห่วงโซ่ขอบเขต ในโหมดเข้มงวดไม่อนุญาตให้ใช้
EVAL
ในevalสตริงตัวแปรที่ประกาศโดยใช้varจะถูกวางไว้ในขอบเขตปัจจุบันหรือหากevalมีการใช้โดยอ้อมเป็นคุณสมบัติในวัตถุทั่วโลก
ตัวอย่าง
ต่อไปนี้จะโยน ReferenceError เนื่องจากชื่อที่x, yและไม่มีนอกหมายของฟังก์ชั่นzf
function f() {
var x = 1
let y = 1
const z = 1
}
console.log(typeof x) // undefined (because var has function scope!)
console.log(typeof y) // undefined (because the body of the function is a block)
console.log(typeof z) // undefined (because the body of the function is a block)
ต่อไปนี้จะโยน ReferenceError สำหรับyและz, แต่ไม่ใช่xเพราะ, การมองเห็นของxไม่ถูก จำกัด โดยบล็อก บล็อกที่กำหนดร่างของโครงสร้างการควบคุมเช่นif, forและwhileประพฤติในทำนองเดียวกัน
{
var x = 1
let y = 1
const z = 1
}
console.log(x) // 1
console.log(typeof y) // undefined because `y` has block scope
console.log(typeof z) // undefined because `z` has block scope
ในต่อไปxนี้สามารถมองเห็นได้นอกวงเนื่องจากvarมีขอบเขตฟังก์ชั่น:
for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)
... เนื่องจากพฤติกรรมนี้คุณต้องระวังเกี่ยวกับการปิดตัวแปรที่ประกาศใช้varในลูป มีเพียงหนึ่งอินสแตนซ์ของตัวแปรที่xประกาศที่นี่และมันตั้งอยู่นอกตรรกะของลูป
พิมพ์ต่อไปนี้5ห้าครั้งแล้วพิมพ์5เป็นครั้งที่หกสำหรับconsole.logวงนอก:
for(var x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // closes over the `x` which is logically positioned at the top of the enclosing scope, above the loop
}
console.log(x) // note: visible outside the loop
งานพิมพ์ต่อไปนี้undefinedเนื่องจากxถูกบล็อกขอบเขต การเรียกกลับถูกเรียกใช้ทีละอะซิงโครนัส พฤติกรรมใหม่สำหรับletตัวแปรหมายความว่าแต่ละฟังก์ชั่นที่ไม่ระบุชื่อปิดมากกว่าตัวแปรที่แตกต่างกันชื่อx(เหมือนมันจะได้ทำกับvar) และจำนวนเต็ม0ผ่าน4จะถูกพิมพ์ .:
for(let x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // `let` declarations are re-declared on a per-iteration basis, so the closures capture different variables
}
console.log(typeof x) // undefined
ต่อไปนี้จะไม่ส่งต่อReferenceErrorเนื่องจากการแสดงผลของxบล็อกไม่ถูก จำกัด มันจะอย่างไรก็ตามพิมพ์undefinedเพราะตัวแปรยังไม่ได้เริ่มต้น (เพราะifคำสั่ง)
if(false) {
var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised
ตัวแปรที่ประกาศที่ด้านบนของforลูปที่ใช้letจะถูกกำหนดขอบเขตไว้ที่เนื้อความของลูป:
for(let x = 0; x < 10; ++x) {}
console.log(typeof x) // undefined, because `x` is block-scoped
ต่อไปนี้จะโยนReferenceErrorเนื่องจากการเปิดเผยxถูก จำกัด โดยบล็อก:
if(false) {
let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped
ตัวแปรที่ประกาศใช้var, letหรือconstทุกขอบเขตโมดูล:
// module1.js
var x = 0
export function f() {}
//module2.js
import f from 'module1.js'
console.log(x) // throws ReferenceError
ต่อไปนี้จะประกาศคุณสมบัติบนวัตถุส่วนกลางเนื่องจากตัวแปรที่ประกาศใช้varภายในบริบทส่วนกลางจะถูกเพิ่มเป็นคุณสมบัติให้กับวัตถุทั่วโลก:
var x = 1
console.log(window.hasOwnProperty('x')) // true
letและconstในบริบทโลกไม่ได้เพิ่มคุณสมบัติให้กับวัตถุทั่วโลก แต่ยังคงมีขอบเขตทั่วโลก:
let x = 1
console.log(window.hasOwnProperty('x')) // false
สามารถพิจารณาพารามิเตอร์ของฟังก์ชั่นที่จะประกาศในฟังก์ชั่นร่างกาย:
function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function
พารามิเตอร์ catch block ถูกกำหนดขอบเขตไว้ที่เนื้อหา catch-block:
try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block
นิพจน์ฟังก์ชันที่มีชื่อถูกกำหนดขอบเขตเฉพาะนิพจน์เท่านั้น:
(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression
ในโหมดที่ไม่เข้มงวดคุณสมบัติที่กำหนดโดยปริยายบนอ็อบเจ็กต์โกลบอลจะถูกกำหนดขอบเขตแบบโกลบอล ในโหมดเข้มงวดคุณได้รับข้อผิดพลาด
x = 1 // implicitly defined property on the global object (no "var"!)
console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true
ในโหมดที่ไม่เข้มงวดการประกาศฟังก์ชันมีขอบเขตฟังก์ชัน ในโหมดเข้มงวดพวกเขามีขอบเขตบล็อก
'use strict'
{
function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped
มันทำงานอย่างไรภายใต้ประทุน
ขอบเขตถูกกำหนดให้เป็นขอบเขตศัพท์ของรหัสซึ่งตัวระบุนั้นถูกต้อง
ใน JavaScript ทุกฟังก์ชั่นวัตถุมีการ[[Environment]]อ้างอิงที่ซ่อนอยู่ซึ่งเป็นการอ้างอิงถึงสภาพแวดล้อมศัพท์ของบริบทการดำเนินการ (กรอบสแต็ก) ที่มันถูกสร้างขึ้น
เมื่อคุณเรียกใช้ฟังก์ชั่น[[Call]]วิธีการที่ซ่อนอยู่จะถูกเรียก วิธีนี้จะสร้างบริบทการดำเนินการใหม่และสร้างการเชื่อมโยงระหว่างบริบทการดำเนินการใหม่และสภาพแวดล้อมคำศัพท์ของฟังก์ชั่น - วัตถุ มันทำได้โดยการคัดลอก[[Environment]]ค่าในฟังก์ชั่นวัตถุไปยังเขตข้อมูลอ้างอิงด้านนอกบนสภาพแวดล้อมศัพท์ของบริบทการดำเนินการใหม่
โปรดทราบว่าการเชื่อมโยงระหว่างการดำเนินการบริบทใหม่และสภาพแวดล้อมคำศัพท์ของวัตถุฟังก์ชั่นนี้เรียกว่าปิด
ดังนั้นใน JavaScript ขอบเขตจะถูกนำไปใช้ผ่านสภาพแวดล้อมของคำศัพท์ที่เชื่อมโยงเข้าด้วยกันใน "chain" โดยการอ้างอิงภายนอก สายโซ่ของสภาพแวดล้อมทางศัพท์นี้เรียกว่าขอบเขตลูกโซ่และการจำแนกตัวระบุเกิดขึ้นโดยการค้นหาสายโซ่เพื่อหาตัวระบุที่ตรงกัน
ค้นหาข้อมูลเพิ่มเติม
