บทความนี้นำเสนอความรู้ที่เกี่ยวข้องเกี่ยวกับ JavaScript ซึ่งส่วนใหญ่จะแนะนำปัญหาที่เกี่ยวข้องกับเชิงวัตถุ รวมถึงตัวอธิบายแอตทริบิวต์ ตัวอธิบายข้อมูล ตัวอธิบายการเข้าถึง ฯลฯ เรามาดูกันดีกว่า
[คำแนะนำที่เกี่ยวข้อง: วิดีโอสอน JavaScript, ส่วนหน้าของเว็บ]
จริง ๆ แล้ว JavaScript รองรับกระบวนทัศน์การเขียนโปรแกรมที่หลากหลาย รวมถึงการเขียนโปรแกรมเชิงฟังก์ชันและการเขียนโปรแกรมเชิงวัตถุ:
ออบเจ็กต์ใน JavaScript ได้รับการออกแบบให้เป็น คอลเลกชันแอตทริบิวต์ที่ไม่เรียงลำดับ เช่น ตารางฮิปฮอป ที่ประกอบด้วยคีย์และค่า
คีย์คือชื่อตัวระบุ และค่าสามารถเป็นประเภทใดก็ได้ หรืออ็อบเจ็กต์หรือประเภทฟังก์ชันอื่นๆ
หากค่าเป็นฟังก์ชัน เราก็สามารถเรียกมัน ว่าเมธอดของอ็อบเจ็กต์ ได้
วิธีทั่วไปที่สุดในการสร้างอ็อบเจ็กต์ในยุคแรกๆ คือการใช้คลาส Object และใช้คีย์เวิร์ดใหม่เพื่อสร้างอ็อบเจ็กต์ จากนั้นเก็บคุณสมบัติหรือเมธอดลงในอ็อบเจ็กต์:
var obj = วัตถุใหม่ () obj.name = 'ทำไม' console.log (obj.name, obj) // ทำไม { ชื่อ: 'ทำไม' }
ต่อมาเพื่อความสะดวกนักพัฒนาจำนวนมากได้สร้างวัตถุโดยตรงในรูปแบบของตัวอักษร:
// วิธีการตามตัวอักษร var obj2 = { ชื่อ: 'jam' อายุ: '8' } console.log (obj) // { ชื่อ: 'jam' อายุ: '8' }
ก่อนหน้านี้ คุณสมบัติของเราถูกกำหนดโดยตรงภายในวัตถุ หรือเพิ่มลงในวัตถุโดยตรง
แต่ด้วยวิธีนี้ เราไม่สามารถกำหนดข้อจำกัดบางประการกับคุณลักษณะนี้ได้ ตัวอย่างเช่น สามารถลบคุณลักษณะนี้โดย delect
และจะสามารถข้ามผ่านระหว่างการข้ามผ่านแบบ for-in
ได้หรือไม่
หากเราต้องการควบคุมการปฏิบัติงานที่แม่นยำยิ่งขึ้นสำหรับแอตทริบิวต์ ฉันสามารถใช้ แอตทริบิวต์ descriptors ได้ คุณสมบัติของวัตถุสามารถเพิ่มหรือแก้ไขได้อย่างถูกต้องผ่านตัวอธิบายคุณสมบัติ
ตัวอธิบายคุณสมบัติจำเป็นต้องใช้ Object.defineProperty
เพื่อเพิ่มหรือแก้ไขคุณสมบัติ
属性描述符分为两种:数据描述符和存取描述符
Data descriptor คือคุณสมบัติที่มีค่าซึ่งอาจเขียนหรือไม่สามารถเขียนได้ ตัวอธิบายข้อมูลมีค่าคีย์ทางเลือกต่อไปนี้:
ค่า: ค่าที่สอดคล้องกับแอตทริบิวต์นี้ อาจเป็นค่า JavaScript ที่ถูกต้อง (ค่าตัวเลข วัตถุ ฟังก์ชัน ฯลฯ) ค่าเริ่มต้นไม่ได้กำหนดไว้
เขียนได้: ถ้าและเพียงถ้าการเขียนของคุณลักษณะนี้เป็นจริง ค่าสามารถเปลี่ยนแปลงได้โดยตัวดำเนินการคัดลอก ค่าเริ่มต้นเป็นเท็จ
กำหนดค่าได้: หากและหากการกำหนดค่าของแอตทริบิวต์เป็นจริง สามารถเปลี่ยนตัวอธิบายแอตทริบิวต์ได้ และยังสามารถลบแอตทริบิวต์ออกจากออบเจ็กต์ที่เกี่ยวข้องได้ด้วย ค่าเริ่มต้นเป็นเท็จ
นับได้: ถ้าและหากคุณสมบัติที่นับได้เป็นจริง คุณสมบัตินั้นก็สามารถปรากฏในคุณสมบัติการแจงนับของวัตถุได้ ค่าเริ่มต้นเป็นเท็จ
Object.getOwnPropertyDescriptor() วิธีการส่งคืนตัวอธิบายคุณสมบัติที่สอดคล้องกับคุณสมบัติของตัวเองบนวัตถุที่ระบุ
Object.getOwnPropertyDescriptor (obj, เสา)
obj: วัตถุเป้าหมายที่จะพบ
prop: ชื่อแอตทริบิวต์ในวัตถุเป้าหมาย (ประเภทสตริง)
ส่งคืนค่า: หากคุณสมบัติที่ระบุมีอยู่บนวัตถุ วัตถุตัวอธิบายคุณสมบัติจะถูกส่งกลับ มิฉะนั้นจะถูกส่งกลับไม่ได้กำหนด
หมายเหตุ: ถ้าพารามิเตอร์แรกของวิธีนี้ไม่ใช่วัตถุ ข้อผิดพลาด (TypeError) จะถูกรายงาน
Object.defineProperty() วิธีการกำหนดคุณสมบัติใหม่บนวัตถุโดยตรงหรือแก้ไขคุณสมบัติที่มีอยู่ของวัตถุและส่งกลับวัตถุ
Object.defineProperty (obj, เสา, อธิบาย)
obj: วัตถุที่จะกำหนดคุณสมบัติ
prop: ชื่อของคุณสมบัติที่จะกำหนดหรือแก้ไข
descriptor: ตัวอธิบายแอตทริบิวต์ที่จะกำหนดหรือแก้ไข
ส่งคืนค่า: วัตถุที่ส่งผ่านไปยังฟังก์ชัน
โค้ดตัวอย่างต่อไปนี้แสดงการตั้งค่าและการได้รับตัวอธิบายแอ็ตทริบิวต์ var obj = { ชื่อ'แจม' อายุ: 8 - Object.defineProperty (obj, 'งาน', { ค่า: 'ทนายความ' - console.log (Object.getOwnPropertyDescriptor (obj, 'age')) // { ค่า: 8, เขียนได้: จริง, นับได้: จริง, กำหนดค่าได้: จริง } console.log(obj.job) // ทนายความ // คุณสมบัติใหม่ผ่าน DefinProperty คุณสมบัติใหม่นี้ไม่สามารถแก้ไขได้ ไม่สามารถลบได้ และไม่สามารถนับได้ console.log(Object.getOwnPropertyDescriptor(obj, 'job')) / / {value: 'ทนายความ', เขียนได้: false, นับได้: false, กำหนดค่าได้: false}
注意:通过defineProperty新增的属性,该新属性是不可修改、不可删除以及不可枚举的
วาร์ obj = { ชื่อ'แจม' อายุ: 8 - Object.defineProperty (obj, 'ที่อยู่', { ค่า: 'เหอเป่ย', // กำหนดค่าได้ คุณสมบัตินี้ไม่สามารถลบได้ และคุณไม่สามารถใช้ DefineProperty เพื่อแก้ไขตัวอธิบายคุณสมบัติอีกครั้ง กำหนดค่าได้: false, - ลบ obj.address // ฉันต้องการใช้ Delete เพื่อลบแอตทริบิวต์นี้ obj.address = 'Guangzhou' // ฉันต้องการแก้ไขค่าที่อยู่แอตทริบิวต์ใน obj เป็น Guangzhou console.log(obj.address) // ผลลัพธ์ผลลัพธ์: Hebei
เนื่องจากค่าที่กำหนดคอนฟิกตัวอธิบายแอ็ตทริบิวต์เป็นเท็จ และไม่สามารถลบหรือแก้ไขได้ การลบและการแก้ไขจะไม่มีผล
วาร์ obj = { ชื่อ'แจม' อายุ: 8}Object.defineProperty(obj, 'เพศ', { ค่า: 'ชาย', // การกำหนดค่าแจกแจงว่าคุณสมบัตินี้สามารถระบุได้หรือไม่ แจกแจง: จริง}) สำหรับ (i ใน obj) { console.log(i)}
เมื่อนับได้: เท็จ ผลลัพธ์ที่ได้คือชื่ออายุ
เมื่อนับได้: จริง ผลลัพธ์ที่ได้คือชื่อ อายุ เพศ
วาร์ obj = { ชื่อ'แจม' อายุ: 8}Object.defineProperty (obj, 'คะแนน', { ค่าตัว: 80, // เขียนได้: จริง เขียนได้: false})obj.score = 100 console.log(obj.score) // 80
เนื่องจากค่าของ writeable เป็นเท็จ เมื่อคะแนนถูกแก้ไขเป็น 100 การแก้ไขจะไม่สำเร็จ และเอาต์พุตสุดท้ายคือ 80
คุณรู้สึกว่าการตั้งค่าตัวอธิบายคุณสมบัติของคุณสมบัติครั้งละหนึ่งรายการเป็นเรื่องยุ่งยากหรือไม่ Object.defineProperties สามารถช่วยคุณแก้ปัญหาได้
Object.defineProperties() วิธีการกำหนดคุณสมบัติใหม่อย่างน้อยหนึ่งรายการหรือแก้ไขคุณสมบัติที่มีอยู่สำหรับวัตถุและส่งกลับวัตถุ
Object.defineProperties (obj อุปกรณ์ประกอบฉาก)
obj: วัตถุที่จะกำหนดคุณสมบัติ
อุปกรณ์ประกอบฉาก: อ็อบเจ็กต์ที่มีคุณสมบัตินับได้หรือตัวอธิบายคุณสมบัติที่แก้ไขจะต้องถูกกำหนด
ส่งคืนค่า: วัตถุที่ส่งผ่านไปยังฟังก์ชัน
รหัสตัวอย่างจะเป็นดังนี้:
วาร์ obj = { ชื่อ: 'แยม',} Object.defineProperties (obj, { 'อายุ': { ค่าตัว: 28, เขียนได้: จริง, กำหนดค่าได้: เท็จ, นับได้: จริง - 'งาน': { ค่า: 'ทนายความ', เขียนได้: จริง, กำหนดค่าได้: เท็จ, นับได้: จริง - 'เพศ': { ค่า: 'ชาย', เขียนได้: เท็จ, กำหนดค่าได้: เท็จ, นับได้: จริง - 'ความสูง': { ค่า: '1.8 ม.', เขียนได้: เท็จ, กำหนดค่าได้: เท็จ, นับได้: จริง }})console.log(obj) // ชื่อ: 'jam' อายุ: 28 งาน: 'ทนายความ' เพศ: 'ชาย' ส่วนสูง: '1.8m' }
ตัวอธิบายการเข้าถึงเป็นคุณสมบัติที่อธิบายโดยคู่ฟังก์ชัน getter-setter ตัวอธิบายการเข้าถึงมีค่าคีย์เผื่อเลือกต่อไปนี้:
get: จัดเตรียมเมธอด getter สำหรับคุณสมบัติ หากไม่มี getter แสดงว่าไม่ได้กำหนดไว้ เมื่อเข้าถึงคุณสมบัตินี้ เมธอดจะถูกดำเนินการ ไม่มีการส่งผ่านพารามิเตอร์ใด ๆ เมื่อเมธอดถูกดำเนินการ แต่ออบเจ็กต์นี้จะถูกส่งผ่านเข้าไป
set: จัดเตรียมวิธีการ setter สำหรับคุณสมบัติ หากไม่มี setter ก็จะไม่ได้กำหนดไว้ วิธีการนี้จะถูกทริกเกอร์เมื่อมีการปรับเปลี่ยนค่าคุณสมบัติ วิธีนี้จะยอมรับพารามิเตอร์เดียวซึ่งเป็นค่าพารามิเตอร์ใหม่ของคุณสมบัติ
กำหนดค่าได้: หากและหากการกำหนดค่าของแอตทริบิวต์เป็นจริง สามารถเปลี่ยนตัวอธิบายแอตทริบิวต์ได้ และยังสามารถลบแอตทริบิวต์ออกจากออบเจ็กต์ที่เกี่ยวข้องได้ด้วย ค่าเริ่มต้นเป็นเท็จ
Enurnerable: ถ้าเพียงแต่ถ้า enurnerable ของแอตทริบิวต์เป็นจริง คุณลักษณะนั้นสามารถปรากฏในแอตทริบิวต์การแจงนับของออบเจ็กต์ได้ ค่าเริ่มต้นเป็นเท็จ
การใช้การกำหนดค่าและระบุค่าได้นั้นสอดคล้องกับข้อมูลในตัวอธิบาย ดังนั้นฉันจะไม่อธิบายรายละเอียดเหล่านี้ที่นี่
ส่วนใหญ่จะพูดถึงการใช้วิธี get และ set
วาร์ obj = { ชื่อ'แจม' อายุ: 8, _ที่อยู่: 'เหอเป่ย' - // สถานการณ์การใช้งานของตัวอธิบายการเข้าถึง // 1. ซ่อนแอตทริบิวต์ส่วนตัวบางอย่างที่คาดว่าจะถูกใช้และกำหนดโดยโลกภายนอกโดยตรง // 2. หากเราต้องการเข้าใจกระบวนการเข้าถึงและตั้งค่าของแอตทริบิวต์บางตัว นอกจากนี้เรายังจะใช้มัน ตัวอธิบายคุณสมบัติการจัดเก็บข้อมูล Object.defineProperty(obj, 'address', { นับได้: จริง, กำหนดค่าได้: จริง, ได้รับ: ฟังก์ชั่น () { ฟู() ส่งคืนสิ่งนี้._ที่อยู่ - ชุด: ฟังก์ชั่น (ค่า) { บาร์() this._address = ค่า - - ฟังก์ชั่นฟู () { console.log("ดักจับค่าของที่อยู่หนึ่งครั้ง") - แถบฟังก์ชัน () { console.log("ค่าของที่อยู่ถูกตั้งค่าครั้งเดียว") -
คอนโซลโค้ดตัวอย่างข้างต้นพิมพ์ผลลัพธ์ต่อไปนี้: