JavaScript Reflect对象

基本认识

Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers的方法相同。Reflect不是一个函数对象,因此它是不可构造的。

​ 与大多数全局对象不同,Reflect不是一个构造函数。你不能将其与一个new运算符一起使用,或者将Reflect对象作为一个函数来调用。Reflect的所有属性和方法都是静态的(就像Math对象)。

Reflect对象的出现,并不是增强了代码的功能,而是在我们编写代码的时候更具有函数式编程的风格。平常我们的对对象的操作,例如对象属性的读取和修改,函数的调用,都可以通过使用Reflect中的相关方法来达到同样的效果。我们的所有操作,通过使用Reflect对象,都可以通过函数调用来完成。

基本用法

Reflect的方法很多,在这里就说一个我个人感觉比较常用的方法

1. Reflect.get(target,propertyKey,_receiver)

该静态方法是返回被操作对象所对应属性名的属性值

参数解释

  1. target:需要取值的目标对象
  2. propertyKey:需要获取的值的键值
  3. receiver(可省略):如果target对象中指定了getterreceiver则为getter调用时的this

返回值

被操作对象属性名所对应的值

// 定义测试对象 obj
var obj = { a: 1, }
// 1
console.log(Reflect.get(obj, "a"));

2. Reflect.set(target,propertyKey,value,_received)

该静态方法是在被操作对象设置属性

参数解释

  1. target:设置属性的目标对象
  2. propertyKey:设置的属性的名称
  3. value:设置的值
  4. receiver(可省略):如果target对象中指定了setterreceiver则为setter调用时的this

返回值

返回一个Boolean表明是否在被操作对象成功设置该属性

// 定义测试对象 obj
var obj = { a: 1, }
// 使用Reflect.set函数
Reflect.set(obj, "b", 2);
// {a: 1, b: 2}
console.log(obj);

3. Relfect.apply(target,thisArguments,argumentsList)

该静态方法是通过指定的参数列发起对目标函数的调用

参数解释

  1. target:目标函数
  2. thisArgument:target函数调用时绑定的this对象
  3. argumentsList:target函数调用时传入的实参列表,该参数应该是一个类数组的对象

返回值

是调用完带着指定参数和this值的给定的函数后执行所返回的结果

// 创建测试函数
function f() {
    // 打印当前调用该函数的对象
    console.log(this);
    // 循环打印调用该函数时所传入的参数
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    // 函数返回值
    return "hello f";
}
// 使用Reflect.apply函数
// 打印f执行中当前this的值:{a: 1, b: 2}
// 循环打印处f在执行时传入的参数
// 1
// 2
// 3
// 4
// 5
// 最终打印使用Reflect.apply所返回的结果:即执行f时所返回的结果:hello f
console.log(Reflect.apply(f, { a: 1, b: 2 }, [1, 2, 3, 4, 5]));

高级用法

与proxy对象一起使用

// 创建测试样例
var o = {
    a:1
}
// 创建Proxy对象 op
let op = new Proxy(o,{
    set:function(target,prop,value,_proxy){
        // 使用Reflect对象的set方法
        Reflect.set(target,prop,value);
    },
    get:function(target,prop,_proxy){
        // 使用Reflect对象的get方法
        return Reflect.get(target,prop);
    }
})
// 修改对象op的a的值,会触发set方法
op.a = 2;
// 输出对象op,Proxy {a: 2}
console.log(op);
// 读取对象op的属性a的值,会触发get方法
// 2
console.log(op.a);
发布了26 篇原创文章 · 获赞 1 · 访问量 1194

猜你喜欢

转载自blog.csdn.net/bleeding_sky/article/details/104486677