ก่อนที่จะพูดคุยเกี่ยวกับเครือข่ายต้นแบบเราต้องเข้าใจก่อนว่าความสัมพันธ์คือความสัมพันธ์ระหว่างฟังก์ชั่นและฟังก์ชั่นที่กำหนดเองและความสัมพันธ์ที่แยกไม่ออกระหว่างตัวสร้างตัวสร้างและอินสแตนซ์คืออะไร? ในความเป็นจริงฟังก์ชั่นทั้งหมดเป็นอินสแตนซ์ของฟังก์ชั่น มีต้นแบบต้นแบบต้นแบบบนตัวสร้างซึ่งเป็นวัตถุ; จากนั้นก็มีคุณสมบัติตัวสร้างบนวัตถุต้นแบบซึ่งชี้ไปที่ตัวสร้าง และมีคุณสมบัติ _proto_ บนวัตถุอินสแตนซ์ซึ่งชี้ไปที่วัตถุต้นแบบและคุณสมบัตินี้ไม่ใช่คุณสมบัติมาตรฐานและไม่สามารถใช้ในการเขียนโปรแกรมได้ คุณสมบัตินี้ใช้ภายในสำหรับการใช้เบราว์เซอร์
// _proto_ มีต้นแบบคุณสมบัติในฟังก์ชั่น วัตถุที่สร้างโดยฟังก์ชั่นนี้จะเชื่อมต่อกับคุณสมบัติโดยค่าเริ่มต้น // ความสัมพันธ์ระหว่างต้นแบบและ _proto___ มาจากมุมมองของวัตถุต้นแบบมาจากมุมมองของตัวสร้าง
ด้านล่างให้ดูที่ภาพและพูด
1. ความสัมพันธ์ระหว่างตัวสร้างต้นแบบและอินสแตนซ์
①+วัตถุ
②+ฟังก์ชั่น+วัตถุ+อาร์เรย์
หลังจากทำความเข้าใจสิ่งเหล่านี้มาพูดคุยกันว่าห่วงโซ่ต้นแบบคืออะไร เพื่อให้มันตรงไปตรงมามันเป็นห่วงโซ่ จำกัด ที่เกิดขึ้นระหว่างวัตถุอินสแตนซ์ จำกัด และต้นแบบซึ่งใช้ในการใช้แอตทริบิวต์ที่ใช้ร่วมกันและการสืบทอด ถัดไปลองดูที่รหัสเพื่อพูด
var obj = วัตถุใหม่ (); วัตถุเป็นวัตถุต้นแบบที่มีวัตถุต้นแบบและวัตถุต้นแบบ obj._proto _._ Proto _._ Proto _._ Proto__proto_ ยังมีวัตถุต้นแบบ วัตถุต้นแบบของวัตถุคอยค้นหาและคุณจะพบตัวอย่างห่วงโซ่ null // ต้นแบบ var arr = []; arr -> array.prototype -> object.prototype -> null var o = new Object (); o -> object.prototype -> null; ฟังก์ชั่น foo1 () {this.name1 = '1';} ฟังก์ชั่น foo2 () {this.name2 = '2';} foo2.prototype = new foo1 (); ฟังก์ชั่น foo3 () {this.name = '3';ถัดไปคือปัญหามรดก
2. มรดก
1) การสืบทอดต้นแบบ
ฟังก์ชันสัตว์ (ชื่อ) {this.name = name; } function tiger (สี) {this.color = color; } // var tiger = ใหม่เสือ ('เหลือง'); // console.log (tiger.color); // console.log (tiger.name); // undefined // tiger.prototype = สัตว์ใหม่ ('Tiger'); // One Way Object.prototype.name = 'Big Tiger'; // วิธีที่สอง var tiger = ใหม่เสือ ('เหลือง'); console.log (Tiger.Color); console.log (tiger.name);เป็นที่น่าสังเกตว่ามีปัญหาหลักสองประการที่นี่: ①ไม่สะดวกที่จะส่งพารามิเตอร์ไปยังประเภทหลัก ②ประเภทการอ้างอิงในประเภทพาเรนต์ถูกแชร์โดยทุกกรณี
2) ES5 จัดเตรียมวิธีการ object.create () เพื่อใช้การสืบทอด
― - เข้ากันได้ // ฟังก์ชั่น shim shim สร้าง (obj) {ถ้า (object.create) {return object.create (obj); } else {function foo () {} foo.prototype = obj; ส่งคืน foo ใหม่ (); -วิธีนี้เป็นคุณสมบัติใหม่ของ ES5 ซึ่งจริง ๆ แล้วกำลังคัดลอกและสืบทอด
3) คัดลอกมรดก
var obj = {}; obj.extend = function (obj) {สำหรับ (var k ใน obj) {this [k] = obj [k]; -4) การยืมตัวสร้างมรดก - สมาชิกบนต้นแบบในตัวสร้างที่ยืมมาไม่ได้ยืม
ฟังก์ชั่นสัตว์ (ชื่อ) {this.name = name;} ฟังก์ชันเมาส์ (ชื่อเล่น) {iment.call (นี่, 'เมาส์'); this.nickName = ชื่อเล่น;} var m = เมาส์ใหม่ ('jerry'); console.log (m.name); console.log (m.nickname);ปัญหาที่มีอยู่: มันสามารถแก้ปัญหาการผ่านพารามิเตอร์ในการสืบทอดต้นแบบได้ แต่สมาชิก (แอตทริบิวต์และวิธีการ) บนวัตถุต้นแบบในประเภทพาเรนต์ไม่สามารถสืบทอดได้
5) วัตถุการสืบทอดการสืบทอดแบบผสมผสานเป็นแบบไดนามิก
ฟังก์ชันบุคคล (ชื่อ) {this.name = name;} person.prototype.showname = function () {console.log (this.name);} ฟังก์ชั่นนักเรียน (ชื่อ, อายุ) {person.call (ชื่อนี้); this.age = age;} student.prototype = บุคคลใหม่ (); student.prototype.contructor = นักเรียน; student.prototype.showage = ฟังก์ชั่น () {console.log (this.age);} var stu = ใหม่นักเรียน ('Zhang San', 12);[การสืบทอดต้นแบบ + ยืมตัวสร้างการสืบทอดการสืบทอด] คุณลักษณะของมันคือหนึ่งสำเนาของแอตทริบิวต์ต่ออินสแตนซ์และวิธีการใช้ร่วมกัน
[สรุป] เพื่อวางไว้ในประโยคที่คร่าวๆห่วงโซ่ต้นแบบที่เรียกว่าเป็นวิธีการหาพฤติกรรมของการค้นหาแม่และสามารถเข้าใจได้ว่ามนุษย์เกิดมาจากมนุษย์และปีศาจเกิดจากปีศาจ มีเพียงแกนเดียวของห่วงโซ่ต้นแบบเท่านั้น: การแบ่งปันแอตทริบิวต์และการควบคุมอิสระ เมื่ออินสแตนซ์วัตถุของคุณต้องการแอตทริบิวต์อิสระสาระสำคัญของการปฏิบัติทั้งหมดคือการสร้างแอตทริบิวต์ในอินสแตนซ์ของวัตถุ หากคุณไม่คิดมากเกินไปคุณสามารถกำหนดคุณลักษณะอิสระที่คุณต้องการโดยตรงเพื่อเขียนทับคุณสมบัติของต้นแบบ ในระยะสั้นเมื่อใช้การสืบทอดต้นแบบคุณควรให้ความสนใจเป็นพิเศษกับคุณลักษณะในต้นแบบเพราะพวกเขาทั้งหมดมีอยู่ทั้งหมดที่ส่งผลกระทบต่อร่างกายทั้งหมด วิธีที่พบบ่อยที่สุดในขณะนี้คือโหมดการรวมกัน
1. ห่วงโซ่ต้นแบบ
1) ความสัมพันธ์ระหว่างตัวสร้างต้นแบบและอินสแตนซ์
①คอนสตรัคเตอร์มีต้นแบบคุณสมบัติซึ่งเป็นวัตถุ (อินสแตนซ์ของวัตถุ) ②วัตถุต้นแบบมีแอตทริบิวต์ตัวสร้างซึ่งชี้ไปที่ฟังก์ชันตัวสร้างที่วัตถุต้นแบบเป็นของ ③วัตถุอินสแตนซ์มีแอตทริบิวต์ _proto_ ซึ่งชี้ไปที่วัตถุต้นแบบของตัวสร้าง มันเป็นคุณสมบัติที่ไม่ได้มาตรฐานและไม่สามารถใช้สำหรับการเขียนโปรแกรม มันถูกใช้โดยเบราว์เซอร์เอง 2) ความสัมพันธ์ระหว่างต้นแบบและ _proto_
①prototypeเป็นคุณสมบัติของตัวสร้าง
②_proto_เป็นแอตทริบิวต์ของวัตถุอินสแตนซ์
- ทั้งสองชี้ไปที่วัตถุเดียวกัน
[สรุป] i) ฟังก์ชั่นเป็นวัตถุและวัตถุไม่จำเป็นต้องใช้ฟังก์ชัน
ii) สาระสำคัญของวัตถุ: ชุดคู่คีย์-ค่าที่ไม่ได้เรียงลำดับ; ค่าในคู่คีย์-ค่าอาจเป็นค่าของประเภทข้อมูลใด ๆ
iii) วัตถุเป็นคอนเทนเนอร์และคอนเทนเนอร์มี (คุณสมบัติและวิธีการ)
3) การค้นหาแอตทริบิวต์
①เมื่อเข้าถึงสมาชิกของวัตถุคุณจะมองหาก่อนว่ามันมีอยู่ในวัตถุหรือไม่
②หากไม่มีวัตถุปัจจุบันให้มองหามันในวัตถุต้นแบบของตัวสร้าง
③ไม่พบวัตถุต้นแบบให้มองหาต้นแบบของวัตถุต้นแบบ
④รู้ว่าต้นแบบของวัตถุต้นแบบวัตถุเป็นโมฆะ
2. ฟังก์ชั่น
- ฟังก์ชั่นทั้งหมดเป็นอินสแตนซ์ของฟังก์ชัน
①วัตถุท้องถิ่น: วัตถุที่เป็นอิสระจากสภาพแวดล้อมโฮสต์ (เบราว์เซอร์) - รวมถึงวัตถุ, อาร์เรย์, วันที่, regexp, ฟังก์ชั่น, ข้อผิดพลาด, ตัวเลข, สตริง, บูลีน
②วัตถุในตัว - รวมถึงคณิตศาสตร์และทั่วโลก (หน้าต่างซึ่งเป็นตัวแปรระดับโลกใน JS) และไม่จำเป็นต้องใช้ใหม่เมื่อใช้งาน
object hhost - รวมถึงวัตถุที่กำหนดเอง, dom, bom
ข้างต้นเป็นคำอธิบายทั้งหมดเกี่ยวกับวิธีการทำความเข้าใจห่วงโซ่ต้นแบบ JS ที่แนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!