JavaScript Object Constructors
ตัวอย่าง
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
ถือเป็นแนวปฏิบัติที่ดีในการตั้งชื่อฟังก์ชันคอนสตรัคเตอร์ด้วยอักษรตัวแรกของตัวพิมพ์ใหญ่
ประเภทอ็อบเจ็กต์ (พิมพ์เขียว) (คลาส)
ตัวอย่างจากบทที่แล้วมีจำกัด พวกเขาสร้างวัตถุเพียงชิ้นเดียว
บางครั้งเราต้องการ " พิมพ์เขียว " เพื่อสร้างวัตถุหลายชิ้นที่เป็น "ประเภท" เดียวกัน
วิธีสร้าง "ประเภทวัตถุ" คือการใช้ฟังก์ชันตัว สร้างวัตถุ
ในตัวอย่างข้างต้นfunction Person()เป็นฟังก์ชันตัวสร้างอ็อบเจ็กต์
ออบเจ็กต์ประเภทเดียวกันถูกสร้างขึ้นโดยการเรียกใช้ฟังก์ชันคอนสตรัคเตอร์ด้วยnewคีย์เวิร์ด:
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
คีย์เวิร์ดนี้ _
ใน JavaScript สิ่งที่เรียกว่าthisเป็นวัตถุที่ "เป็นเจ้าของ" รหัส
เมื่อใช้ในอ็อบเจกต์ ค่าของthisก็คือตัวอ็อบเจกต์เอง
ในฟังก์ชันคอนสตรัthisคเตอร์ไม่มีค่า เป็นการทดแทนวัตถุใหม่ ค่าthisจะกลายเป็นวัตถุใหม่เมื่อมีการสร้างวัตถุใหม่
โปรดทราบว่าthisไม่ใช่ตัวแปร มันคือคีย์เวิร์ด คุณไม่สามารถเปลี่ยนค่าthisของ
การเพิ่มคุณสมบัติให้กับวัตถุ
การเพิ่มคุณสมบัติใหม่ให้กับวัตถุที่มีอยู่นั้นเป็นเรื่องง่าย:
ตัวอย่าง
myFather.nationality = "English";
พร็อพเพอร์ตี้จะถูกเพิ่มใน myFather ไม่ใช่เพื่อแม่ของฉัน (ห้ามมิให้บุคคลอื่นคัดค้าน)
การเพิ่มวิธีการให้กับวัตถุ
การเพิ่มวิธีการใหม่ให้กับวัตถุที่มีอยู่นั้นง่ายมาก:
ตัวอย่าง
myFather.name = function () {
return this.firstName + " " + this.lastName;
};
วิธีการจะถูกเพิ่มใน myFather ไม่ใช่เพื่อแม่ของฉัน (ห้ามมิให้บุคคลอื่นคัดค้าน)
การเพิ่มคุณสมบัติให้กับตัวสร้าง
คุณไม่สามารถเพิ่มคุณสมบัติใหม่ให้กับตัวสร้างวัตถุแบบเดียวกับที่คุณเพิ่มคุณสมบัติใหม่ให้กับวัตถุที่มีอยู่:
ตัวอย่าง
Person.nationality = "English";
ในการเพิ่มคุณสมบัติใหม่ให้กับตัวสร้าง คุณต้องเพิ่มคุณสมบัตินั้นในฟังก์ชันตัวสร้าง:
ตัวอย่าง
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
วิธีนี้คุณสมบัติของวัตถุสามารถมีค่าเริ่มต้นได้
การเพิ่มวิธีการให้กับตัวสร้าง
ฟังก์ชันคอนสตรัคเตอร์ของคุณยังสามารถกำหนดวิธีการได้:
ตัวอย่าง
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.name = function() {
return this.firstName + " " + this.lastName;
};
}
คุณไม่สามารถเพิ่มวิธีการใหม่ให้กับตัวสร้างวัตถุแบบเดียวกับที่คุณเพิ่มวิธีการใหม่ให้กับวัตถุที่มีอยู่
การเพิ่มเมธอดให้กับตัวสร้างอ็อบเจ็กต์ต้องทำภายในฟังก์ชันคอนสตรัคเตอร์:
ตัวอย่าง
function Person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}ฟังก์ชัน changeName() กำหนดค่าของชื่อให้กับคุณสมบัตินามสกุลของบุคคล
ตอนนี้คุณสามารถลอง:
myMother.changeName("Doe");
JavaScript รู้ว่าคุณกำลังพูดถึงใครโดย "แทนที่" สิ่งนี้ด้วยmyMother
ตัวสร้าง JavaScript ในตัว
JavaScript มีตัวสร้างในตัวสำหรับวัตถุดั้งเดิม:
new String() // A new String object
new Number() // A new Number object
new Boolean() // A new Boolean object
new Object() // A new Object object
new Array() // A new Array object
new RegExp() // A new RegExp object
new Function() // A new Function object
new Date() // A new Date object
วัตถุMath()ไม่อยู่ในรายการ Mathเป็นวัตถุสากล newไม่สามารถใช้
คีย์เวิร์ดMathกับ
เธอรู้รึเปล่า?
ดังที่คุณเห็นด้านบน JavaScript มีเวอร์ชันออบเจ็กต์ของประเภทข้อมูลดั้งเดิม, String, Numberและ Booleanแต่ไม่มีเหตุผลที่จะสร้างวัตถุที่ซับซ้อน ค่าดั้งเดิมเร็วกว่ามาก:
ใช้ตัวอักษรสตริง""แทนnew String().
ใช้ตัวอักษรตัวเลข50แทนnew Number().
ใช้ตัวอักษรบูลีนtrue / falseแทนnew Boolean().
ใช้ตัวอักษรอ็อบเจ็กต์{}แทนnew Object().
ใช้ตัวอักษรอาร์เรย์[]แทนnew Array().
ใช้รูปแบบตัวอักษร/()/แทนnew RegExp().
ใช้นิพจน์ฟังก์ชัน() {}แทนnew Function().
ตัวอย่าง
let x1 = ""; // new primitive string
let x2 = 0; // new primitive number
let x3 = false; // new primitive boolean
const x4 = {}; // new Object object
const x5 = []; // new Array object
const x6 = /()/ // new RegExp object
const x7 = function(){}; // new function
วัตถุสตริง
โดยปกติ สตริงจะถูกสร้างขึ้นเป็นแบบพื้นฐาน: firstName = "John"
แต่สามารถสร้างสตริงเป็นวัตถุได้โดยใช้newคำสำคัญ:
firstName = new String("John")
เรียนรู้ว่าทำไมไม่ควรสร้างสตริงเป็นอ็อบเจ็กต์ในบทที่ JS Strings
วัตถุจำนวน
โดยปกติ ตัวเลขจะถูกสร้างขึ้นเป็นพื้นฐาน: x = 30
แต่ตัวเลขสามารถสร้างเป็นวัตถุได้โดยใช้newคำสำคัญ:
x = new
Number(30)
เรียนรู้ว่าทำไมไม่ควรสร้างตัวเลขเป็นวัตถุในบทที่ JS Numbers
วัตถุบูลีน
โดยปกติ บูลีนจะถูกสร้างขึ้นเป็นแบบพื้นฐาน: x =
false
แต่สามารถสร้างบูลีนเป็นวัตถุได้โดยใช้newคีย์เวิร์ด:
x = new Boolean(false)
เรียนรู้ว่าทำไมไม่ควรสร้างบูลีนเป็นอ็อบเจ็กต์ในบทที่ JS Booleans