ตัวแปร JavaScript สามารถอยู่ใน local หรือ ขอบเขตทั่วโลก
ตัวแปรโกลบอลสามารถกำหนดให้อยู่ในเครื่อง (ส่วนตัว) ด้วย การปิด
function สามารถเข้าถึงตัวแปรทั้งหมดที่กำหนดไว้ ภายใน ฟังก์ชัน เช่นนี้:
function myFunction() {
let a = 4;
return a * a;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can access variables defined inside the function:</p>
<p id="demo"></p>
<script>
myFunction();
function myFunction() {
let a = 4;
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>
แต่ function ยังสามารถเข้าถึงตัวแปรที่กำหนด ภายนอก ฟังก์ชันได้ เช่นนี้:
let a = 4;
function myFunction() {
return a * a;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can access variables defined outside the function:</p>
<p id="demo"></p>
<script>
let a = 4;
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML = a * a;
}
</script>
</body>
</html>
ในตัวอย่างสุดท้าย a คือ ทั่วโลก ตัวแปร.
ในหน้าเว็บ ตัวแปรร่วมจะอยู่ในหน้าเว็บ
ตัวแปรร่วมสามารถใช้ (และเปลี่ยนแปลง) โดยสคริปต์อื่นๆ ทั้งหมดในเพจ
ในตัวอย่างแรก a คือ ท้องถิ่น ตัวแปร.
ตัวแปรท้องถิ่นสามารถใช้ได้ภายในฟังก์ชันที่กำหนดไว้เท่านั้น มัน ถูกซ่อนจากฟังก์ชันอื่นๆ และโค้ดสคริปต์อื่นๆ
ทั่วโลก และตัวแปรท้องถิ่นที่มีชื่อเดียวกันคือ ตัวแปรที่แตกต่างกัน การแก้ไขอันหนึ่งไม่ได้แก้ไขอันอื่น
ตัวแปรที่สร้าง โดยไม่มี คำหลักสำหรับการประกาศ (var, ให้ หรือ const) อยู่เสมอ global แม้ว่าจะถูกสร้างขึ้นภายในฟังก์ชันก็ตาม
function myFunction() {
a = 4;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Variables created without a declaration keyword (var, let, or const) are always global,
even if they are created inside a function.:</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML = a * a;
function myFunction() {
a = 4;
}
</script>
</body>
</html>
ตัวแปรร่วมจะมีผลจนกว่าเพจจะถูกละทิ้ง เช่น เมื่อคุณนำทาง ไปยังหน้าอื่นหรือปิดหน้าต่าง
ท้องถิ่น ตัวแปรมีอายุสั้น พวกมันถูกสร้างขึ้นเมื่อมีฟังก์ชัน เรียกใช้และลบออกเมื่อฟังก์ชันเสร็จสิ้น
สมมติว่าคุณต้องการใช้ตัวแปรในการนับบางสิ่ง และคุณต้องการสิ่งนี้ เคาน์เตอร์ให้ใช้งานได้ครบทุกฟังก์ชั่น
คุณสามารถใช้ตัวแปรส่วนกลางและ ฟังก์ชัน เพื่อเพิ่มตัวนับ:
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The counter should now be 3ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Function Closures</h2>
<p>Counting with a global variable.</p>
<p id="demo"></p>
<script>
// Initiate counter
let counter = 0;
// Function to increment counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The counter should now be 3
document.getElementById("demo").innerHTML = "The counter is: " + counter;
</script>
</body>
</html>
มีปัญหากับวิธีแก้ปัญหาข้างต้น: โค้ดใดๆ บนเพจสามารถเปลี่ยนตัวนับได้โดยไม่ต้อง โทรเพิ่ม()
ตัวนับควรอยู่ในฟังก์ชัน add() เพื่อป้องกันไม่ให้โค้ดอื่นเปลี่ยนแปลง มัน:
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 0ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Function Closures</h2>
<p>Counting with a local variable.</p>
<p id="demo"></p>
<script>
// Initiate counter
let counter = 0;
// Function to increment counter
function add() {
let counter = 0;
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The result is not 3 because you mix up the globaland local counter
document.getElementById("demo").innerHTML = "The counter is: " + counter;
</script>
</body>
</html>
มันใช้งานไม่ได้เนื่องจากเราแสดงตัวนับส่วนกลางแทนที่จะเป็นตัวนับในพื้นที่ เคาน์เตอร์.
เราสามารถลบตัวนับทั่วโลกและเข้าถึงตัวนับในพื้นที่ได้โดยให้ ฟังก์ชั่นส่งคืน:
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
return counter;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 1.ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Closures</h2>
<p>Counting with a local variable.</p>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo">0</p>
<script>
// Function to increment counter
function add() {
let counter = 0;
counter += 1;
return counter;
}
// Trying to increment the counter
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>
มันใช้งานไม่ได้เพราะเรารีเซ็ตตัวนับในพื้นที่ทุกครั้งที่เราโทรหา การทำงาน.
ฟังก์ชันภายใน JavaScript สามารถแก้ปัญหานี้ได้
ฟังก์ชั่นทั้งหมดสามารถเข้าถึงขอบเขตส่วนกลางได้
ในความเป็นจริงใน JavaScript ฟังก์ชั่นทั้งหมดสามารถเข้าถึงขอบเขต "ด้านบน" ได้
JavaScript รองรับฟังก์ชันที่ซ้อนกัน ฟังก์ชั่นที่ซ้อนกันสามารถเข้าถึงไฟล์ ขอบเขต "เหนือ" พวกเขา
ในตัวอย่างนี้ ฟังก์ชันภายใน plus() มีสิทธิ์เข้าถึง ไปยังตัวแปร counter ในฟังก์ชันพาเรนต์:
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Function Closures</h2>
<p>Counting with a local variable.</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
</script>
</body>
</html>
นี่อาจช่วยแก้ปัญหาที่กลืนไม่เข้าคายไม่ออกหากเราสามารถเข้าถึง plus() ฟังก์ชั่นจากภายนอก
นอกจากนี้เรายังต้องหาวิธีดำเนินการ counter=0 เพียงครั้งเดียว
เราจำเป็นต้องปิดตัวลง
จำฟังก์ชั่นที่เรียกตัวเองได้ไหม? ฟังก์ชั่นนี้ทำหน้าที่อะไร?
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// the counter is now 3ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Closures</h2>
<p>Counting with a local variable.</p>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo">0</p>
<script>
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>
ตัวแปร add ถูกกำหนดให้กับค่าส่งคืนของการเรียกตัวเอง การทำงาน.
ฟังก์ชันเรียกใช้ตัวเองจะทำงานเพียงครั้งเดียวเท่านั้น มันตั้งค่าตัวนับเป็นศูนย์ (0) และส่งคืนนิพจน์ฟังก์ชัน
วิธีนี้ add จะกลายเป็นฟังก์ชัน ส่วนที่ "มหัศจรรย์" ก็คือสามารถเข้าถึงได้ ตัวนับในขอบเขตหลัก
สิ่งนี้เรียกว่า การปิด ของ JavaScript มันทำให้เป็นไปได้ เพื่อให้ฟังก์ชันมีตัวแปร "ส่วนตัว"
ตัวนับได้รับการคุ้มครองโดยขอบเขตของฟังก์ชันที่ไม่ระบุตัวตน และสามารถเปลี่ยนได้โดยใช้ฟังก์ชันเพิ่มเท่านั้น
การปิดคือฟังก์ชันที่มีสิทธิ์เข้าถึงขอบเขตหลัก แม้ว่าฟังก์ชันหลักจะปิดไปแล้วก็ตาม