当前位置：首页 > news >正文

JavaScript 中的 Reflect 详解

news 来源：原创 2025/6/20 6:52:46

Reflect 是 ES6引入的一个内置对象，它提供了一系列静态方法来操作对象，这些方法与 Proxy 处理器方法一一对应。Reflect 的设计目的是为了更优雅地操作对象，并统一某些操作的行为。

1. Reflect 的基本特点

1. 不是构造函数：不能使用 new 操作符调用，也不能被当作函数调用；

2. 所有方法都是静态的：类似于 Math 对象；

3. 与 Proxy 方法一一对应：每个可被 Proxy 捕获的操作都有对应的 Reflect 方法；

2. Reflect 的主要方法

2.1. Reflect.apply(target, thisArgument, argumentsList)

等同于 Function.prototype.apply()，但作为函数调用而非方法调用。

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(Reflect.apply(greet, null, ['Alice'])); // "Hello, Alice!"

2.2. Reflect.construct(target, argumentsList[, newTarget])

类似于 new target(...args)，但可以指定不同的原型。

class Person {
  constructor(name) {
    this.name = name;
  }
}

const person = Reflect.construct(Person, ['Bob']);
console.log(person.name); // "Bob"

2.3. Reflect.defineProperty(target, propertyKey, attributes)

类似于 Object.defineProperty()，但返回布尔值表示是否成功。

const obj = {};
const success = Reflect.defineProperty(obj, 'prop', {
  value: 42,
  writable: false
});

console.log(success); // true
console.log(obj.prop); // 42

2.4. Reflect.deleteProperty(target, propertyKey)

删除对象属性，替代 delete 操作符。

const obj = { x: 1, y: 2 };
const result = Reflect.deleteProperty(obj, 'x');

console.log(result); // true
console.log(obj); // { y: 2 }

2.5. Reflect.get(target, propertyKey[, receiver])

获取对象属性值，类似于 target[propertyKey]。

const obj = { x: 1, y: 2 };
console.log(Reflect.get(obj, 'x')); // 1

2.6. Reflect.getOwnPropertyDescriptor(target, propertyKey)

类似于 Object.getOwnPropertyDescriptor()。

const obj = { x: 1 };
const desc = Reflect.getOwnPropertyDescriptor(obj, 'x');
console.log(desc.value); // 1

2.7. Reflect.getPrototypeOf(target)

类似于 Object.getPrototypeOf()。

const proto = {};
const obj = Object.create(proto);
console.log(Reflect.getPrototypeOf(obj) === proto); // true

2.8. Reflect.has(target, propertyKey)

检查属性是否存在，替代 in 操作符。

const obj = { x: 1 };
console.log(Reflect.has(obj, 'x')); // true
console.log(Reflect.has(obj, 'y')); // false

2.9. Reflect.isExtensible(target)

类似于 Object.isExtensible()。

const obj = {};
console.log(Reflect.isExtensible(obj)); // true
Object.preventExtensions(obj);
console.log(Reflect.isExtensible(obj)); // false

2.10. Reflect.ownKeys(target)

返回对象自身属性键（包括符号属性），类似于 Object.getOwnPropertyNames() + Object.getOwnPropertySymbols()。

const obj = {
  [Symbol('id')]: 123,
  name: 'Alice'
};
console.log(Reflect.ownKeys(obj)); // ["name", Symbol(id)]

2.11. Reflect.preventExtensions(target)

类似于 Object.preventExtensions()，但返回布尔值。

const obj = {};
console.log(Reflect.preventExtensions(obj)); // true
console.log(Reflect.isExtensible(obj)); // false

2.12. Reflect.set(target, propertyKey, value[, receiver])

设置对象属性值，类似于 target[propertyKey] = value。

const obj = {};
Reflect.set(obj, 'x', 1);
console.log(obj.x); // 1

2.13. Reflect.setPrototypeOf(target, prototype)

类似于 Object.setPrototypeOf()，但返回布尔值。

const proto = {};
const obj = {};
console.log(Reflect.setPrototypeOf(obj, proto)); // true
console.log(Reflect.getPrototypeOf(obj) === proto); // true

3. Reflect 的使用场景

3.1. 与 Proxy 配合使用

Reflect 方法与 Proxy 处理器方法一一对应，通常用于 Proxy 处理器中执行默认操作。

const handler = {
  get(target, prop, receiver) {
    console.log(`Getting property ${prop}`);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log(`Setting property ${prop} to ${value}`);
    return Reflect.set(target, prop, value, receiver);
  }
};

const proxy = new Proxy({}, handler);
proxy.x = 1; // 日志: Setting property x to 1
console.log(proxy.x); // 日志: Getting property x，然后输出 1

3.2. 替代某些 Object 方法

Reflect 方法提供了更一致的 API 设计，如返回布尔值而非抛出错误。

// 旧方式
try {
  Object.defineProperty(obj, 'prop', { value: 42 });
  // 成功
} catch (e) {
  // 失败
}

// 新方式
if (Reflect.defineProperty(obj, 'prop', { value: 42 })) {
  // 成功
} else {
  // 失败
}

3.3. 函数式操作对象

Reflect 方法适合函数式编程风格，可以作为参数传递。

const operations = [
  [Reflect.set, 'x', 1],
  [Reflect.set, 'y', 2],
  [Reflect.deleteProperty, 'x']
];

const obj = {};
operations.forEach(([op, ...args]) => op(obj, ...args));
console.log(obj); // { y: 2 }