ข้อบ่งชี้พร็อพเพอร์ตี้

การโต้ตอบส่วนใหญ่ระหว่างคุณกับพร็อพเพอร์ตี้ออบเจ็กต์มักจะ ระดับพื้นผิว รวมถึงการสร้างลิเทอรัลวัตถุและการตั้งค่าและการเข้าถึง ค่าพร็อพเพอร์ตี้โดยใช้คีย์ แต่คุณสามารถกำหนดค่าพร็อพเพอร์ตี้ใดๆ สำหรับการควบคุมโดยละเอียดเกี่ยวกับวิธีเข้าถึงพร็อพเพอร์ตี้เหล่านั้น เปลี่ยนแปลงและนิยาม พร็อพเพอร์ตี้ออบเจ็กต์ทุกรายการมีชุดแอตทริบิวต์ที่มองไม่เห็น ซึ่งมีข้อมูลเมตาที่เชื่อมโยงกับพร็อพเพอร์ตี้นั้น ซึ่งเรียกว่า "พร็อพเพอร์ตี้ ข้อบ่งชี้"

พร็อพเพอร์ตี้ใดๆ ก็ตามมีข้อบ่งชี้ 2 ประเภทดังนี้ ข้อบ่งชี้ข้อมูลและข้อบ่งชี้เครื่องมือเข้าถึง โดยข้อบ่งชี้ข้อมูลประกอบด้วย คู่คีย์และค่าที่มีค่าของพร็อพเพอร์ตี้ โดยไม่คำนึงว่า สามารถเขียนได้ กำหนดค่า หรือแจกแจงได้ ตัวบ่งชี้ตัวเข้าถึงประกอบด้วย ที่ดำเนินการเมื่อมีการตั้งค่า เปลี่ยนแปลง หรือเข้าถึงพร็อพเพอร์ตี้

พร็อพเพอร์ตี้แต่ละรายการเหล่านี้ใช้ชวเลขเดียวกับ [[Prototype]] เพื่อบ่งบอกว่า พร็อพเพอร์ตี้เหล่านี้ไม่ได้มีไว้เพื่อเข้าถึงโดยตรง ให้ใช้ Object.defineProperty() เมธอดแบบคงที่เพื่อกำหนดหรือแก้ไขคุณสมบัติของพร็อพเพอร์ตี้ ออบเจ็กต์ Object.defineProperty() ยอมรับอาร์กิวเมนต์ 3 ตัว ได้แก่ ออบเจ็กต์ที่จะดำเนินการ คีย์พร็อพเพอร์ตี้ที่จะสร้างหรือแก้ไข และออบเจ็กต์ที่มี ข้อบ่งชี้ที่เชื่อมโยงกับพร็อพเพอร์ตี้ที่กำลังสร้างหรือแก้ไข

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

const myObj = {};

Object.defineProperty(myObj, 'myProperty', {
  value: true,
  writable: false
});

myObj.myProperty;
> true

myObj.myProperty = false;

myObj.myProperty;
> true

ตัวอย่างเช่น เมื่อ [[Writable]] มีค่า false ให้พยายามตั้งค่าใหม่ สำหรับพร็อพเพอร์ตี้ที่เกี่ยวข้องไม่ทำงานนอกโหมดเข้มงวดโดยไม่มีการแจ้งเตือน และมีการส่ง ข้อผิดพลาดในโหมดเข้มงวด:

{
    const myObj = {};

    Object.defineProperty(myObj, 'myProperty', {
    value: true,
    writable: false
    });

    myObj.myProperty = false;
    myObj.myProperty;
}
> true

(function () {
    "use strict";
    const myObj = {};

    Object.defineProperty(myObj, 'myProperty', {
    value: true,
    writable: false
    });

    myObj.myProperty = false;
    myObj.myProperty;
}());\
> Uncaught TypeError: "myProperty" is read-only

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

Object.create() สร้างออบเจ็กต์ใหม่โดยใช้ออบเจ็กต์ที่มีอยู่เป็น ต้นแบบ ซึ่งจะช่วยให้วัตถุใหม่รับคุณสมบัติและเมธอดมาจากอีกรายการได้ ออบเจ็กต์ที่ผู้ใช้กำหนดในลักษณะเดียวกับที่ออบเจ็กต์สืบทอดพร็อพเพอร์ตี้ ต้นแบบ Object ในตัวของ JavaScript เมื่อคุณเรียกใช้ Object.create() ด้วย เป็นอาร์กิวเมนต์ โดยสร้างวัตถุว่างที่มีอ็อบเจ็กต์ที่ส่งผ่าน เครื่องต้นแบบ

const myCustomPrototype = {
  'myInheritedProp': 10
};

const newObject = Object.create( myCustomPrototype );

newObject;
> Object {  }
<prototype>: Object { myInheritedProp: 10 }
  myInheritedProp: 10
  <prototype>: Object { … }

Object.create สามารถใช้อาร์กิวเมนต์ที่ 2 ที่ระบุพร็อพเพอร์ตี้ของตนเองสำหรับ ออบเจ็กต์ที่สร้างขึ้นใหม่โดยใช้ไวยากรณ์ที่คล้ายกับ Object.defineProperty()— ซึ่งก็คือคีย์การแมปออบเจ็กต์กับชุดแอตทริบิวต์ข้อบ่งชี้

const myCustomPrototype = {
  'myInheritedProp': 10
};

const myObj = Object.create( myCustomPrototype, {
        myProperty: {
            value: "The new property value.",
            writable: true,
            configurable: true
        }
  });

myObj;
> Object { … }
    myProperty: "The new property value."
    <prototype>: Object { myInheritedProp: 10 }

ในตัวอย่างนี้ ออบเจ็กต์ใหม่ (myObj) ใช้ออบเจ็กต์ลิเทอรัล (myCustomPrototype) เป็นต้นแบบ ซึ่งในตัวเองจะมีโค้ดที่รับช่วงมา Object.prototype ส่งผลให้เกิดชุดต้นแบบที่รับช่วงมาซึ่งเรียกว่า เชนต้นแบบ แต่ละออบเจ็กต์มีต้นแบบ ไม่ว่าจะได้รับการมอบหมายหรือรับค่ามา ซึ่งมีต้นแบบของตัวเองหรือที่รับช่วงมา เชนนี้สิ้นสุดที่เวลา null ซึ่งไม่มีต้นแบบของตัวเอง

const myPrototype = {
  'protoProp': 10
};

const newObject = Object.setPrototypeOf( { 'objProp' : true }, myPrototype );

newObject;
> Object { objProp: true }
    objProp: true
    <prototype>: Object { protoProp: 10 }
        protoProp: 10
        <prototype>: Object { … }

พร็อพเพอร์ตี้ที่อยู่ในต้นแบบของค่าจะอยู่ใน "ระดับบนสุด" ของออบเจ็กต์ได้โดยไม่จำเป็นต้องเข้าถึงพร็อพเพอร์ตี้ต้นแบบโดยตรง

const objectLiteral = {
    "value" : true
};

objectLiteral;
> Object { value: true }
    value: true
    <prototype>: Object { … }

objectLiteral.toString();
"[object Object]"

รูปแบบนี้ยังคงใช้ได้กับห่วงโซ่ต้นแบบทั้งหมดที่เชื่อมโยงกับ : เมื่อพยายามเข้าถึงพร็อพเพอร์ตี้ ล่ามจะมองหาสิ่งนั้น พร็อพเพอร์ตี้ในแต่ละ "ระดับ" ของห่วงโซ่ต้นแบบ จากบนลงล่างจนถึง ค้นหาอสังหาริมทรัพย์หรือห่วงโซ่สิ้นสุด:

const myCustomPrototype = {
  'protoProp': "Prototype property value."
};

const myObj = Object.create( myCustomPrototype, {
    myProperty: {
        value: "Top-level property value.",
        writable: true,
        configurable: true
    }
});

myObj.protoProp;
> "Prototype property value."

ตรวจสอบความเข้าใจ