การวิเคราะห์รายละเอียดเชิงอ็อบเจ็กต์ JavaScript ของตัวอธิบายคุณสมบัติ

บทความนี้นำเสนอความรู้ที่เกี่ยวข้องเกี่ยวกับ JavaScript ซึ่งส่วนใหญ่จะแนะนำปัญหาที่เกี่ยวข้องกับเชิงวัตถุ รวมถึงตัวอธิบายแอตทริบิวต์ ตัวอธิบายข้อมูล ตัวอธิบายการเข้าถึง ฯลฯ เรามาดูกันดีกว่า

[คำแนะนำที่เกี่ยวข้อง: วิดีโอสอน JavaScript, ส่วนหน้าของเว็บ]

JavaScript เชิงวัตถุ - ตัวอธิบายคุณสมบัติ

จริง ๆ แล้ว JavaScript รองรับกระบวนทัศน์การเขียนโปรแกรมที่หลากหลาย รวมถึงการเขียนโปรแกรมเชิงฟังก์ชันและการเขียนโปรแกรมเชิงวัตถุ:

• ออบเจ็กต์ใน JavaScript ได้รับการออกแบบให้เป็น คอลเลกชันแอตทริบิวต์ที่ไม่เรียงลำดับ เช่น ตารางฮิปฮอป ที่ประกอบด้วยคีย์และค่า

• คีย์คือชื่อตัวระบุ และค่าสามารถเป็นประเภทใดก็ได้ หรืออ็อบเจ็กต์หรือประเภทฟังก์ชันอื่นๆ

• หากค่าเป็นฟังก์ชัน เราก็สามารถเรียกมัน ว่าเมธอดของอ็อบเจ็กต์ ได้

1. จะสร้างวัตถุได้อย่างไร?

• วิธีทั่วไปที่สุดในการสร้างอ็อบเจ็กต์ในยุคแรกๆ คือการใช้คลาส Object และใช้คีย์เวิร์ดใหม่เพื่อสร้างอ็อบเจ็กต์ จากนั้นเก็บคุณสมบัติหรือเมธอดลงในอ็อบเจ็กต์:

 var obj = วัตถุใหม่ ()
obj.name = 'ทำไม'
console.log (obj.name, obj) // ทำไม { ชื่อ: 'ทำไม' }

• ต่อมาเพื่อความสะดวกนักพัฒนาจำนวนมากได้สร้างวัตถุโดยตรงในรูปแบบของตัวอักษร:

 // วิธีการตามตัวอักษร var obj2 = { ชื่อ: 'jam' อายุ: '8' }
console.log (obj) // { ชื่อ: 'jam' อายุ: '8' }

2. คุณลักษณะของวัตถุการดำเนินการ - ตัวอธิบายคุณลักษณะ

ก่อนหน้านี้ คุณสมบัติของเราถูกกำหนดโดยตรงภายในวัตถุ หรือเพิ่มลงในวัตถุโดยตรง
แต่ด้วยวิธีนี้ เราไม่สามารถกำหนดข้อจำกัดบางประการกับคุณลักษณะนี้ได้ ตัวอย่างเช่น สามารถลบคุณลักษณะนี้โดย delect และจะสามารถข้ามผ่านระหว่างการข้ามผ่านแบบ for-in ได้หรือไม่
หากเราต้องการควบคุมการปฏิบัติงานที่แม่นยำยิ่งขึ้นสำหรับแอตทริบิวต์ ฉันสามารถใช้ แอตทริบิวต์ descriptors ได้ คุณสมบัติของวัตถุสามารถเพิ่มหรือแก้ไขได้อย่างถูกต้องผ่านตัวอธิบายคุณสมบัติ
ตัวอธิบายคุณสมบัติจำเป็นต้องใช้ Object.defineProperty เพื่อเพิ่มหรือแก้ไขคุณสมบัติ

属性描述符分为两种：数据描述符和存取描述符

2.1 ตัวอธิบายข้อมูล

Data descriptor คือคุณสมบัติที่มีค่าซึ่งอาจเขียนหรือไม่สามารถเขียนได้ ตัวอธิบายข้อมูลมีค่าคีย์ทางเลือกต่อไปนี้:

• ค่า: ค่าที่สอดคล้องกับแอตทริบิวต์นี้ อาจเป็นค่า JavaScript ที่ถูกต้อง (ค่าตัวเลข วัตถุ ฟังก์ชัน ฯลฯ) ค่าเริ่มต้นไม่ได้กำหนดไว้

• เขียนได้: ถ้าและเพียงถ้าการเขียนของคุณลักษณะนี้เป็นจริง ค่าสามารถเปลี่ยนแปลงได้โดยตัวดำเนินการคัดลอก ค่าเริ่มต้นเป็นเท็จ

• กำหนดค่าได้: หากและหากการกำหนดค่าของแอตทริบิวต์เป็นจริง สามารถเปลี่ยนตัวอธิบายแอตทริบิวต์ได้ และยังสามารถลบแอตทริบิวต์ออกจากออบเจ็กต์ที่เกี่ยวข้องได้ด้วย ค่าเริ่มต้นเป็นเท็จ

• นับได้: ถ้าและหากคุณสมบัติที่นับได้เป็นจริง คุณสมบัตินั้นก็สามารถปรากฏในคุณสมบัติการแจงนับของวัตถุได้ ค่าเริ่มต้นเป็นเท็จ

2.2.1 รับคำอธิบายคุณสมบัติ Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor() วิธีการส่งคืนตัวอธิบายคุณสมบัติที่สอดคล้องกับคุณสมบัติของตัวเองบนวัตถุที่ระบุ

 Object.getOwnPropertyDescriptor (obj, เสา)

• obj: วัตถุเป้าหมายที่จะพบ

• prop: ชื่อแอตทริบิวต์ในวัตถุเป้าหมาย (ประเภทสตริง)

• ส่งคืนค่า: หากคุณสมบัติที่ระบุมีอยู่บนวัตถุ วัตถุตัวอธิบายคุณสมบัติจะถูกส่งกลับ มิฉะนั้นจะถูกส่งกลับไม่ได้กำหนด

หมายเหตุ: ถ้าพารามิเตอร์แรกของวิธีนี้ไม่ใช่วัตถุ ข้อผิดพลาด (TypeError) จะถูกรายงาน

2.1.2. ตั้งค่าตัวอธิบายคุณสมบัติ Object.defineProperty

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新增的属性，该新属性是不可修改、不可删除以及不可枚举的

(1) สามารถลบการกำหนดค่าบนออบเจ็กต์ได้หรือไม่

 วาร์ obj = {
ชื่อ'แจม'
อายุ: 8
-
Object.defineProperty (obj, 'ที่อยู่', {
ค่า: 'เหอเป่ย',
// กำหนดค่าได้ คุณสมบัตินี้ไม่สามารถลบได้ และคุณไม่สามารถใช้ DefineProperty เพื่อแก้ไขตัวอธิบายคุณสมบัติอีกครั้ง กำหนดค่าได้: false,

-
ลบ obj.address // ฉันต้องการใช้ Delete เพื่อลบแอตทริบิวต์นี้ obj.address = 'Guangzhou' // ฉันต้องการแก้ไขค่าที่อยู่แอตทริบิวต์ใน obj เป็น Guangzhou console.log(obj.address) // ผลลัพธ์ผลลัพธ์: Hebei

เนื่องจากค่าที่กำหนดคอนฟิกตัวอธิบายแอ็ตทริบิวต์เป็นเท็จ และไม่สามารถลบหรือแก้ไขได้ การลบและการแก้ไขจะไม่มีผล

(2) สามารถแจกแจงและสำรวจจำนวนนับได้หรือไม่

 วาร์ obj = {
ชื่อ'แจม'
อายุ: 8}Object.defineProperty(obj, 'เพศ', {
ค่า: 'ชาย',
// การกำหนดค่าแจกแจงว่าคุณสมบัตินี้สามารถระบุได้หรือไม่ แจกแจง: จริง}) สำหรับ (i ใน obj) {
console.log(i)}

เมื่อนับได้: เท็จ ผลลัพธ์ที่ได้คือชื่ออายุ
เมื่อนับได้: จริง ผลลัพธ์ที่ได้คือชื่อ อายุ เพศ

(3) เขียนได้ คุณลักษณะนี้ควบคุมว่าแอตทริบิวต์สามารถกำหนดค่าได้หรือไม่ (เขียนค่า)

 วาร์ obj = {
ชื่อ'แจม'
อายุ: 8}Object.defineProperty (obj, 'คะแนน', {
ค่าตัว: 80,
// เขียนได้: จริง
เขียนได้: false})obj.score = 100 console.log(obj.score) // 80

เนื่องจากค่าของ writeable เป็นเท็จ เมื่อคะแนนถูกแก้ไขเป็น 100 การแก้ไขจะไม่สำเร็จ และเอาต์พุตสุดท้ายคือ 80

2.1.3. ตั้งค่าตัวอธิบายคุณสมบัติหลายตัว Object.defineProperties ในเวลาเดียวกัน

คุณรู้สึกว่าการตั้งค่าตัวอธิบายคุณสมบัติของคุณสมบัติครั้งละหนึ่งรายการเป็นเรื่องยุ่งยากหรือไม่ Object.defineProperties สามารถช่วยคุณแก้ปัญหาได้
Object.defineProperties() วิธีการกำหนดคุณสมบัติใหม่อย่างน้อยหนึ่งรายการหรือแก้ไขคุณสมบัติที่มีอยู่สำหรับวัตถุและส่งกลับวัตถุ

 Object.defineProperties (obj อุปกรณ์ประกอบฉาก)

• obj: วัตถุที่จะกำหนดคุณสมบัติ

• อุปกรณ์ประกอบฉาก: อ็อบเจ็กต์ที่มีคุณสมบัตินับได้หรือตัวอธิบายคุณสมบัติที่แก้ไขจะต้องถูกกำหนด

• ส่งคืนค่า: วัตถุที่ส่งผ่านไปยังฟังก์ชัน

รหัสตัวอย่างจะเป็นดังนี้:

 วาร์ obj = {
ชื่อ: 'แยม',} Object.defineProperties (obj, {
'อายุ': {
ค่าตัว: 28,
เขียนได้: จริง,
กำหนดค่าได้: เท็จ,
นับได้: จริง
-
'งาน': {
ค่า: 'ทนายความ',
เขียนได้: จริง,
กำหนดค่าได้: เท็จ,
นับได้: จริง
-
'เพศ': {
ค่า: 'ชาย',
เขียนได้: เท็จ,
กำหนดค่าได้: เท็จ,
นับได้: จริง
-
'ความสูง': {
ค่า: '1.8 ม.',
เขียนได้: เท็จ,
กำหนดค่าได้: เท็จ,
นับได้: จริง
}})console.log(obj) // ชื่อ: 'jam' อายุ: 28 งาน: 'ทนายความ' เพศ: 'ชาย' ส่วนสูง: '1.8m' }

2.2 ตัวอธิบายการเข้าถึง

ตัวอธิบายการเข้าถึงเป็นคุณสมบัติที่อธิบายโดยคู่ฟังก์ชัน getter-setter ตัวอธิบายการเข้าถึงมีค่าคีย์เผื่อเลือกต่อไปนี้:

• get: จัดเตรียมเมธอด getter สำหรับคุณสมบัติ หากไม่มี getter แสดงว่าไม่ได้กำหนดไว้ เมื่อเข้าถึงคุณสมบัตินี้ เมธอดจะถูกดำเนินการ ไม่มีการส่งผ่านพารามิเตอร์ใด ๆ เมื่อเมธอดถูกดำเนินการ แต่ออบเจ็กต์นี้จะถูกส่งผ่านเข้าไป

• set: จัดเตรียมวิธีการ setter สำหรับคุณสมบัติ หากไม่มี setter ก็จะไม่ได้กำหนดไว้ วิธีการนี้จะถูกทริกเกอร์เมื่อมีการปรับเปลี่ยนค่าคุณสมบัติ วิธีนี้จะยอมรับพารามิเตอร์เดียวซึ่งเป็นค่าพารามิเตอร์ใหม่ของคุณสมบัติ

• กำหนดค่าได้: หากและหากการกำหนดค่าของแอตทริบิวต์เป็นจริง สามารถเปลี่ยนตัวอธิบายแอตทริบิวต์ได้ และยังสามารถลบแอตทริบิวต์ออกจากออบเจ็กต์ที่เกี่ยวข้องได้ด้วย ค่าเริ่มต้นเป็นเท็จ

• Enurnerable: ถ้าเพียงแต่ถ้า enurnerable ของแอตทริบิวต์เป็นจริง คุณลักษณะนั้นสามารถปรากฏในแอตทริบิวต์การแจงนับของออบเจ็กต์ได้ ค่าเริ่มต้นเป็นเท็จ

การใช้การกำหนดค่าและระบุค่าได้นั้นสอดคล้องกับข้อมูลในตัวอธิบาย ดังนั้นฉันจะไม่อธิบายรายละเอียดเหล่านี้ที่นี่
ส่วนใหญ่จะพูดถึงการใช้วิธี get และ set

2.2.1 การใช้ get() และ set()

 วาร์ obj = {
ชื่อ'แจม'
อายุ: 8,
_ที่อยู่: 'เหอเป่ย'
-

// สถานการณ์การใช้งานของตัวอธิบายการเข้าถึง // 1. ซ่อนแอตทริบิวต์ส่วนตัวบางอย่างที่คาดว่าจะถูกใช้และกำหนดโดยโลกภายนอกโดยตรง // 2. หากเราต้องการเข้าใจกระบวนการเข้าถึงและตั้งค่าของแอตทริบิวต์บางตัว นอกจากนี้เรายังจะใช้มัน ตัวอธิบายคุณสมบัติการจัดเก็บข้อมูล Object.defineProperty(obj, 'address', {
นับได้: จริง,
กำหนดค่าได้: จริง,
ได้รับ: ฟังก์ชั่น () {
ฟู()
ส่งคืนสิ่งนี้._ที่อยู่
-
ชุด: ฟังก์ชั่น (ค่า) {
บาร์()
this._address = ค่า
-
-
ฟังก์ชั่นฟู () {
console.log("ดักจับค่าของที่อยู่หนึ่งครั้ง")
-

แถบฟังก์ชัน () {
console.log("ค่าของที่อยู่ถูกตั้งค่าครั้งเดียว")
-

คอนโซลโค้ดตัวอย่างข้างต้นพิมพ์ผลลัพธ์ต่อไปนี้: