เมื่อฉันดูขั้นตอนแรกของซอร์สโค้ด jQuery ฉันสับสนเกี่ยวกับการสร้างวัตถุ jQuery หลังจากคิดถึงมันมานานในที่สุดฉันก็รู้สึกถึงมัน ที่นี่ฉันบันทึกไว้
วิธีแรก:
var a = function () {return a.prototype.init ();} a.prototype = {init: function () {this.age = 50; console.log (นี้); return;}, อายุ: 100} console.log (a () == ใหม่ a (ใหม่);1. วิเคราะห์ว่าทำไมผลลัพธ์จึงเป็นจริง
ฟังก์ชั่น a.prototype.init () เรียกว่าภายในโดย A ()
ใหม่ A () จะเรียกตัวสร้างภายในและตัวสร้างของมันคือ function () {return a.prototype.init ();} และการเรียกเดียวกันคือฟังก์ชัน a.prototype.init ()
2. การวิเคราะห์ฟังก์ชั่น A.prototype.init () ส่งคืนอะไร
มันขึ้นอยู่กับสิ่งนี้กำหนดว่าใครเป็นจุดนี้ เราจำเป็นต้องวิเคราะห์เมื่อเรียกฟังก์ชั่น เนื่องจากมันถูกเรียกว่าเป็นแอตทริบิวต์ของวัตถุต้นแบบนี่คือวัตถุต้นแบบ A.prototype
ในวิธีการสร้างนี้ไม่ว่าคุณจะเรียกว่า () กี่ครั้งแล้วพวกเขาจะเป็นวัตถุเดียวกันที่ส่งคืนดังนั้นการดัดแปลงวัตถุ B จะส่งผลกระทบต่อวัตถุ A ดูรูปด้านล่าง
var a = a (); var b = a (); console.log (a.age); console.log (b.age); b.age = 22; console.log (a.age); console.log (b.age); console.log (b.age);
แล้วจะแก้ปัญหานี้ได้อย่างไร? มาพูดคุยเกี่ยวกับวิธีที่สองซึ่งเป็นวิธีที่ใช้โดย jQuery
วิธีที่สอง
var a = function () {ส่งคืน A.prototype.init (); // ①} a.prototype = {init: function () {this.age = 50; console.log (นี่); return;}, อายุ: 100}A.prototype.init.prototype = a.prototype; // ②var a = ใหม่ a (); var b = ใหม่ a (); console.log (a === b); console.log (a.age); console.log (b.age); b.age = 22;
การวิเคราะห์①และ②
①ใน A.prototype.init ใหม่ () ส่วนใหญ่ทำสามสิ่ง
สร้างวัตถุเปล่า var obj = {};
OBJ OBJECT PROPERTY_PROTO_ ชี้ไปที่ต้นแบบของฟังก์ชัน A.Prototype.init;
แทนที่สิ่งนี้ในฟังก์ชั่น a.prototype.init ด้วย OBJ Object, Call A.prototype.init function, a.prototype.init.call (OBJ) และส่งคืนวัตถุใหม่
เนื่องจาก①ต้นแบบของวัตถุที่ส่งคืนคือ a.prototype.init.prototype จึงไม่มีส่วนเกี่ยวข้องกับ a.prototype เพื่อที่จะทำให้วัตถุที่ส่งคืนใหม่ได้รับการสืบทอดจาก a.prototype, ②ให้ A.prototype.init.prototype Point ไปยัง A.prototype
ดังนั้นวิธีที่สองคือการสร้างอินสแตนซ์และตรวจสอบให้แน่ใจว่าแต่ละขอบเขตของตัวเองนั้นเป็นอิสระ
ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับตัวอย่างการก่อสร้างใหม่ของ JavaScript ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะช่วยคุณได้ หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดให้ความสนใจกับเว็บไซต์ Wulin.com!