Reflect API | Office.in.th

Reflect API: ก้าวข้ามขีดจำกัดการเข้าถึงและจัดการ Object ใน JavaScript

ในบทเรียนก่อนหน้า เราได้เรียนรู้เกี่ยวกับ Proxy Object ซึ่งเป็นเครื่องมือที่ทรงพลังในการดักจับและแก้ไขการทำงานของ Object ใน JavaScript ในบทนี้ เราจะมาทำความรู้จักกับเพื่อนร่วมงานของ Proxy ที่ชื่อว่า Reflect API ซึ่งเป็น API ที่ช่วยให้เราสามารถทำการ introspection (การตรวจสอบโครงสร้างภายใน) และ manipulation (การจัดการ) Object ได้อย่างละเอียดและปลอดภัยยิ่งขึ้น

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

Reflect API คืออะไร?

Reflect API เป็น Object ที่มี static method (เมธอดที่เรียกใช้ได้โดยตรงจาก Object ไม่ต้องสร้าง instance) หลายตัว ซึ่งแต่ละตัวจะสอดคล้องกับการทำงานพื้นฐานของ JavaScript operators และ statements เช่น การเข้าถึง property (. หรือ []), การกำหนดค่า property, การเรียกฟังก์ชัน และอื่นๆ

ข้อดีหลักๆ ของการใช้ Reflect API:

ความสอดคล้อง: Reflect API ให้วิธีการที่สอดคล้องกันในการทำงานกับ Object ไม่ว่าจะเป็นการเข้าถึง property, การเรียกฟังก์ชัน หรือการสร้าง Object ใหม่
การจัดการข้อผิดพลาดที่ดีกว่า: Reflect API จะ return ค่า Boolean (true หรือ false) เมื่อการดำเนินการสำเร็จหรือไม่สำเร็จ แทนที่จะ throw error โดยตรง ทำให้เราสามารถจัดการ error ได้อย่างละเอียด
การทำงานร่วมกับ Proxy: Reflect API ถูกออกแบบมาให้ทำงานร่วมกับ Proxy ได้อย่างราบรื่น ทำให้เราสามารถดักจับและแก้ไขการทำงานของ Object ได้อย่างยืดหยุ่น

Reflect.get(): อ่านค่า Property อย่างปลอดภัย

Reflect.get(target, propertyKey, receiver) เป็น method ที่ใช้สำหรับอ่านค่าของ property จาก object target โดยมี propertyKey เป็นชื่อของ property ที่ต้องการอ่าน และ receiver เป็น value ของ this ภายใน getter function (ถ้ามี) การใช้ Reflect.get() มีประโยชน์อย่างยิ่งเมื่อทำงานกับ Proxy เพราะช่วยให้เราสามารถเข้าถึง property ของ target ได้อย่างปลอดภัยโดยไม่ต้องกังวลเรื่อง scope ของ this

const person = {
  name: 'John Doe',
  age: 30,
  getGreeting() {
    return `Hello, my name is ${this.name}`;
  }
};

// อ่านค่า property 'name'
const name = Reflect.get(person, 'name');
console.log(name); // Output: John Doe

// อ่านค่า property 'getGreeting' และเรียกใช้
const greeting = Reflect.get(person, 'getGreeting');
console.log(greeting.call(person)); // Output: Hello, my name is John Doe

// ตัวอย่างการใช้งานกับ Proxy
const proxy = new Proxy(person, {
  get(target, propertyKey, receiver) {
    console.log(`Accessing property: ${propertyKey}`);
    return Reflect.get(target, propertyKey, receiver);
  }
});

console.log(proxy.name); // Output: Accessing property: name, John Doe
console.log(proxy.getGreeting()); // Output: Accessing property: getGreeting, Hello, my name is John Doe

กรณีใช้งานจริง: การเข้าถึง property ที่อาจไม่มีอยู่จริง โดยใช้ Reflect.get() จะไม่ throw error แต่จะ return undefined ทำให้เราสามารถตรวจสอบค่าได้ง่ายขึ้น

const obj = {};
const value = Reflect.get(obj, 'nonExistentProperty');
console.log(value); // Output: undefined

if (value === undefined) {
  console.log('Property does not exist.');
}

Reflect.set(): กำหนดค่า Property อย่างปลอดภัย

Reflect.set(target, propertyKey, value, receiver) เป็น method ที่ใช้สำหรับกำหนดค่าให้กับ property ของ object target โดยมี propertyKey เป็นชื่อของ property ที่ต้องการกำหนดค่า และ value เป็นค่าที่ต้องการกำหนดให้ receiver เป็น value ของ this ภายใน setter function (ถ้ามี) Reflect.set() จะ return true หากการกำหนดค่าสำเร็จ และ false หากไม่สำเร็จ

const person = {
  name: 'John Doe',
  age: 30
};

// กำหนดค่า property 'age'
const success = Reflect.set(person, 'age', 31);
console.log(success); // Output: true
console.log(person.age); // Output: 31

// ตัวอย่างการใช้งานกับ Proxy
const proxy = new Proxy(person, {
  set(target, propertyKey, value, receiver) {
    console.log(`Setting property: ${propertyKey} to ${value}`);
    return Reflect.set(target, propertyKey, value, receiver);
  }
});

proxy.name = 'Jane Doe'; // Output: Setting property: name to Jane Doe
console.log(person.name); // Output: Jane Doe

กรณีใช้งานจริง: การป้องกันการกำหนดค่า property ที่ read-only โดยใช้ Reflect.set() จะ return false แทนที่จะ throw error

const obj = {};
Object.defineProperty(obj, 'readOnly', {
  value: 'This is read-only',
  writable: false
});

const success = Reflect.set(obj, 'readOnly', 'Attempt to change');
console.log(success); // Output: false
console.log(obj.readOnly); // Output: This is read-only

Reflect.apply(): เรียกฟังก์ชันอย่างยืดหยุ่น

Reflect.apply(target, thisArgument, argumentsList) เป็น method ที่ใช้สำหรับเรียกฟังก์ชัน target โดยกำหนด value ของ this เป็น thisArgument และส่ง arguments เป็น array ใน argumentsList Reflect.apply() มีประโยชน์อย่างยิ่งเมื่อเราต้องการเรียกฟังก์ชันที่มี context ที่แตกต่างกัน

const person = {
  name: 'John Doe',
  getGreeting(prefix) {
    return `${prefix} Hello, my name is ${this.name}`;
  }
};

// เรียกฟังก์ชัน getGreeting โดยกำหนด this เป็น person และส่ง argument 'Mr.'
const greeting = Reflect.apply(person.getGreeting, person, ['Mr.']);
console.log(greeting); // Output: Mr. Hello, my name is John Doe

// ตัวอย่างการใช้งานกับ Proxy
const proxy = new Proxy(person.getGreeting, {
  apply(target, thisArgument, argumentsList) {
    console.log('Calling function with arguments:', argumentsList);
    return Reflect.apply(target, thisArgument, argumentsList);
  }
});

const greetingFromProxy = proxy('Ms.', person); // Output: Calling function with arguments: [ 'Ms.', { name: 'John Doe', getGreeting: [Function: getGreeting] } ]
console.log(greetingFromProxy); // Output: Ms. Hello, my name is John Doe

กรณีใช้งานจริง: การเรียกฟังก์ชันจาก array of functions โดยใช้ Reflect.apply() ช่วยให้เราสามารถจัดการ context ของแต่ละฟังก์ชันได้อย่างอิสระ

const functions = [
  function() { return this.firstName + ' ' + this.lastName; },
  function() { return this.age; }
];

const user = { firstName: 'Jane', lastName: 'Doe', age: 25 };

functions.forEach(func => {
  const result = Reflect.apply(func, user, []);
  console.log(result);
});

// Output:
// Jane Doe
// 25

การใช้งาน Reflect API ร่วมกับ Proxy: พลังที่เหนือกว่า

การใช้งาน Reflect API ร่วมกับ Proxy ช่วยให้เราสามารถสร้าง logic ที่ซับซ้อนในการดักจับและแก้ไขการทำงานของ Object ได้อย่างมีประสิทธิภาพ Proxy จะ intercept การทำงานต่างๆ ของ Object และ Reflect API จะช่วยให้เราทำการดำเนินการเหล่านั้นได้อย่างปลอดภัยและสอดคล้องกัน

const validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('Age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('Age seems invalid');
      }
    }

    // The default behavior to store the value
    return Reflect.set(obj, prop, value);
  }
};

let person = new Proxy({}, validator);

person.age = 100;

console.log(person.age); // 100

person.age = 'young'; // TypeError: Age is not an integer
person.age = 300;   // RangeError: Age seems invalid

ข้อผิดพลาดที่พบบ่อยและการแก้ไข

ลืมส่ง receiver: การลืมส่ง argument receiver ใน Reflect.get() หรือ Reflect.set() อาจทำให้เกิดปัญหาเรื่อง scope ของ this โดยเฉพาะเมื่อทำงานกับ getter/setter function ควรตรวจสอบให้แน่ใจว่าได้ส่ง receiver ที่ถูกต้องเสมอ
ความเข้าใจผิดเกี่ยวกับ return value: Reflect.set() return true หรือ false ไม่ใช่ value ที่ถูกกำหนด หากต้องการตรวจสอบ value ที่ถูกกำหนด ให้เข้าถึง property โดยตรง
การใช้ Reflect API แทน operators โดยไม่จำเป็น: Reflect API มีประโยชน์เมื่อต้องการจัดการ error อย่างละเอียด หรือทำงานร่วมกับ Proxy แต่สำหรับการทำงานพื้นฐาน การใช้ operators โดยตรง (เช่น obj.property) อาจจะอ่านง่ายกว่า

สรุป

Reflect API เป็นเครื่องมือที่มีประโยชน์ในการทำ introspection และ manipulation object ใน JavaScript การใช้งานร่วมกับ Proxy ช่วยให้เราสามารถสร้าง logic ที่ซับซ้อนในการดักจับและแก้ไขการทำงานของ Object ได้อย่างมีประสิทธิภาพ การเข้าใจการทำงานของ Reflect API จะช่วยให้เราเขียนโค้ดที่ปลอดภัย อ่านง่าย และจัดการ error ได้อย่างละเอียดมากยิ่งขึ้น