JavaScript ไม่มี Private Keyword อย่างอื่นๆ (ก่อน ES2022 #private fields) แต่สามารถสร้าง Private Members ได้ด้วย Closure ใน Constructor Function ตัวแปรที่ประกาศใน Constructor จะกลายเป็น Private และเข้าถึงได้เฉพาะผ่าน Methods ที่สร้างใน Constructor เดียวกัน
ตัวอย่างโค้ด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Private Members</title>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.result { font-size: 18px; font-weight: 500; color: blueviolet; }
</style>
</head>
<body>
<h1>แชร์ Private Members ระหว่าง Instances</h1>
<div class="result"></div>
<br />
<button class="Btn">คลิกที่นี่</button>
<h3>คลิกปุ่มด้านบนเพื่อแสดง property personName</h3>
<script>
const resEle = document.querySelector(".result");
const BtnEle = document.querySelector(".Btn");
function Person(name) {
// Private variable - ไม่เข้าถึงได้จากภายนอก
let personName = name;
// Privileged Method - เข้าถึง private ได้
this.returnName = function() {
return personName;
};
}
const person1 = new Person("Rohan");
const person2 = new Person("Shawn");
BtnEle.addEventListener("click", () => {
resEle.innerHTML = `person1.returnName() = ${person1.returnName()}<br>`;
resEle.innerHTML += `person2.returnName() = ${person2.returnName()}<br>`;
resEle.innerHTML += `person1.personName = ${person1.personName}<br>`; // undefined
resEle.innerHTML += `person2.personName = ${person2.personName}<br>`; // undefined
});
</script>
</body>
</html>
คำอธิบาย
- แต่ละ Instance มี Private Variable ของตัวเอง (
personName) - ไม่ได้ "แชร์" Private Member ระหว่าง Instances (แต่ละคนมีของตัวเอง)
- แต่ "Privileged Methods" (
returnName) ถูกสร้างใหม่ทุก Instance (ไม่ได้อยู่ที่ Prototype)
วิธีแชร์ Private Data จริงๆ (Module Pattern)
const Person = (function() {
// Shared Private Data
const sharedSecret = "Shared among all instances";
let instanceCount = 0;
function Person(name) {
let personName = name; // Private per instance
instanceCount++;
this.getName = () => personName;
this.getSharedSecret = () => sharedSecret;
this.getInstanceCount = () => instanceCount;
}
return Person;
})();
const p1 = new Person("A");
const p2 = new Person("B");
console.log(p1.getSharedSecret()); // "Shared among all instances"
console.log(p1.getInstanceCount()); // 2
Modern Private Fields (ES2022)
class Person {
#name; // True Private Field
constructor(name) {
this.#name = name;
}
getName() {
return this.#name;
}
}
ผลลัพธ์
person1.returnName() = Rohan, person2.returnName() = Shawn, personName = undefined (เข้าถึงไม่ได้)