JavaScript Academy · บทเรียน

Reflect API

ส่งต่อการดำเนินการด้วยเมธอดของ Reflect

Reflect API เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

Reflect คืออะไร

รีเฟล็กต์คืออ็อบเจ็กต์ที่มีอยู่ในตัวภาษา พร้อมเมธอดสำหรับดำเนินการระดับพื้นฐานกับอ็อบเจ็กต์ เช่น การอ่าน การเขียน การลบ และอื่น ๆ

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

Reflect.get

Reflect.get(target, prop) อ่านคุณสมบัติได้เหมือนกับ target[prop] แต่เขียนในรูปการเรียกใช้ฟังก์ชันที่ชัดเจน

const obj = { name: 'Ada', age: 36 };

console.log(Reflect.get(obj, 'name'));
console.log(Reflect.get(obj, 'age'));

Reflect.set

Reflect.set(target, prop, value) เขียนคุณสมบัติและส่งคืน true หรือ false เพื่อระบุว่าสำเร็จหรือไม่ เช่นเดียวกับที่กับดัก set ต้องการ

const obj = {};
const ok = Reflect.set(obj, 'score', 42);

console.log(ok);
console.log(obj.score);

Reflect.has และ deleteProperty

Reflect.has ทำงานสอดคล้องกับตัวดำเนินการ in ส่วน Reflect.deleteProperty ทำงานสอดคล้องกับ delete ทั้งสองอย่างอยู่ในรูปฟังก์ชันที่ส่งคืนค่าบูลีน

const obj = { a: 1, b: 2 };

console.log(Reflect.has(obj, 'a'));
console.log(Reflect.deleteProperty(obj, 'b'));
console.log(Reflect.has(obj, 'b'));

Reflect.ownKeys

Reflect.ownKeys ส่งคืนคีย์คุณสมบัติของอ็อบเจ็กต์เองทั้งหมด รวมถึงสัญลักษณ์และคีย์ที่แจกแจงไม่ได้ จึงครอบคลุมกว่า Object.keys

const obj = { a: 1, b: 2 };
Object.defineProperty(obj, 'hidden', { value: 3, enumerable: false });

console.log(Object.keys(obj));
console.log(Reflect.ownKeys(obj));

การส่งต่อภายในพร็อกซี

จุดเด่นที่แท้จริงคือ ภายในกับดัก ให้เรียกใช้เมธอด Reflect ที่ตรงกันเพื่อทำงานตามพฤติกรรมเริ่มต้น แล้วเพิ่มตรรกะที่กำหนดเองไว้รอบ ๆ

const proxy = new Proxy({ v: 1 }, {
  get(target, prop, receiver) {
    console.log('reading ' + prop);
    return Reflect.get(target, prop, receiver);
  }
});

console.log(proxy.v);

การส่งต่อ set อย่างถูกต้อง

การใช้ Reflect.set ภายในกับดัก set จะส่งคืนค่าบูลีนที่ถูกต้องให้โดยอัตโนมัติ คุณจึงไม่ต้องจำส่งคืน true ด้วยตนเอง

const proxy = new Proxy({}, {
  set(target, prop, value, receiver) {
    console.log('writing ' + prop);
    return Reflect.set(target, prop, value, receiver);
  }
});

proxy.x = 10;
console.log(proxy.x);

เหตุใด receiver จึงสำคัญ

การส่ง receiver ให้กับ Reflect.get และ Reflect.set ช่วยให้เก็ตเตอร์และเซ็ตเตอร์ทำงานด้วย this ที่ถูกต้อง ซึ่งสำคัญเมื่ออ็อบเจ็กต์สืบทอดต่อกัน

const base = { get label() { return 'id-' + this.id; } };
const proxy = new Proxy(base, {
  get(target, prop, receiver) {
    return Reflect.get(target, prop, receiver);
  }
});
const child = Object.create(proxy);
child.id = 7;
console.log(child.label);

Reflect.apply

Reflect.apply(fn, thisArg, argsArray) เรียกใช้ฟังก์ชันด้วย this ที่กำหนดและอาร์เรย์ของอาร์กิวเมนต์ เป็นทางเลือกที่สะอาดกว่า fn.apply

function greet(greeting, name) {
  return greeting + ', ' + name;
}

console.log(Reflect.apply(greet, null, ['Hello', 'Ada']));

Reflect.construct

Reflect.construct(Cls, argsArray) สร้างอินสแตนซ์ได้เทียบเท่ากับ new Cls(...args) แต่รับอาร์เรย์ของอาร์กิวเมนต์

class Point {
  constructor(x, y) { this.x = x; this.y = y; }
}

const p = Reflect.construct(Point, [3, 4]);
console.log(p.x, p.y);

เหตุใด Reflect จึงสำคัญ

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

const audited = new Proxy({ balance: 100 }, {
  set(t, p, v, r) {
    console.log(p + ': ' + t[p] + ' -> ' + v);
    return Reflect.set(t, p, v, r);
  }
});
audited.balance = 150;
console.log(audited.balance);

ตรวจสอบความเข้าใจอย่างรวดเร็ว

เหตุใดจึงเรียกใช้ Reflect.get(target, prop, receiver) ภายในกับดัก get แทนที่จะใช้ target[prop]

ทบทวน: ส่วนเชื่อมต่อ Reflect

คุณได้เรียนรู้เครื่องมือที่ทำงานคู่กับพร็อกซี:

Reflect มีการดำเนินการเริ่มต้นในรูปฟังก์ชัน ได้แก่ get set has deleteProperty และ ownKeys
เมธอดของ Reflect สอดคล้องกับกับดักของพร็อกซีแบบหนึ่งต่อหนึ่ง
การส่งต่อผ่าน Reflect พร้อม receiver ช่วยให้การสืบทอดทำงานได้ถูกต้อง
Reflect.apply และ Reflect.construct ใช้เรียกฟังก์ชันและสร้างอินสแตนซ์ได้อย่างเป็นระเบียบ

คำถามที่พบบ่อย

บทเรียน “Reflect API” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Reflect API” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Reflect API”

ส่งต่อการดำเนินการด้วยเมธอดของ Reflect คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “Reflect API” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy