บทความนี้แบ่งปันการคัดลอกตื้นและรหัสสำเนาลึกของวัตถุ JavaScript สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. สำเนาเบา
การคัดลอกหมายถึงการคัดลอกคุณสมบัติทั้งหมดของวัตถุหลักไปยังวัตถุลูก
ฟังก์ชั่นต่อไปนี้กำลังคัดลอก:
var chinese = {Nation: 'China'} var doctor = {อาชีพ: 'Doctor'} ฟังก์ชั่น ExtendCopy (p) {var c = {}; สำหรับ (var i ใน p) {c [i] = p [i]; } c.uber = p; กลับ C; -เมื่อใช้งานเขียนสิ่งนี้:
VAR Doctor = ExtendCopy (จีน); Doctor.Career = 'Doctor'; Alert (Doctor.nation); // จีน
อย่างไรก็ตามมีปัญหากับสำเนาดังกล่าว นั่นคือถ้าคุณสมบัติของวัตถุแม่เท่ากับอาร์เรย์หรือวัตถุอื่นจริง ๆ แล้ววัตถุลูกจะได้รับที่อยู่หน่วยความจำเท่านั้นไม่ใช่สำเนาจริงดังนั้นจึงมีความเป็นไปได้ที่วัตถุแม่จะถูกดัดแปลง
โปรดดูตอนนี้เพิ่มทรัพย์สิน "บ้านเกิด" ให้กับจีนซึ่งมีค่าเป็นอาร์เรย์
chinese.birthplaces = ['Beijing', 'Shanghai', 'Hong Kong'];
ผ่านฟังก์ชั่น ExtendCopy () แพทย์สืบทอดภาษาจีน
VAR Doctor = ExtendCopy (จีน);
จากนั้นเราเพิ่มเมืองหนึ่งใน "สถานที่เกิด" ของแพทย์:
Doctor.birthplaces.push ('Xiamen');
ตรวจสอบผลลัพธ์อินพุต
การแจ้งเตือน (Doctor.birthplaces); // ปักกิ่งเซี่ยงไฮ้ฮ่องกงเซียนิน
การแจ้งเตือน (ภาษาจีน. คลอด); // ปักกิ่งเซี่ยงไฮ้ฮ่องกงเซียนิน
เป็นผลให้สถานที่เกิดทั้งสองเปลี่ยนไป
ดังนั้น ExtendCopy () เพียงแค่คัดลอกข้อมูลประเภทพื้นฐานและเราเรียกสำเนานี้ "Copy Copy"
2. สำเนาลึก
เนื่องจากสำเนาตื้นและลึกมีข้อเสียดังกล่าวมาดูสำเนาลึกถัดไป
สิ่งที่เรียกว่า "สำเนาลึก" หมายความว่าสามารถตระหนักถึงสำเนาอาร์เรย์และวัตถุที่แท้จริง การดำเนินการของมันไม่ใช่เรื่องยากเพียงแค่เรียกว่า "สำเนาตื้น" ซ้ำ
ฟังก์ชั่น deepcopy (p, c) {var c = c || - สำหรับ (var i ใน p) {ถ้า (typeof p [i] === 'object') {c [i] = (p [i] .constructor === อาร์เรย์)? - DEEPCOPY (P [I], C [I]); } else {c [i] = p [i]; }} return c; -ลองดูวิธีใช้:
VAR Doctor = DeepCopy (จีน);
ตอนนี้เพิ่มคุณสมบัติลงในวัตถุหลักด้วยค่าเป็นอาร์เรย์ จากนั้นแก้ไขคุณสมบัตินี้บนวัตถุลูก:
chinese.birthplaces = ['Beijing', 'Shanghai', 'Hong Kong']; Doctor.birthplaces.push ('Xiamen'); Alert (Doctor.birthplaces); // ปักกิ่ง, เซี่ยงไฮ้, ฮ่องกง, Xiamen Alert (จีน. คล้องจอง); // ปักกิ่งเซี่ยงไฮ้ฮ่องกงสิ่งนี้ทำให้สำเนาเสร็จสิ้น;
$ .extend ()
$ .extend () ใน jQuery เหมือนกัน
$ .Extend ([ลึก], เป้าหมาย, Object1 [, Objectn])
•ลึก
ประเภท: บูลีน
ถ้าเป็นจริงการผสานจะกลับมาซ้ำ (เรียกอีกอย่างว่าสำเนาลึก)
•เป้า
ประเภท: วัตถุ
การขยายวัตถุ สิ่งนี้จะได้รับคุณสมบัติใหม่
• Object1
ประเภท: วัตถุ
วัตถุที่มีคุณสมบัติเพิ่มเติมที่รวมเข้ากับพารามิเตอร์แรก
•วัตถุ
ประเภท: วัตถุ
มีแอตทริบิวต์เพิ่มเติมเพื่อรวมเข้ากับพารามิเตอร์แรก
เมื่อเราจัดหาวัตถุสองวัตถุขึ้นไปเป็น $. extend () คุณสมบัติทั้งหมดของวัตถุจะถูกเพิ่มลงในวัตถุเป้าหมาย (พารามิเตอร์เป้าหมาย)
หากมีเพียงพารามิเตอร์เดียวเท่านั้นที่มีให้กับ $ .Extend () ซึ่งหมายความว่าจะละเว้นพารามิเตอร์เป้าหมาย ในกรณีนี้วัตถุ jQuery เองจะผิดนัดกับวัตถุเป้าหมาย ด้วยวิธีนี้เราสามารถเพิ่มคุณสมบัติใหม่ภายใต้เนมสเปซ jQuery สิ่งนี้มีประโยชน์สำหรับนักพัฒนาปลั๊กอินเมื่อพวกเขาต้องการเพิ่มฟังก์ชั่นใหม่ให้กับ jQuery
โปรดจำไว้ว่าวัตถุเป้าหมาย (พารามิเตอร์แรก) จะถูกแก้ไขและจะถูกส่งคืนผ่าน $. extend () อย่างไรก็ตามหากเราต้องการเก็บวัตถุต้นฉบับเราสามารถส่งวัตถุเปล่าเป็นวัตถุเป้าหมาย:
var object = $ .extend ({}, Object1, Object2);
โดยค่าเริ่มต้นการดำเนินการผสานผ่าน $ .extend () จะไม่ถูกเรียกซ้ำ หากคุณสมบัติของวัตถุแรกเองเป็นวัตถุหรืออาร์เรย์มันจะแทนที่คุณสมบัติอย่างสมบูรณ์ด้วยคีย์เดียวกันของวัตถุที่สอง ค่าเหล่านี้จะไม่ถูกรวมเข้าด้วยกัน สิ่งนี้สามารถเข้าใจได้โดยการตรวจสอบมูลค่าของกล้วยในตัวอย่างด้านล่าง อย่างไรก็ตามหากใช้จริงเป็นอาร์กิวเมนต์แรกของฟังก์ชันการรวมแบบเรียกซ้ำจะดำเนินการกับวัตถุ
คำเตือน: ไม่รองรับการส่งเท็จสำหรับพารามิเตอร์แรก
1. ผสานวัตถุสองชิ้นและแก้ไขวัตถุแรก
VAR Object1 = {Apple: 0, Banana: {น้ำหนัก: 52, ราคา: 100}, เชอร์รี่: 97}; var Object2 = {Banana: {ราคา: 200}, ทุเรียน: 100}; // ผสานวัตถุ 2 ลงในวัตถุ 1 $. ); // {"Apple": 0, "Banana": {"Price": 200}, "Cherry": 97, "Durian": 100}2. ผสานวัตถุสองชิ้นในลักษณะเรียกซ้ำและแก้ไขวัตถุแรก
var object1 = {Apple: 0, Banana: {น้ำหนัก: 52, ราคา: 100}, เชอร์รี่: 97}; var Object2 = {Banana: {ราคา: 200}, ทุเรียน: 100}; // ผสานวัตถุ 2 ลงในวัตถุ 1 json.stringify (Object1)); // {"Apple": 0, "Banana": {"Weight": 52, "Price": 200}, "Cherry": 97, "Durian": 100}3. รวมวัตถุค่าเริ่มต้นและตัวเลือกและไม่แก้ไขวัตถุค่าเริ่มต้น นี่เป็นรูปแบบการพัฒนาปลั๊กอินที่ใช้กันทั่วไป
var defaults = {ตรวจสอบแล้ว: เท็จ, ขีด จำกัด : 5, ชื่อ: "foo"}; ตัวเลือก var = {ตรวจสอบ: จริง, ชื่อ: "bar"}; // ผสานค่าเริ่มต้นและตัวเลือกโดยไม่ต้องแก้ไขการตั้งค่าค่าเริ่มต้น (json.string ({} ตัวเลือก )); console.log (json.stringify (การตั้งค่า)); // ค่าเริ่มต้น - {"ตรวจสอบ": เท็จ "จำกัด ": 5, "ชื่อ": "foo"} // ตัวเลือก - {"ตรวจสอบ": จริง "ชื่อ": "บาร์"} // การตั้งค่า - {JavaScript กำหนดว่าวัตถุเท่ากัน
ใน JavaScript การดำเนินการเท่าเทียมกันรวมถึง "==", "===" ความสอดคล้อง ไม่จำเป็นต้องมีความแตกต่างส่วนใหญ่ระหว่างทั้งสอง ในบทความนี้เราจะพูดคุยเกี่ยวกับวิธีการพิจารณาว่าวัตถุสองชิ้นมีค่าเท่ากันหรือไม่? คุณอาจคิดว่าหากวัตถุสองชิ้นมีคุณสมบัติเหมือนกันและคุณสมบัติของพวกเขามีค่าเท่ากันวัตถุทั้งสองจะเท่ากัน จากนั้นให้ใช้ตัวอย่างเพื่อแสดง:
var obj1 = {ชื่อ: "เบนจามิน", เพศ: "ชาย"} var obj2 = {ชื่อ: "เบนจามิน", เซ็กส์: "ชาย"} // เอาท์พุท: เท็จวินาที log (obj1 == obj2); // outputs: false.logจากตัวอย่างด้านบนเราจะเห็นว่าคุณใช้ "==" หรือ "==" จะส่งคืนเท็จ เหตุผลหลักคือสตริงและตัวเลขประเภทพื้นฐานถูกนำมาเปรียบเทียบด้วยค่าในขณะที่วัตถุ (วันที่, อาร์เรย์) และวัตถุทั่วไปถูกนำมาเปรียบเทียบโดยที่อยู่ในหน่วยความจำที่ชี้ไปที่ตัวชี้ ดูตัวอย่างต่อไปนี้:
var obj1 = {ชื่อ: "เบนจามิน", เพศ: "ชาย"}; var obj2 = {ชื่อ: "เบนจามิน", เพศ: "ชาย"}; var obj3 = obj1; // outputs: trueconsole.log (obj1 == obj3); falseconsole.log (obj2 === obj3); // outputs: falseconsole.log (obj2 === obj3);ตัวอย่างข้างต้นส่งคืนจริงเนื่องจากพอยน์เตอร์ของ OBJ1 และ OB3 ชี้ไปที่ที่อยู่เดียวกันในหน่วยความจำ มันคล้ายกับแนวคิดของการส่งผ่านและอ้างอิงผ่านในภาษาที่มุ่งเน้นวัตถุ (Java/C ++) เพราะหากคุณต้องการตรวจสอบว่าวัตถุสองชิ้นมีความเท่าเทียมกันคุณต้องชัดเจนคุณกำลังพยายามตรวจสอบว่าคุณสมบัติของวัตถุทั้งสองนั้นเหมือนกันหรือไม่หรือค่าที่สอดคล้องกับคุณสมบัติเหมือนกันหรืออะไร?
ฟังก์ชันบุคคล (ชื่อ) {this.name = name; } var p1 = บุคคลใหม่ ("p1"); var p2 = บุคคลใหม่ ("p2"); console.log (p1 == p2); // person.prototype.sayhi = function () {// do sayhi ที่นี่} console.log (p1.sayhi () == p2.sayhi ()); // จริง console.log (p1.sayhi () == p2.sayhi ()); // จริง console.log (p1.sayhi () === p2.sayhi ()); //จริงข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น