JavaScript Object Prototypes
ออบเจ็กต์ JavaScript ทั้งหมดสืบทอดคุณสมบัติและวิธีการจากต้นแบบ
ในบทที่แล้ว เราได้เรียนเกี่ยวกับการใช้object constructor :
ตัวอย่าง
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
นอกจากนี้เรายังได้เรียนรู้ว่าคุณไม่ สามารถ เพิ่มคุณสมบัติใหม่ให้กับตัวสร้างวัตถุที่มีอยู่ได้:
ตัวอย่าง
Person.nationality = "English";
ในการเพิ่มคุณสมบัติใหม่ให้กับตัวสร้าง คุณต้องเพิ่มคุณสมบัตินั้นในฟังก์ชันตัวสร้าง:
ตัวอย่าง
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
มรดกต้นแบบ
ออบเจ็กต์ JavaScript ทั้งหมดสืบทอดคุณสมบัติและวิธีการจากต้นแบบ:
Date
วัตถุที่สืบทอดมาจากDate.prototype
Array
วัตถุที่สืบทอดมาจากArray.prototype
Person
วัตถุที่สืบทอดมาจากPerson.prototype
อยู่Object.prototype
บนสุดของห่วงโซ่มรดกต้นแบบ:
Date
ออบเจ็กต์ อArray
อบเจ็กต์ และPerson
อ็อบเจ็กต์สืบทอดมาจากObject.prototype
.
การเพิ่มคุณสมบัติและเมธอดให้กับออบเจกต์
บางครั้งคุณต้องการเพิ่มคุณสมบัติ (หรือวิธีการ) ใหม่ให้กับวัตถุที่มีอยู่ทั้งหมดของประเภทที่กำหนด
บางครั้งคุณต้องการเพิ่มคุณสมบัติ (หรือวิธีการ) ใหม่ให้กับตัวสร้างวัตถุ
การใช้คุณสมบัติต้นแบบ
คุณสมบัติ JavaScript prototype
ช่วยให้คุณเพิ่มคุณสมบัติใหม่ให้กับตัวสร้างวัตถุ:
ตัวอย่าง
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
คุณสมบัติ JavaScript prototype
ยังช่วยให้คุณเพิ่มวิธีการใหม่ให้กับตัวสร้างอ็อบเจ็กต์:
ตัวอย่าง
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};
แก้ไขเฉพาะต้นแบบ ของคุณ เอง ห้ามแก้ไขต้นแบบของวัตถุ JavaScript มาตรฐาน