วัตถุที่มุ่งเน้นคืออะไร? วัตถุที่มุ่งเน้นเป็นความคิดชนิดหนึ่ง! (ไร้สาระ)
วัตถุที่มุ่งเน้นสามารถรักษาโมดูลสำคัญทั้งหมดในโปรแกรมเป็นวัตถุและโมดูลมีคุณสมบัติและวิธีการ ด้วยวิธีนี้ถ้าเราห่อหุ้มคุณสมบัติและวิธีการบางอย่างมันจะสะดวกมากที่จะใช้ในอนาคตและยังสามารถหลีกเลี่ยงการทำงานที่น่าเบื่อและซ้ำซาก ต่อไปเราจะอธิบายการใช้งานเชิงวัตถุใน JS
รูปแบบโรงงาน
รูปแบบจากโรงงานเป็นรูปแบบการออกแบบที่รู้จักกันดีในด้านวิศวกรรมซอฟต์แวร์และเนื่องจากไม่สามารถสร้างคลาสใน eCmascript วัตถุจึงถูกสร้างขึ้นด้วยการห่อหุ้มฟังก์ชั่น วิธีการใช้งานนั้นง่ายมากนั่นคือสร้างวัตถุในฟังก์ชั่นกำหนดแอตทริบิวต์และวิธีการให้กับวัตถุแล้วส่งคืนวัตถุ
ฟังก์ชั่น createBlog (ชื่อ, url) {var o = วัตถุใหม่ (); o.name = ชื่อ; o.url = url; o.sayurl = function () {Alert (this.url); } return o;} var blog1 = createblog ('wuyuchang', '//www.vevb.com/');จะเห็นได้ว่าวิธีการใช้งานของรูปแบบโรงงานนั้นง่ายมากการแก้ปัญหาในการสร้างวัตถุที่คล้ายกันหลายอย่าง แต่รูปแบบโรงงานไม่สามารถระบุประเภทของวัตถุได้เนื่องจากเป็นวัตถุทั้งหมดซึ่งแตกต่างจากวันที่อาร์เรย์ ฯลฯ ดังนั้นรูปแบบตัวสร้างจึงปรากฏขึ้น
โหมดตัวสร้าง
ตัวสร้างใน eCmascript สามารถสร้างวัตถุประเภทเฉพาะคล้ายกับวัตถุ JS ดั้งเดิมเช่นอาร์เรย์และวันที่ วิธีการใช้งานมีดังนี้:
ฟังก์ชั่นบล็อก (ชื่อ, url) {this.name = name; this.url = url; this.alerturl = function () {Alert (this.url); }} var blog = บล็อกใหม่ ('wuyuchang', '//www.vevb.com/'); // จริงตรวจสอบว่าบล็อกเป็นอินสแตนซ์ของบล็อกนั่นคือมันแก้ปัญหาที่โหมดโรงงานไม่สามารถทำได้ตัวอย่างนี้แตกต่างจากรูปแบบโรงงานยกเว้นชื่อฟังก์ชั่นรองเท้าเด็กอย่างระมัดระวังควรค้นหาความแตกต่างมากมาย:
ตัวอักษรตัวแรกของชื่อฟังก์ชั่นเป็นตัวพิมพ์ใหญ่ (แม้ว่ามาตรฐานจะไม่กำหนดอย่างเคร่งครัดว่าตัวอักษรตัวแรกนั้นเป็นตัวพิมพ์ใหญ่ตามอนุสัญญาตัวอักษรตัวแรกของคอนสตรัคเตอร์นั้นเป็นตัวพิมพ์ใหญ่
สร้างวัตถุที่ไม่ปรากฏ
กำหนดแอตทริบิวต์และวิธีการโดยตรงกับวัตถุนี้
ไม่มีคำสั่งคืน
สร้างวัตถุโดยใช้ใหม่
สามารถรับรู้วัตถุได้ (นี่คือที่ที่รูปแบบตัวสร้างเกินรูปแบบของโรงงาน)
แม้ว่าตัวสร้างจะใช้งานง่าย แต่ก็ไม่ได้ไม่มีข้อเสีย ปัญหาที่ใหญ่ที่สุดของการใช้ตัวสร้างคือพวกเขาจะต้องสร้างวิธีการใหม่ทุกครั้งที่พวกเขาสร้างอินสแตนซ์ (ในทางทฤษฎีคุณสมบัติของวัตถุจะแตกต่างกันทุกครั้งที่พวกเขาสร้างวัตถุและวิธีการของวัตถุเหมือนกัน) อย่างไรก็ตามไม่จำเป็นต้องสร้างวิธีการเดียวกันสองครั้งดังนั้นเราสามารถย้ายฟังก์ชั่นนอกวัตถุ (บางทีรองเท้าเด็กบางคนได้เห็นข้อเสีย Shhhh!)
ฟังก์ชั่นบล็อก (ชื่อ, url) {this.name = name; this.url = url; this.alerturl = AlertUrl;} ฟังก์ชั่น AlertUrl () {Alert (this.url);} var blog = บล็อกใหม่ ('scjb51', 'http://sc.vevb.com/'), blog2 = บล็อกใหม่ ('jb51', '//ww.vevb.com/'); // http://sc.vevb.com/blog2.alerturl (); // //www.vevb.com/เราตั้งค่า Alerturl เป็นฟังก์ชั่นทั่วโลกเพื่อให้บล็อกและบล็อก 2 เข้าถึงฟังก์ชั่นเดียวกัน แต่ปัญหากลับมาอีกครั้ง ฟังก์ชั่นที่จริง ๆ แล้วต้องการให้บล็อกใช้นั้นถูกกำหนดไว้ในขอบเขตทั่วโลกซึ่งแสดงให้เห็นว่าขอบเขตทั่วโลกนั้นค่อนข้างคุ้มค่ากับชื่อ สิ่งที่ไม่สามารถยอมรับได้คือวิธีการหลายอย่างถูกกำหนดไว้ในขอบเขตทั่วโลกที่ใช้โดยวัตถุเฉพาะเท่านั้น ไม่เพียง แต่จะสูญเสียพื้นที่ แต่เห็นได้ชัดว่าสูญเสียการห่อหุ้มเชิงวัตถุดังนั้นปัญหานี้สามารถแก้ไขได้ผ่านต้นแบบ
โหมดต้นแบบ
แต่ละฟังก์ชั่นที่เราสร้างมีแอตทริบิวต์ต้นแบบซึ่งเป็นตัวชี้ไปยังวัตถุและวัตถุประสงค์ของวัตถุนี้คือการมีคุณสมบัติและวิธีการที่สามารถแบ่งปันได้โดยทุกกรณีของประเภทเฉพาะ ข้อดีของการใช้วัตถุต้นแบบคืออินสแตนซ์วัตถุทั้งหมดสามารถแบ่งปันคุณสมบัติและวิธีการที่มีอยู่
Function Blog () {} blog.prototype.name = 'wuyuchang'; blog.prototype.url = 'http://tools.vevb.com/'; this.url + this.friend);} // ต่อไปนี้เป็นรหัสทดสอบ var blog = บล็อกใหม่ (), blog2 = บล็อกใหม่ (); blog.alertinfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2,fr3,fr4blog2.alertinfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2,fr3,fr4blog.name = 'wyc1'; blog.url = 'http: //***.com'; blog.pop.pop (); blog2.name = 'wyc2'; blog2.url = 'http: // // wyc1http: //***.comfr1,fr2,fr3blog2.alertinfo (); // wyc2http: //+.comfr1,fr2,fr3รูปแบบต้นแบบไม่ได้ไม่มีข้อบกพร่อง ก่อนอื่นมันจะละเว้นลิงก์ของตัวสร้างที่ผ่านพารามิเตอร์การเริ่มต้น เป็นผลให้อินสแตนซ์ทั้งหมดได้รับค่าแอตทริบิวต์เดียวกันโดยค่าเริ่มต้นซึ่งไม่สะดวกมาก แต่นี่ไม่ใช่ปัญหาที่ใหญ่ที่สุดของต้นแบบ ปัญหาที่ใหญ่ที่สุดของรูปแบบต้นแบบเกิดจากธรรมชาติของการแบ่งปัน เนื่องจากการแบ่งปันหนึ่งอินสแตนซ์จะแก้ไขการอ้างอิงและอื่น ๆ ก็เปลี่ยนการอ้างอิง ดังนั้นเรามักจะไม่ใช้ต้นแบบเพียงอย่างเดียว แต่รวมรูปแบบต้นแบบเข้ากับรูปแบบตัวสร้าง
โหมดผสม (โหมดต้นแบบ + โหมดคอนสตรัคเตอร์)
บล็อกฟังก์ชัน (ชื่อ, url, เพื่อน) {this.name = name; this.url = url; this.friend = friend;} blog.prototype.alertInfo = function () {Alert (this.name + this.url + this.friend);} var blog = บล็อกใหม่ ('wuyuchang', 'http://tools.vevb.com/', ['fr1' 'http: //**.com', ['a', 'b']); blog.friend.pop (); blog.alertinfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2blog2.alertinfo (); // wychttp: //**.coma,bในโหมดไฮบริดโหมดคอนสตรัคเตอร์ใช้เพื่อกำหนดแอตทริบิวต์อินสแตนซ์ในขณะที่โหมดต้นแบบใช้เพื่อกำหนดวิธีการและแอตทริบิวต์ที่ใช้ร่วมกัน แต่ละอินสแตนซ์จะมีแอตทริบิวต์อินสแตนซ์ของตัวเอง แต่ในขณะเดียวกันก็แบ่งปันวิธีการบันทึกหน่วยความจำให้มากที่สุด นอกจากนี้โหมดนี้ยังรองรับพารามิเตอร์เริ่มต้นที่ผ่าน ข้อดีมากมาย รูปแบบนี้เป็นวิธีที่ใช้กันอย่างแพร่หลายและเป็นที่รู้จักมากที่สุดในการสร้างวัตถุที่กำหนดเองใน ECMASCRIPT
โหมดต้นแบบไดนามิก
โหมดต้นแบบแบบไดนามิกห่อหุ้มข้อมูลทั้งหมดในคอนสตรัคเตอร์และโดยการเริ่มต้นต้นแบบในคอนสตรัคเตอร์ (เฉพาะต้นแบบที่เริ่มต้นเมื่อวัตถุแรกถูกสร้างอินสแตนซ์) จะช่วยให้คุณเลือกได้ว่าต้นแบบจะต้องเริ่มต้นโดยการตัดสินว่าวิธีการนั้นถูกต้องหรือไม่
ฟังก์ชั่นบล็อก (ชื่อ, url) {this.name = name; this.url = url; if (typeof this.alertInfo! = 'function') {// รหัสนี้ดำเนินการเฉพาะเมื่อมีการแจ้งเตือน ('exe time'); blog.prototype.alertInfo = function () {Alert (thia.name + this.url); }}} var blog = บล็อกใหม่ ('wuyuchang', 'http://tools.vevb.com'), blog2 = บล็อกใหม่ ('wyc', 'http: ***. com');คุณจะเห็นได้ว่าในตัวอย่างด้านบนหน้าต่างจะปรากฏขึ้นหนึ่งครั้ง 'Exe Time' นั่นคือเมื่อบล็อกเริ่มต้นบล็อก 2 ไม่จำเป็นต้องเริ่มต้นต้นแบบ สำหรับการสร้างวัตถุโดยใช้รูปแบบนี้ถือได้ว่าสมบูรณ์แบบ
โพสต์บล็อกนี้อ้างถึงฉบับที่สามของ "JavaScript Advanced Programming" แต่ภาษาได้รับการทำให้ง่ายขึ้นและตัวอย่างได้รับการเขียนใหม่ หากคุณมีคำถามใด ๆ โปรดฝากข้อความและตอบกลับและผู้เขียนจะอัปเดตบล็อก