วัตถุคือสิ่งที่ผู้คนต้องการศึกษาตั้งแต่จำนวนเต็มที่ง่ายที่สุดไปจนถึงเครื่องบินที่ซับซ้อน ฯลฯ ซึ่งไม่เพียง แต่สามารถเป็นตัวแทนของสิ่งที่เป็นรูปธรรม แต่ยังรวมถึงกฎนามธรรมแผนหรือเหตุการณ์ที่เป็นนามธรรม -ยกมาจากสารานุกรม Baidu
การเขียนโปรแกรมเชิงวัตถุเป็นรูปแบบการเขียนโปรแกรมที่ได้รับความนิยมมากที่สุดในปัจจุบัน แต่มันก็น่าผิดหวังที่เป็นจาวาสคริปต์ส่วนหน้าที่ใช้กันอย่างแพร่หลายมากที่สุดไม่รองรับวัตถุที่มุ่งเน้น
JavaScript ไม่มีอักขระควบคุมการเข้าถึง แต่ไม่ได้กำหนดคลาสคำหลัก แต่ไม่รองรับการขยายหรือลำไส้ใหญ่ที่สืบทอดมาและไม่ได้ใช้เสมือนจริงเพื่อรองรับฟังก์ชั่นเสมือนจริง อย่างไรก็ตาม JavaScript เป็นภาษาที่ยืดหยุ่น ลองมาดูกันว่า JavaScript โดยไม่ต้องใช้คลาสคำหลักใช้คำจำกัดความของคลาสและสร้างวัตถุ
กำหนดคลาสและสร้างวัตถุอินสแตนซ์ของคลาส
ใน JavaScript เราใช้ฟังก์ชันเพื่อกำหนดคลาสดังนี้:
การคัดลอกรหัสมีดังนี้:
รูปร่างฟังก์ชัน ()
-
var x = 1;
var y = 2;
-
คุณอาจพูดสงสัย? นี่ไม่ใช่ฟังก์ชั่นที่กำหนด? ถูกต้องนี่คือฟังก์ชั่นที่กำหนด เรากำหนดฟังก์ชั่นรูปร่างและเริ่มต้น x และ y อย่างไรก็ตามหากคุณดูจากมุมมองอื่นนี่คือการกำหนดคลาสรูปร่างซึ่งมีคุณสมบัติสองคุณสมบัติ x และ y และค่าเริ่มต้นคือ 1 และ 2 ตามลำดับ อย่างไรก็ตามคำหลักที่เรากำหนดคลาสเป็นฟังก์ชันมากกว่าคลาส
จากนั้นเราสามารถสร้างวัตถุ Ashape ของคลาสรูปร่างดังนี้:
การคัดลอกรหัสมีดังนี้:
var ashape = new Shape ();
กำหนดคุณสมบัติของรัฐและเอกชน
เราได้สร้างวัตถุ Ashape แต่เมื่อเราพยายามเข้าถึงคุณสมบัติของเราเราจะได้รับข้อผิดพลาดเช่นนี้:
การคัดลอกรหัสมีดังนี้:
ashape.x = 1;
นี่แสดงให้เห็นว่าคุณสมบัติที่กำหนดด้วย VAR นั้นเป็นส่วนตัว เราจำเป็นต้องใช้คำหลักนี้เพื่อกำหนดคุณลักษณะสาธารณะ
การคัดลอกรหัสมีดังนี้:
รูปร่างฟังก์ชัน ()
-
this.x = 1;
this.y = 2;
-
ด้วยวิธีนี้เราสามารถเข้าถึงคุณสมบัติรูปร่างเช่น:
การคัดลอกรหัสมีดังนี้:
ashape.x = 2;
ตกลงเราสามารถสรุปได้จากรหัสด้านบน: การใช้ VAR เพื่อกำหนดคุณลักษณะส่วนตัวของคลาสและการใช้สิ่งนี้เพื่อกำหนดแอตทริบิวต์สาธารณะของคลาส
กำหนดวิธีการสาธารณะและส่วนตัว
ใน JavaScript ฟังก์ชั่นเป็นอินสแตนซ์ของคลาสฟังก์ชั่นและฟังก์ชั่นนั้นได้รับการสืบทอดทางอ้อมจากวัตถุดังนั้นฟังก์ชันจึงเป็นวัตถุ ดังนั้นเราสามารถสร้างฟังก์ชั่นโดยใช้วิธีการกำหนด แน่นอนเรายังสามารถกำหนดฟังก์ชั่นให้กับตัวแปรแอตทริบิวต์ของคลาส จากนั้นตัวแปรแอ็ตทริบิวต์นี้สามารถเรียกได้ว่าเป็นวิธีการเพราะเป็นฟังก์ชันที่เรียกใช้งานได้ รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
รูปร่างฟังก์ชัน ()
-
var x = 0;
var y = 1;
this.draw = function ()
-
//พิมพ์;
-
-
เรากำหนดการวาดในรหัสด้านบนและกำหนดฟังก์ชั่นให้กับมัน ด้านล่างเราสามารถเรียกฟังก์ชั่นนี้ผ่าน Ashape ซึ่งเรียกว่าวิธีการสาธารณะใน OOP เช่น:
การคัดลอกรหัสมีดังนี้:
ashape.draw ();
หากกำหนดด้วย VAR แล้วการวาดจะกลายเป็นส่วนตัวซึ่งเรียกว่าวิธีการส่วนตัวใน OOP เช่น:
การคัดลอกรหัสมีดังนี้:
รูปร่างฟังก์ชัน ()
-
var x = 0;
var y = 1;
var draw = function ()
-
//พิมพ์;
-
-
ด้วยวิธีนี้คุณไม่สามารถใช้ Ashape.Draw เพื่อเรียกใช้ฟังก์ชั่นนี้
ตัวสร้าง
JavaScript ไม่รองรับ OOP ดังนั้นแน่นอนว่าไม่มีตัวสร้าง อย่างไรก็ตามเราสามารถจำลองคอนสตรัคเตอร์ด้วยตนเองและทำให้วัตถุเรียกโดยอัตโนมัติเมื่อสร้างขึ้น รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
รูปร่างฟังก์ชัน ()
-
var init = function ()
-
// รหัสคอนสตรัคเตอร์
-
init ();
-
ในตอนท้ายของรูปร่างเราเรียกว่าฟังก์ชัน init จากนั้นเมื่อสร้างวัตถุรูปร่างเริ่มต้นจะถูกเรียกโดยอัตโนมัติซึ่งสามารถจำลองคอนสตรัคเตอร์ของเราได้
ตัวสร้างที่มีพารามิเตอร์
จะทำให้ตัวสร้างใช้พารามิเตอร์ได้อย่างไร? ในความเป็นจริงมันง่ายมาก เพียงแค่เขียนพารามิเตอร์ที่จะส่งผ่านไปยังรายการพารามิเตอร์ฟังก์ชันเช่น:
การคัดลอกรหัสมีดังนี้:
รูปร่างฟังก์ชั่น (ขวาน, ay)
-
var x = 0;
var y = 0;
var init = function ()
-
// ตัวสร้าง
x = ขวาน;
y = ay;
-
init ();
-
ด้วยวิธีนี้เราสามารถสร้างวัตถุเช่นนี้:
การคัดลอกรหัสมีดังนี้:
var ashape = รูปร่างใหม่ (0,1);
คุณสมบัติคงที่และวิธีการคงที่
จะกำหนดคุณสมบัติและวิธีการคงที่ใน JavaScript ได้อย่างไร? ดังที่แสดงด้านล่าง:
การคัดลอกรหัสมีดังนี้:
รูปร่างฟังก์ชั่น (ขวาน, ay)
-
var x = 0;
var y = 0;
var init = function ()
-
// ตัวสร้าง
x = ขวาน;
y = ay;
-
init ();
-
shape.count = 0; // กำหนดจำนวนคุณสมบัติคงที่ซึ่งเป็นของคลาสไม่ใช่กับวัตถุ
shape.staticMethod = function () {}; // กำหนดวิธีการคงที่
ด้วยคุณสมบัติและวิธีการคงที่เราสามารถเข้าถึงได้ด้วยชื่อคลาสดังนี้:
การคัดลอกรหัสมีดังนี้:
การแจ้งเตือน (ashape.count);
ashape.staticmethod ();
หมายเหตุ: คุณสมบัติและวิธีการคงที่เป็นทั้งสาธารณะ จนถึงตอนนี้ฉันไม่รู้วิธีสร้างคุณสมบัติและวิธีการคงที่ส่วนตัว ~
เข้าถึงอสังหาริมทรัพย์ของภาครัฐและเอกชนของชั้นเรียนนี้ด้วยวิธีการ
การเข้าถึงคุณสมบัติของคุณเองในวิธีการเรียน วิธีการเข้าถึงของ JavaScript สำหรับอสังหาริมทรัพย์ภาครัฐและเอกชนนั้นแตกต่างกัน โปรดดูรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
รูปร่างฟังก์ชั่น (ขวาน, ay)
-
var x = 0;
var y = 0;
this.gx = 0;
this.gy = 0;
var init = function ()
-
x = ax; // เพิ่มแอตทริบิวต์ส่วนตัวและเขียนชื่อตัวแปรโดยตรง
y = ay;
this.gx = ax; // ในการเข้าถึงแอตทริบิวต์สาธารณะคุณต้องเพิ่มสิ่งนี้ก่อนชื่อตัวแปร
this.gy = ay;
-
init ();
-
สิ่งที่ควรทราบเกี่ยวกับเรื่องนี้
จากประสบการณ์ของฉันสิ่งนี้ในชั้นเรียนไม่ได้ชี้ไปที่วัตถุของเราเองเสมอไป เหตุผลหลักคือ JavaScript ไม่ใช่ภาษา OOP และฟังก์ชั่นและคลาสถูกกำหนดโดยฟังก์ชั่นซึ่งแน่นอนว่าจะทำให้เกิดปัญหาเล็กน้อย
สถานการณ์ที่ตัวชี้นี้ชี้อย่างไม่ถูกต้องโดยทั่วไปในการประมวลผลเหตุการณ์ เราต้องการให้สมาชิกฟังก์ชั่นของวัตถุบางอย่างตอบสนองต่อเหตุการณ์ เมื่อเหตุการณ์ถูกทริกเกอร์ระบบจะเรียกฟังก์ชั่นสมาชิกของเรา อย่างไรก็ตามตัวชี้ที่ผ่านมานั้นไม่ใช่วัตถุของเราเองอีกต่อไป แน่นอนว่ามันจะเป็นข้อผิดพลาดในการเรียกสิ่งนี้ในฟังก์ชั่นสมาชิกในเวลานี้
วิธีแก้ปัญหาคือการบันทึกสิ่งนี้ลงในคุณสมบัติส่วนตัวที่จุดเริ่มต้นของคลาสนิยาม ในภายหลังเราสามารถใช้คุณสมบัตินี้แทนสิ่งนี้ ฉันใช้ตัวชี้นี้ด้วยวิธีนี้ค่อนข้างปลอดภัยและปราศจากความกังวล ~
มาแก้ไขรหัสเพื่อแก้ปัญหานี้กันเถอะ โดยการเปรียบเทียบรหัสในส่วนที่ 6 คุณจะเข้าใจอย่างแน่นอน:
การคัดลอกรหัสมีดังนี้:
รูปร่างฟังก์ชั่น (ขวาน, ay)
-
var _this = this; // บันทึกสิ่งนี้และใช้ _ นี่แทนสิ่งนี้ในอนาคตเพื่อที่คุณจะได้ไม่สับสนกับสิ่งนี้
var x = 0;
var y = 0;
_this.gx = 0;
_this.gy = 0;
var init = function ()
-
x = ax; // เพิ่มแอตทริบิวต์ส่วนตัวและเขียนชื่อตัวแปรโดยตรง
y = ay;
_this.gx = ax; // ในการเข้าถึงแอตทริบิวต์สาธารณะคุณต้องเพิ่มสิ่งนี้ก่อนชื่อตัวแปร
_this.gy = ay;
-
init ();
-
ข้างต้นเราได้พูดคุยเกี่ยวกับวิธีการกำหนดคลาสใน JavaScript สร้างวัตถุคลาสสร้างคุณสมบัติและวิธีการสาธารณะและส่วนตัวสร้างคุณสมบัติและวิธีการคงที่จำลองตัวสร้างและหารือเกี่ยวกับข้อผิดพลาดนี้
นั่นคือทั้งหมดที่เกี่ยวกับการใช้ OOP ใน JavaScript ข้างต้นเป็นเนื้อหาที่ใช้งานได้จริงที่สุด โดยทั่วไป JavaScript กำหนดคลาสและการใช้รหัสด้านบนเพื่อสร้างวัตถุก็เพียงพอแล้ว แน่นอนคุณยังสามารถใช้ mootools หรือต้นแบบเพื่อกำหนดคลาสและสร้างวัตถุ ฉันใช้เฟรมเวิร์ก Mootools และรู้สึกดีมาก มันสมบูรณ์แบบมากขึ้นสำหรับการจำลองคลาส JavaScript และรองรับการสืบทอดคลาส ผู้อ่านที่สนใจสามารถลองได้ แน่นอนถ้าคุณใช้เฟรมเวิร์กคุณต้องรวมไฟล์ส่วนหัว JS ที่เกี่ยวข้องในหน้าเว็บของคุณ ดังนั้นฉันยังคงหวังว่าผู้อ่านสามารถสร้างชั้นเรียนได้โดยไม่ต้องมีกรอบ ด้วยวิธีนี้รหัสมีประสิทธิภาพมากขึ้นและคุณยังสามารถเห็นได้ว่ามันไม่ลำบากในการสร้างคลาสที่เรียบง่าย ~