คำอธิบายโดยละเอียดเกี่ยวกับหกวิธีในการกำหนดคลาสโดย JS

ในการพัฒนาส่วนหน้ามักจำเป็นต้องกำหนดชั้นเรียน JS ดังนั้นใน JavaScript มีหลายวิธีในการกำหนดคลาสและความแตกต่างคืออะไร? บทความนี้อธิบายถึงหกวิธีต่อไปนี้ในการกำหนดคลาส JS (คำอธิบายกรณี):

1. วิธีโรงงาน

 Function Car () {var ocar = วัตถุใหม่; ocar.color = "blue"; ocar.doors = 4; ocar.showcolor = function () {document.write (this.color)}; return ocar;} var car1 = car ();

เมื่อมีการเรียกฟังก์ชั่นนี้วัตถุใหม่จะถูกสร้างขึ้นและมีการกำหนดคุณสมบัติและวิธีการทั้งหมด ใช้ฟังก์ชั่นนี้เพื่อสร้าง 2 วัตถุที่มีคุณสมบัติเดียวกัน

แน่นอนคุณสามารถแก้ไขวิธีนี้ได้โดยส่งพารามิเตอร์ไป

 Function Car (สี, ประตู) {var ocar = วัตถุใหม่; ocar.color = color; ocar.doors = door; ocar.showcolor = function () {document.write (this.color)}; return ocar;} var car1 = car ("สีแดง", 4); // เอาท์พุท: "สีแดง" Car2.ShowColor () // เอาท์พุท: "Blue"

ตอนนี้คุณสามารถรับวัตถุที่มีค่าที่แตกต่างกันโดยผ่านพารามิเตอร์ที่แตกต่างกันไปยังฟังก์ชัน

ในตัวอย่างก่อนหน้าแต่ละครั้งที่เรียกใช้ฟังก์ชัน Car () เรียกว่า showcolor () ถูกสร้างขึ้นซึ่งหมายความว่าแต่ละวัตถุมีวิธีการแสดงของตัวเอง ()

แต่ในความเป็นจริงแต่ละวัตถุมีฟังก์ชั่นเดียวกัน แม้ว่าวิธีการสามารถกำหนดไว้นอกฟังก์ชั่นได้ แต่โดยการชี้คุณสมบัติของฟังก์ชันไปยังวิธีการ

 ฟังก์ชั่น showcolor () {Alert (this.color);} function car () {var ocar = วัตถุใหม่ (); ocar.color = color; ocar.doors = door; ocar.showcolor = showcolor; return ocar;}}

แต่นี่ไม่เหมือนวิธีการฟังก์ชั่น

2. วิธีตัวสร้าง

วิธีตัวสร้างนั้นง่ายเหมือนวิธีโรงงานดังที่แสดงด้านล่าง:

 Function Car (สี, ประตู) {this.color = color; this.doors = door; this.showcolor = function () {Alert (this.color)};} var car1 = รถใหม่ ("สีแดง", 4); var car2 = รถใหม่ ("สีน้ำเงิน", 4);

คุณจะเห็นว่าวิธีการสร้างไม่ได้สร้างวัตถุภายในฟังก์ชั่นและคำหลักที่ใช้ เนื่องจากวัตถุถูกสร้างขึ้นเมื่อเรียกตัวสร้างและสิ่งนี้สามารถใช้ในการเข้าถึงคุณสมบัติของวัตถุภายในฟังก์ชั่นเท่านั้น

ตอนนี้ใช้ใหม่เพื่อสร้างวัตถุดูเหมือนว่า! แต่มันก็เหมือนกับโรงงาน การโทรแต่ละครั้งจะสร้างวิธีการของตัวเองสำหรับวัตถุ

3. วิธีการต้นแบบ

วิธีนี้ใช้ประโยชน์จากแอตทริบิวต์ต้นแบบของวัตถุ ขั้นแรกให้สร้างชื่อคลาสด้วยฟังก์ชั่นที่ว่างเปล่าจากนั้นแอตทริบิวต์และวิธีการทั้งหมดจะถูกกำหนดให้กับแอตทริบิวต์ต้นแบบ

 Function Car () {} car.prototype.color = "red"; car.prototype.doors = 4; car.prototype.showcolor = ฟังก์ชั่น () {แจ้งเตือน (this.color);

ในรหัสนี้ฟังก์ชั่นที่ว่างเปล่าจะถูกกำหนดไว้ก่อนจากนั้นคุณสมบัติของวัตถุจะถูกกำหนดผ่านแอตทริบิวต์ต้นแบบ เมื่อเรียกใช้ฟังก์ชั่นนี้คุณสมบัติทั้งหมดของต้นแบบจะถูกกำหนดให้กับวัตถุที่จะสร้างทันที วัตถุทั้งหมดในฟังก์ชั่นนี้จัดเก็บพอยน์เตอร์เพื่อแสดง () ซึ่งดูเหมือนว่าจะเป็นของวัตถุเดียวกัน

อย่างไรก็ตามฟังก์ชั่นนี้ไม่มีพารามิเตอร์และแอตทริบิวต์ไม่สามารถเริ่มต้นได้โดยการผ่านพารามิเตอร์ ค่าเริ่มต้นของแอตทริบิวต์จะต้องเปลี่ยนแปลงหลังจากสร้างวัตถุ

ปัญหาที่ร้ายแรงมากเกี่ยวกับวิธีการต้นแบบคือเมื่อแอตทริบิวต์ชี้ไปที่วัตถุเช่นอาร์เรย์

 Function Car () {} car.prototype.color = "red"; car.prototype.doors = 4; car.prototype.arr = อาร์เรย์ใหม่ ("a", "b"); car.prototype.showcolor = ฟังก์ชั่น () car (); car1.arr.push ("cc"); แจ้งเตือน (car1.arr); //output:aa,bb,cclert(car2.arr); // เอาท์พุท: AA, BB, CC

ที่นี่เนื่องจากค่าอ้างอิงของอาร์เรย์วัตถุรถยนต์ทั้งสองชี้ไปที่อาร์เรย์เดียวกันดังนั้นเมื่อเพิ่มค่าใน Car1 คุณสามารถเห็นได้ใน Car2

ยูเนี่ยนเป็นวิธีที่สามารถสร้างวัตถุเช่นภาษาการเขียนโปรแกรมอื่น ๆ โดยใช้ตัวสร้าง/ต้นแบบ มันเป็นวิธีการที่ใช้ตัวสร้างเพื่อกำหนดคุณสมบัติที่ไม่ใช้งานของวัตถุและใช้ต้นแบบเพื่อกำหนดวัตถุ

 Function Car (สี, ประตู) {this.color = color; this.doors = door; this.arr = array ใหม่ ("aa", "bb");} car.prototype.showcolor () {Alert (this.color); Car ("Blue", 4); car1.arr.push ("cc"); แจ้งเตือน (car1.arr); //output:aa,bb,calert(car2.arr); // เอาท์พุท: AA, BB

5. วิธีการต้นแบบแบบไดนามิก

วิธีการต้นแบบแบบไดนามิกนั้นคล้ายกับวิธีการสร้าง/ต้นแบบแบบผสม ความแตกต่างเพียงอย่างเดียวคือตำแหน่งที่กำหนดให้กับวิธีการของวัตถุ

 Function Car (สี, ประตู) {this.color = color; this.doors = door; this.arr = array ใหม่ ("aa", "bb"); ถ้า (typeof car._initialized == "undefined") {car.prototype.showColor

วิธีการต้นแบบแบบไดนามิกคือการใช้ธงเพื่อตรวจสอบว่าต้นแบบได้รับการกำหนดวิธีหรือไม่ สิ่งนี้ทำให้มั่นใจได้ว่าวิธีนี้จะถูกสร้างขึ้นเพียงครั้งเดียว

6. วิธีการผสมจากโรงงาน

ครูวัตถุประสงค์ของมันสร้างตัวสร้างปลอมที่ส่งคืนเฉพาะอินสแตนซ์ใหม่ของวัตถุอื่น

 Function Car () {var ocar = new Object (); ocar.color = "red"; ocar.doors = 4; ocar.showcolor = function () {Alert (this.color)}; return ocar;}

ซึ่งแตกต่างจากวิธีการโรงงานวิธีนี้ใช้ตัวดำเนินการใหม่

ข้างต้นเป็นวิธีการทั้งหมดในการสร้างวัตถุ วิธีที่ใช้กันอย่างแพร่หลายที่สุดคือวิธีการสร้าง/ต้นแบบแบบไฮบริดและวิธีการต้นแบบแบบไดนามิกก็เป็นที่นิยมเช่นกัน ฟังก์ชั่นเทียบเท่ากับวิธีการสร้าง/ต้นแบบ

คำอธิบายโดยละเอียดข้างต้นของหกวิธีในการกำหนดคลาส JS คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น