js中的Reflect

文章类型:Javascript

发布者:hp

发布时间:2023-06-29

一:是什么

es6提供的全新API,Reflect和Proxy,可以用Reflect操作对象,以一种更简洁和统一的方式

二:作用

1:将对象的一些方法放在Reflect上

2:操作对象时出现报错返回false

// 旧写法
try {
  Object.defineProperty(target, property, attributes);
} catch (err) {
  //failure
}

// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  //success
} else {
  //failure
}

3:让操作对象编程变为函数式编程

// 老写法
"assign" in Object; // true

// 新写法
Reflect.has(Object, "assign"); //true

4:保持和Proxy对象方法一一对应

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 do " + value);
    }
    return success;
  },
});

三:方法(13种)

1:Reflect.defineProperty,跟Object.defineProperty(target,name,desc)类似,最大的区别是针对对象无法定义时后者会报错,而前者会返回false

const obj = {};
const descriptor = { value: "John", writable: false };
Reflect.defineProperty(obj, "name", descriptor);
console.log(obj.name); // Output: "John"
obj.name = "Alice"; // Throws a TypeError in strict mode

2:Reflect.getPrototypeOf / Reflect.setProtoTypeOf ,跟Object.getPrototypeOf/Object.setPrototypeOf一样,指定对象的原型为另外一个对象

const obj = {};
const prototype = Reflect.getPrototypeOf(obj);
console.log(prototype === Object.prototype); // Output: true
Reflect.setPrototypeOf(obj, prototype);
obj.greet(); // Output: "Hello!"

3:Reflect.getOwnPropertyDescriptor,跟Object.getOwnPropertyDescriptor一样,如果对象中存在,则返回给指定的属性描述符


const obj = { name: "John" };
const descriptor = Reflect.getOwnPropertyDescriptor(obj, "name");
console.log(descriptor.value); // Output: "John"
console.log(descriptor.writable); // Output: true

4:Reflect.isExtensible,跟Object.isExtensible类似,判断一个对象是否可以扩展/添加新的属性,不同的是参数不是对象时(原始值),Object 将它强制转换为一个对象,Reflect 直接报错

const obj = {};
console.log(Reflect.isExtensible(obj)); // Output: true

Reflect.preventExtensions(obj);
console.log(Reflect.isExtensible(obj)); // Output: false

5:Reflect.preventExtensions,跟Object.preventExtensions类似,阻止新属性添加到对象,不同的是参数不是对象时(原始值),Object 将它强制转换为一个对象,Reflect 直接报错

const obj = {};
Reflect.preventExtensions(obj);

6:Reflect.apply,与Function.prototype.apply.call一样

function greet(name) {
  console.log(`Hello, ${name}!`);
}

Reflect.apply(greet, null, ["John"]); // Output: "Hello, John!"

7:Reflect.ownKeys,跟Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target)),返回一个包含书友自身属性(不包含继承属性)的数组

const obj = {
  name: "John",
  age: 25,
};

const keys = Reflect.ownKeys(obj);
console.log(keys); // Output: ["name", "age"]

8:Reflect.has,与Object in 操作符一样,判断是否存在,不同的是变成了函数行为

const obj = { name: "John", age: 25 };
const hasName = Reflect.has(obj, "name");
console.log(hasName); // Output: true

9:Reflect.deleteProperty,与Object中的delete操作符一样,不用的是让删除变成函数行为,返回布尔值

const obj = { name: "John", age: 25 };
const deleted = Reflect.deleteProperty(obj, "age");
console.log(deleted); // Output: true
console.log(obj); // Output: { name: "John" }

10:Reflect.construct,new 操作符一样

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

const args = ["John"];
const obj = Reflect.construct(Person, args);
console.log(obj instanceof Person); // Output: true
console.log(obj.name); // Output: "John"

11:Reflect.get / Reflect.set ,与Obj[key] /obj.xxx一样,

const obj = { name: "John", age: 25 };
const value = Reflect.get(obj, "name");
console.log(value); // Output: "John"
Reflect.set(obj, "age", 30);
console.log(obj.age); // Output: 30