ทุกอย่างใน JavaScript เป็นวัตถุ: สตริง, อาร์เรย์, ค่า, ฟังก์ชัน ฯลฯ ไม่มีแนวคิดใน JS
แต่เราสามารถใช้คุณสมบัติทางไวยากรณ์ของ JS เพื่อสร้างวัตถุด้วยแนวคิดของคลาส
วิธีดั้งเดิม
คัดลอกรหัสรหัสดังนี้:
<script type = "text/javascript">
var obj = วัตถุใหม่ ();
obj.name = "koji";
obj.age = 21;
obj.showname = function () {// เพิ่มเมธอดลงในวัตถุ
การแจ้งเตือน (this.name);
-
obj.showage = function () {
การแจ้งเตือน (this.age);
-
obj.showname ();
obj.showage ();
</script>
วิธีการข้างต้นสร้างวัตถุผ่านคำหลักใหม่จากนั้นเพิ่มคุณสมบัติและวิธีการของคุณสมบัติของภาษาไดนามิกตาม JS
สร้างวัตถุ ในหมู่พวกเขานี่เป็นวัตถุที่เรียกวิธีการ
ปัญหาในวิธีนี้คือถ้าคุณต้องการสร้างวัตถุหลายครั้งรหัสจะต้องทำซ้ำหลายครั้งซึ่งไม่เอื้อต่อการใช้รหัสซ้ำ
วิธีโรงงาน
คัดลอกรหัสรหัสดังนี้:
<script type = "text/javascript">
ฟังก์ชั่น createObj () {
var obj = วัตถุใหม่ ();
obj.name = "koji";
obj.age = 21;
obj.showname = function () {
การแจ้งเตือน (this.name);
-
obj.showage = function () {
การแจ้งเตือน (this.age);
-
ส่งคืน OBJ;
-
var obj1 = createObj ();
var obj2 = createobj ();
obj1.showname ();
obj2.showage ();
</script>
วิธีนี้ปรับปรุงอัตราการใช้รหัสซ้ำและยังสามารถเปลี่ยนวิธีการโรงงานและผ่านการกำหนดพารามิเตอร์
คัดลอกรหัสรหัสดังนี้:
<script type = "text/javascript">
ฟังก์ชั่น createObj (ชื่ออายุ) {// เมื่อสร้างวัตถุพารามิเตอร์การเริ่มต้นสามารถผ่านได้
var obj = วัตถุใหม่ ();
obj.name = ชื่อ;
obj.age = อายุ;
obj.showname = function () {
การแจ้งเตือน (this.name);
-
obj.showage = function () {
การแจ้งเตือน (this.age);
-
ส่งคืน OBJ;
-
var obj1 = createobj ("koji", 22);
var obj2 = createobj ("luo", 21);
obj1.showname ();
obj1.showage ();
obj2.showname ();
obj2.showage ();
</script>
แม้ว่าวิธีการข้างต้นสามารถเพิ่มอัตราการต่ออายุของรหัสได้ แต่ก็มีข้อบกพร่องที่ดีเมื่อเทียบกับแนวคิดของคลาสที่มุ่งเน้นวัตถุ ก๋วยเตี๋ยว
ภาพสัมพัทธ์เน้นคุณสมบัติของวัตถุและวิธีการของวัตถุถูกแชร์ และวิธีการจากโรงงานด้านบนเพื่อสร้างวัตถุให้กันและกัน
วัตถุสร้างวิธีการเห็นแก่ตัวของตัวเอง ในเวลาเดียวกันวิธีเดียวกันในการสร้างตรรกะเดียวกันสำหรับแต่ละวัตถุคือการเสียหน่วยความจำ ปรับปรุงดังนี้
คัดลอกรหัสรหัสดังนี้:
<span style = "ตัวอักษรขนาด: 14px;"> <script type = "text/javascript">
ฟังก์ชั่น createObj (ชื่ออายุ) {{
var obj = วัตถุใหม่ ();
obj.name = ชื่อ;
obj.age = อายุ;
obj.showname = sholdame;
obj.showage = Showage;
ส่งคืน OBJ;
-
ฟังก์ชั่น sholdame () {// ฟังก์ชันยังเป็นวัตถุ
การแจ้งเตือน (this.name);
-
ฟังก์ชั่นแสดง () {
การแจ้งเตือน (this.age);
-
var obj1 = createobj ("koji", 22);
var obj2 = createobj ("luo", 21);
obj1.showname ();
obj1.showage ();
obj2.showname ();
obj2.showage ();
</script> </span>
วัตถุฟังก์ชั่นที่กล่าวมาข้างต้นถูกกำหนดเพื่อแก้ปัญหาส่วนตัวของวัตถุฟังก์ชั่นการถือวัตถุที่แตกต่างกัน ตอนนี้วัตถุทั้งหมดคือ
ถือการอ้างอิงไปยังสองฟังก์ชั่นข้างต้น แต่ด้วยวิธีนี้ฟังก์ชั่นของวัตถุได้กลายเป็นอิสระและไม่เกี่ยวข้องกับวัตถุ นี้และ
วิธีการเฉพาะสำหรับวิธีการเฉพาะวัตถุที่มุ่งเน้นไม่ตรงกับความคิดของหมวดหมู่เฉพาะ
วิธีการฟังก์ชั่นการก่อสร้าง
คัดลอกรหัสรหัสดังนี้:
<script type = "text/javascript">
// กำหนดคอนสตรัคเตอร์เพื่อสร้างวัตถุที่เกี่ยวข้อง
ฟังก์ชั่นบุคคล (ชื่ออายุ) {
// เมื่อเรียกบุคคลใหม่ก่อนที่จะดำเนินการรหัสบรรทัดแรกบุคคลคือวัตถุบุคคลและวัตถุอยู่ในหน่วยความจำ
// การกำหนดดัชนีจะถูกกำหนดให้กับคำหลักนี้ในเวลานี้คุณสามารถใช้งานวัตถุที่สร้างขึ้นใหม่ผ่านคำหลักนี้
this.name = name; // คำหลักนี้ต้องไม่น้อย สำหรับวัตถุปัจจุบันนั่นคือการกำหนดแอตทริบิวต์ชื่อของวัตถุที่อ้างอิงโดยคำหลักนี้
// มันเทียบเท่ากับการเพิ่มคุณสมบัติชื่อให้กับวัตถุปัจจุบันจากนั้นกำหนดค่าให้กับแอตทริบิวต์ชื่อ
this.age = อายุ;
this.showname = function () {// เพิ่มเมธอดลงในวัตถุปัจจุบัน
การแจ้งเตือน (this.name);
-
this.showage = function () {
การแจ้งเตือน (this.age);
-
// ส่งคืนวัตถุปัจจุบันไปยังตัวแปรทางด้านซ้ายของสัญลักษณ์การกำหนด (ไม่จำเป็นต้องใช้ return)
-
var obj1 = คนใหม่ ("Koji", 22);
var obj2 = บุคคลใหม่ ("luo", 21);
obj1.showname ();
obj1.showage ();
obj2.showname ();
obj2.showage ();
</script>
วิธีการสร้างฟังก์ชั่นนั้นเหมือนกับวิธีโรงงานและจะสร้างวัตถุฟังก์ชันพิเศษสำหรับแต่ละวัตถุ แน่นอนคุณสามารถใส่ฟังก์ชั่นเหล่านี้ได้
วัตถุถูกกำหนดไว้นอกตัวสร้างเพื่อให้วัตถุและวิธีการเป็นอิสระจากกัน
วิธีการต้นแบบ: คุณสมบัติต้นแบบของวัตถุที่ใช้โดยวิธีนี้
คัดลอกรหัสรหัสดังนี้:
script type = "text/javascript">
function person () {} // กำหนดฟังก์ชั่นอากาศที่กำหนดไว้และไม่สามารถผ่านพารามิเตอร์
// ให้วิธีการทั้งหมดของแอตทริบิวต์ทั้งหมดกับแอตทริบิวต์ต้นแบบ
person.prototype.name = "koji";
person.prototype.age = 22;
person.prototype.showname = function () {// เพิ่มเมธอด
การแจ้งเตือน (this.name);
-
person.prototype.showage = function () {
การแจ้งเตือน (this.age);
-
var obj1 = คนใหม่ ();
var obj2 = บุคคลใหม่ ();
obj1.showname ();
obj1.showage ();
obj2.showname ();
obj2.showage ();
</script>
เมื่อวัตถุบุคคลถูกสร้างขึ้นแอตทริบิวต์ของต้นแบบจะถูกกำหนดให้กับวัตถุใหม่ จากนั้นคุณลักษณะและวิธีการจะถูกแชร์
ปัญหาของวิธีนี้คือไม่สามารถส่งต่อตัวสร้างและวัตถุที่สร้างใหม่แต่ละชิ้นมีค่าเริ่มต้น ประการที่สองการแชร์วิธีการไม่แบ่งปัน
ปัญหาใด ๆ แต่การแบ่งปันแอตทริบิวต์เป็นปัญหาเมื่อแอตทริบิวต์เป็นวัตถุที่สามารถเปลี่ยนสถานะได้
คัดลอกรหัสรหัสดังนี้:
<script type = "text/javascript">
function person () {} // กำหนดฟังก์ชั่นอากาศที่กำหนดไว้และไม่สามารถผ่านพารามิเตอร์
person.prototype.age = 22;
person.prototype.array = new Array ("Koji", "Luo");
person.prototype.showage = function () {
การแจ้งเตือน (this.age);
-
person.prototype.showarray = function () {
การแจ้งเตือน (this.array);
-
var obj1 = คนใหม่ ();
var obj2 = บุคคลใหม่ ();
obj1.array.push ("kyo");
obj1.showarray ();
obj2.showarray ();
</script>
เมื่อรหัสข้างต้นเพิ่มองค์ประกอบให้กับแอตทริบิวต์ของ OBJ1 ในแอตทริบิวต์ของ OBJ1 องค์ประกอบของแอตทริบิวต์ ARRA ของ OBJ2 ก็จะตามมา
ผลกระทบคือคุณสมบัติอาร์เรย์ของวัตถุ OBJ1 และ OBJ2 เสนอราคาวัตถุอาร์เรย์เดียวกันดังนั้นเปลี่ยนอาร์เรย์นี้
วัตถุคุณลักษณะของวัตถุอาร์เรย์จะได้รับผลกระทบตามธรรมชาติตามธรรมชาติ
วิธีการสร้างตัวสร้าง/ต้นแบบ
ใช้ตัวสร้างเพื่อกำหนดคุณลักษณะของวัตถุและใช้ต้นแบบเพื่อกำหนดวัตถุเพื่อให้สามารถทำได้
การแบ่งปันส่วนตัวและวิธีการ
คัดลอกรหัสรหัสดังนี้:
<script type = "text/javascript">
ฟังก์ชั่นบุคคล (ชื่ออายุ) {
this.name = ชื่อ;
this.age = อายุ;
this.array = new Array ("Koji", "Luo");
-
person.prototype.showname = function () {
การแจ้งเตือน (this.name);
-
person.prototype.showarray = function () {
การแจ้งเตือน (this.array);
-
var obj1 = คนใหม่ ("Koji", 22);
var obj2 = บุคคลใหม่ ("luo", 21);
obj1.array.push ("kyo");
obj1.showarray ();
obj1.showname ();
obj2.showarray ();
obj2.showname ();
</script>
หลังจากแอตทริบิวต์เป็นส่วนตัวการเปลี่ยนคุณลักษณะที่เกี่ยวข้องจะไม่ส่งผลกระทบต่อวัตถุอื่น ๆ ในเวลาเดียวกันวิธีการใช้งานร่วมกันโดยแต่ละวัตถุ ตามความหมาย
สิ่งนี้ตรงตามข้อกำหนดของการเขียนโปรแกรมแบบใบหน้า
ต้นแบบไดนามิก
คัดลอกรหัสรหัสดังนี้:
<script type = "text/javascript">
ฟังก์ชั่นบุคคล (ชื่ออายุ) {
this.name = ชื่อ;
this.age = อายุ;
this.array = new Array ("Koji", "Luo");
// หาก _initialized ในวัตถุบุคคลนั้นไม่ได้กำหนดไว้แสดงว่ายังไม่ได้เพิ่มวิธีการลงในต้นแบบของบุคคล
ifof person._initialized == "underfined")
-
person.prototype.showname = function () {
การแจ้งเตือน (this.name);
-
person.prototype.showarray = function () {
การแจ้งเตือน (this.array);
-
person._initialized = true;
-
-
var obj1 = คนใหม่ ("Koji", 22);
var obj2 = บุคคลใหม่ ("luo", 21);
obj1.array.push ("kyo");
obj1.showarray ();
obj1.showname ();
obj2.showarray ();
obj2.showname ();
</script>
วิธีนี้คล้ายกับตัวสร้าง/ต้นแบบ เพียงแค่ใส่วิธีลงในตัวสร้างในขณะเดียวกัน
มีการเพิ่มแอตทริบิวต์ให้กับคนฟังก์ชั่นเพื่อให้แน่ใจว่าคำสั่ง IF สามารถดำเนินการได้สำเร็จเพียงครั้งเดียว
สิ่งที่ใช้กันอย่างแพร่หลายในการใช้งานจริงคือวิธีการสร้าง/ต้นแบบ วิธีการต้นแบบแบบไดนามิกยังเป็นที่นิยมมากมันมีฟังก์ชั่นและโครงสร้าง
วิธีการทำงาน/ต้นแบบเทียบเท่า อย่าใช้วิธีการสร้างหรือต้นแบบเพียงอย่างเดียว