ES6 Reflect 详解（三）

news2024/10/6 22:14:50

Reflect 对象与Proxy 对象一样，也是 ES6 为了操作对象而提供的新 API。 Reflect 对象的设计目的有 4 个。

将 Object 对象的一些明显属于语言内部的方法（比如 Object.defineProperty ），放到 Reflect 对象上。现阶段，某些方法同时在 Object 和 Reflect 对象上部署，未来的新方法将只部署在 Reflect 对象上。也就是说，从 Reflect 对象上可以拿到语言内部的方法。
修改某些 Object 方法的返回结果，让其变得更合理。比如， Object.defineProperty(obj, name, desc) 在无法定义属性时，会抛出一个错误，而 Reflect.defineProperty(obj, name, desc) 则会返回 false 。

// 老写法
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}
// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

让 Object 操作都变成函数行为。某些 Object 操作是命令式，比如 name in obj 和 delete obj[name] ，而 Reflect.has(obj, name) 和 Reflect.deleteProperty(obj, name) 让它们变成了函数行为。

// 老写法
'assign' in Object // true
// 新写法
Reflect.has(Object, 'assign') // true

Reflect对象的方法与 Proxy对象的方法一一对应，只要是 Proxy 对象的方法，就能在 Reflect 对象上找到对应的方法。这就让 Proxy 对象可以方便地调用对应的 Reflect 方法，完成默认行为，作为修改行为的基础。也就是说，不管 Proxy 怎么修改默认行为，你总可以在 Reflect 上获取默认行为。

Proxy(target, {
  set: function(target, name, value, receiver) {
    var success = Reflect.set(target, name, value, receiver);
    if (success) {
      console.log('property ' + name + ' on ' + target + ' set to ' + value);
    }
    return success;
  }
});

Proxy 方法拦截 target 对象的属性赋值行为。它采用 Reflect.set 方法将值赋值给对象的属性，确保完成原有的行为，然后再部署额外的功能。

常用方法：

Reflect.get(target, propertyKey[, receiver])：获取对象的属性。
Reflect.set(target, propertyKey, value[, receiver])：设置对象的属性。
Reflect.has(target, propertyKey)：判断属性是否存在于对象上。
Reflect.deleteProperty(target, propertyKey)：删除对象的属性。
Reflect.ownKeys(target)：返回对象自身的所有属性的数组。
Reflect.getOwnPropertyDescriptor(target, propertyKey)：获取对象属性的描述符。
Reflect.defineProperty(target, propertyKey, attributes)：定义或修改对象的属性。
Reflect.preventExtensions(target)：阻止对象被扩展。
Reflect.isExtensible(target)：判断对象是否可扩展。
Reflect.getExtension(target)：获取对象的原型。
Reflect.setPrototypeOf(target, prototype)：设置对象的原型。

示例1：使用 Reflect.get

let obj = { name: "Alice", age: 25 };
let propName = "name";

console.log(Reflect.get(obj, propName)); // 输出：Alice
console.log(Reflect.get(obj, "gender")); // 输出：undefined

示例2：使用 Reflect.set

let obj = { name: "Alice" };

// 设置属性
console.log(Reflect.set(obj, "age", 30)); // 输出：true

console.log(obj); // 输出：{ name: "Alice", age: 30 }

示例3：使用 Reflect.has

let obj = { name: "Alice" };

console.log(Reflect.has(obj, "name")); // 输出：true
console.log(Reflect.has(obj, "age"));  // 输出：false

示例4：使用 Reflect.deleteProperty

let obj = { name: "Alice", age: 30 };

// 删除属性
console.log(Reflect.deleteProperty(obj, "age")); // 输出：true

console.log(obj); // 输出：{ name: "Alice" }

示例5：使用 Reflect.ownKeys

let obj = { name: "Alice", age: 30 };

console.log(Reflect.ownKeys(obj)); // 输出：["name", "age"]

示例6：使用 Reflect.preventExtensions

let obj = { name: "Alice" };

// 防止对象被扩展
console.log(Reflect.preventExtensions(obj)); // 输出：true

// 尝试添加新属性
console.log(Reflect.set(obj, "age", 30)); // 输出：false

示例7：使用 Reflect.isExtensible

let obj = { name: "Alice" };

console.log(Reflect.isExtensible(obj)); // 输出：true

示例8：使用 Reflect.getPrototypeOf 和 Reflect.setPrototypeOf

let proto = { sayHello: function() { console.log("Hello!"); }};
let obj = Object.create(proto);

console.log(Reflect.getPrototypeOf(obj) === proto); // 输出：true

// 设置新原型
let newProto = { sayGoodbye: function() { console.log("Goodbye!"); }};
Reflect.setPrototypeOf(obj, newProto);

console.log(obj.sayGoodbye); // 可以访问新原型上的方法
obj.sayGoodbye(); // 输出：Goodbye!