แนะนำ
ทุกคนคุ้นเคยกับตัวสร้าง แต่ถ้าคุณเป็นมือใหม่ก็ยังจำเป็นต้องเข้าใจว่าตัวสร้างคืออะไร ตัวสร้างใช้เพื่อสร้างประเภทวัตถุเฉพาะ - ไม่เพียง แต่ประกาศวัตถุที่ใช้ แต่ยังยอมรับพารามิเตอร์เพื่อตั้งค่าสมาชิกของวัตถุเมื่อวัตถุถูกสร้างขึ้นเป็นครั้งแรก คุณสามารถปรับแต่งตัวสร้างของคุณเองและประกาศคุณสมบัติหรือวิธีการของวัตถุประเภทที่กำหนดเอง
การใช้งานขั้นพื้นฐาน
ใน JavaScript ตัวสร้างมักจะถูกพิจารณาว่าใช้ในการใช้อินสแตนซ์ JavaScript ไม่มีแนวคิดของชั้นเรียน แต่มีตัวสร้างพิเศษ ใช้คำหลักใหม่เพื่อเรียกใช้ฟังก์ชันก่อนกำหนด คุณสามารถบอก JavaScript ว่าคุณต้องการสร้างวัตถุใหม่และการประกาศสมาชิกของวัตถุใหม่นั้นถูกกำหนดไว้ในตัวสร้าง ภายในตัวสร้างคำหลักนี้หมายถึงวัตถุที่สร้างขึ้นใหม่ การใช้งานขั้นพื้นฐานมีดังนี้:
การคัดลอกรหัสมีดังนี้:
Function Car (รุ่น, ปี, ไมล์) {
this.model = model;
this.year = ปี;
this.miles = ไมล์;
this.output = function () {
ส่งคืนสิ่งนี้ model + "left" + this.miles + "km";
-
-
var tom = รถใหม่ ("ลุง", 2009, 20000);
var dudu = รถใหม่ ("dudu", 2010, 5000);
console.log (tom.output ());
console.log (dudu.output ());
ตัวอย่างข้างต้นเป็นรูปแบบตัวสร้างที่ง่ายมาก แต่มันเป็นปัญหาเล็กน้อย ก่อนอื่นมันเป็นเรื่องยากมากที่จะใช้มรดก ประการที่สองเอาต์พุต () จะถูกกำหนดใหม่ทุกครั้งที่มีการสร้างวัตถุ วิธีที่ดีที่สุดคือการปล่อยให้ทุกอินสแตนซ์ของประเภทรถยนต์แบ่งปันวิธีการเอาท์พุท () นี้ดังนั้นหากมีอินสแตนซ์ขนาดใหญ่มันจะบันทึกหน่วยความจำจำนวนมาก
เพื่อแก้ปัญหานี้เราสามารถใช้วิธีการต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
Function Car (รุ่น, ปี, ไมล์) {
this.model = model;
this.year = ปี;
this.miles = ไมล์;
this.output = formatcar;
-
Function formatcar () {
ส่งคืนสิ่งนี้ model + "left" + this.miles + "km";
-
แม้ว่าวิธีนี้จะพร้อมใช้งาน แต่เรามีวิธีที่ดีกว่านี้
ตัวสร้างและต้นแบบ
มีคุณสมบัติต้นแบบในจาวาสคริปต์ที่เรียกว่าต้นแบบ เมื่อตัวสร้างถูกเรียกให้สร้างวัตถุคุณสมบัติทั้งหมดของต้นแบบตัวสร้างจะมีอยู่ในวัตถุที่สร้างขึ้นใหม่ ด้วยวิธีนี้อินสแตนซ์วัตถุรถยนต์หลายตัวสามารถแบ่งปันต้นแบบเดียวกันได้ มาขยายรหัสในตัวอย่างข้างต้น:
การคัดลอกรหัสมีดังนี้:
Function Car (รุ่น, ปี, ไมล์) {
this.model = model;
this.year = ปี;
this.miles = ไมล์;
-
-
หมายเหตุ: ที่นี่เราใช้ object.prototype ชื่อวิธีไม่ใช่ Object.prototype
ส่วนใหญ่จะใช้เพื่อหลีกเลี่ยงการเขียนใหม่ต้นแบบต้นแบบวัตถุ
-
car.prototype.output = function () {
ส่งคืนสิ่งนี้ model + "left" + this.miles + "km";
-
var tom = รถใหม่ ("ลุง", 2009, 20000);
var dudu = รถใหม่ ("dudu", 2010, 5000);
console.log (tom.output ());
console.log (dudu.output ());
ที่นี่เอาท์พุท () อินสแตนซ์เดียวสามารถแชร์และใช้ในอินสแตนซ์วัตถุรถยนต์ทั้งหมด
นอกจากนี้: เราขอแนะนำให้ผู้สร้างเริ่มต้นด้วยตัวอักษรตัวใหญ่เพื่อแยกฟังก์ชั่นสามัญ
คุณสามารถใช้ใหม่ได้หรือไม่?
ในตัวอย่างด้านบนรถฟังก์ชั่นถูกสร้างขึ้นโดยใช้ใหม่เพื่อสร้างวัตถุ มีเพียงวิธีเดียว? ในความเป็นจริงมีวิธีอื่น ๆ มาแสดงรายการสอง:
การคัดลอกรหัสมีดังนี้:
Function Car (รุ่น, ปี, ไมล์) {
this.model = model;
this.year = ปี;
this.miles = ไมล์;
// ปรับแต่งเอาต์พุตเอาต์พุต
this.output = function () {
ส่งคืนสิ่งนี้ model + "left" + this.miles + "km";
-
-
// วิธีที่ 1: เรียกว่าเป็นฟังก์ชัน
รถยนต์ ("ลุง", 2009, 20000); // เพิ่มลงในวัตถุหน้าต่าง
console.log (window.output ());
// วิธีที่ 2: โทรภายในขอบเขตของวัตถุอื่น
var o = วัตถุใหม่ ();
car.call (o, "dudu", 2010, 5000);
console.log (o.output ());
วิธีที่ 1 ของรหัสนี้ค่อนข้างพิเศษ หากเรียกใช้ฟังก์ชันใหม่โดยตรงสิ่งนี้จะชี้ไปที่หน้าต่างวัตถุทั่วโลก มายืนยันกันเถอะ:
การคัดลอกรหัสมีดังนี้:
// เป็นฟังก์ชั่นการโทร
var tom = car ("ลุง", 2009, 20000);
console.log (Typeof Tom); // "ไม่ได้กำหนด"
console.log (window.output ()); // "ลุงเดิน 20,000 กิโลเมตร"
ในเวลานี้วัตถุทอมไม่ได้กำหนดและ window.output () จะส่งออกผลลัพธ์อย่างถูกต้อง หากคุณใช้คำหลักใหม่ไม่มีปัญหาดังกล่าว การตรวจสอบมีดังนี้:
การคัดลอกรหัสมีดังนี้:
// ใช้คำหลักใหม่
var tom = รถใหม่ ("ลุง", 2009, 20000);
console.log (Typeof Tom); // "วัตถุ"
console.log (tom.output ()); // "ลุงเดิน 20,000 กิโลเมตร"
บังคับใหม่
ตัวอย่างข้างต้นแสดงปัญหาของการไม่ใช้ใหม่ ดังนั้นมีวิธีสำหรับตัวสร้างที่จะบังคับคำหลักใหม่หรือไม่? คำตอบคือใช่รหัสเหนือ:
การคัดลอกรหัสมีดังนี้:
Function Car (รุ่น, ปี, ไมล์) {
if (! (ตัวอย่างรถอินสแตนซ์นี้)) {
คืนรถใหม่ (รุ่นปีไมล์);
-
this.model = model;
this.year = ปี;
this.miles = ไมล์;
this.output = function () {
ส่งคืนสิ่งนี้ model + "left" + this.miles + "km";
-
-
var tom = รถใหม่ ("ลุง", 2009, 20000);
var dudu = car ("dudu", 2010, 5000);
console.log (Typeof Tom); // "วัตถุ"
console.log (tom.output ()); // "ลุงเดิน 20,000 กิโลเมตร"
console.log (typeof dudu); // "วัตถุ"
console.log (dudu.output ()); // "Dudu เดิน 5,000 กิโลเมตร"
โดยการตัดสินว่าอินสแตนซ์นี้เป็นรถยนต์เราตัดสินใจที่จะส่งคืนรถใหม่หรือดำเนินการต่อเพื่อดำเนินการรหัส หากใช้คำหลักใหม่ (อินสแตนซ์ของรถคันนี้) เป็นจริงและการกำหนดพารามิเตอร์ต่อไปนี้จะดำเนินต่อไป หากไม่ได้ใช้ใหม่ (อินสแตนซ์ของรถคันนี้) เป็นเท็จและอินสแตนซ์ใหม่จะถูกส่งกลับอีกครั้ง
ฟังก์ชั่น wrapper ดั้งเดิม
มี 3 ฟังก์ชั่น wrapper ดั้งเดิมใน JavaScript: หมายเลข, สตริง, บูลีน, บางครั้งก็ใช้:
การคัดลอกรหัสมีดังนี้:
// ใช้ฟังก์ชัน wrapper ดั้งเดิม
var s = สตริงใหม่ ("สตริงของฉัน");
var n = หมายเลขใหม่ (101);
var b = บูลีนใหม่ (จริง);
// แนะนำสิ่งนี้
var s = "สตริงของฉัน";
var n = 101;
var b = true;
แนะนำให้ใช้ฟังก์ชั่น wrapper เหล่านี้เมื่อคุณต้องการรักษาสถานะตัวเลข สำหรับความแตกต่างคุณสามารถอ้างถึงรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
// สตริงต้นฉบับ
var greet = "สวัสดีที่นั่น";
// ใช้วิธีแยก () เพื่อแยก
greet.split ('') [0]; // "สวัสดี"
// การเพิ่มแอตทริบิวต์ใหม่ในประเภทดั้งเดิมจะไม่รายงานข้อผิดพลาด
ทักทาย. smile = true;
// ไม่สามารถรับค่านี้ได้ (เราพูดถึงสาเหตุในการใช้งานบทที่ 18 ECMASCRIPT)
console.log (typeof greet.smile); // "ไม่ได้กำหนด"
// สตริงต้นฉบับ
var greet = สตริงใหม่ ("สวัสดีที่นั่น");
// ใช้วิธีแยก () เพื่อแยก
greet.split ('') [0]; // "สวัสดี"
// การเพิ่มแอตทริบิวต์ใหม่ลงในประเภทฟังก์ชัน wrapper จะไม่รายงานข้อผิดพลาด
ทักทาย. smile = true;
// คุณสมบัติใหม่สามารถเข้าถึงได้ตามปกติ
console.log (typeof greet.smile); // "บูลีน"
สรุป
บทนี้ส่วนใหญ่อธิบายถึงความแตกต่างระหว่างการใช้โหมดตัวสร้างวิธีการโทรและคำหลักใหม่ ฉันหวังว่าทุกคนจะให้ความสนใจกับมันเมื่อใช้มัน
การอ้างอิง: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript