js Reflect的介绍

Reflect:是一个内置的对象,它提供了一组与 js 对象相关的方法,这些方法与 Proxy 对象的钩子函数相对应,

Reflect对象的原型是Object,
	意味着,Reflect 是基于 Object 对象的原型继承而来的,
	意味着,Reflect 对象继承了 Object 对象的方法和属性,Reflect 对象本身并没有自己的原型,而是直接继承自 Object 对象。
验证Reflect的原型是Object

	log( Reflect.__proto__ === Object.prototype ) // true


Reflect-设计目的-1
	将Object对象的一些明显属于语言内部的方法(如:object.defineProperty)放到Reflect对象上,
	现阶段,某些方法同时在Object、Reflect上部署,未来的新方法将只部署在Reflecrt上,
	也就是说,从Reflect对象上能拿到语言内部的方法。
Reflect-设计目的-2
	修改某些Object方法的返回结果,让其变得更合理,比如:
	Object.definProperty(给哪个对象添加属性,'添加的属性名',配置项{}),如果出现异常,会抛出一个错误,需要try...catch去捕获
    而,Reflect.defineProperty(给哪个对象添加属性,'添加的属性名',配置项{}),如果出现异常,则会返回false

  try {
    Object.defineProperty(target, property, attributes)
  } catch (error) {
    // 失败
  }

  
  if (Reflect.defineProperty(target, property, attributes)) {
    // success
  } else {
    // error
  }

Reflect-设计目的-3
	让Object操作都变成函数行为,
    某些Object操作是命令式,比如:(name in Obj)和(delete Obj[name])
    而,Reflect.has(obj, name) 和 Reflect.delete(obj, name)让它们变成了函数行为

  // 老写法:
  log( 'assign' in Object ) // true

  // 新写法:
  log( Reflect.has(Object, 'assign') ) // true
  log( Reflect.has({a:1, b:2}, 'a')) ) // true
  log( Reflect.has({a:1, b:2}, 'c')) ) // false

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

  // 例子-1
  let result = new Proxy(target, {
    set(target, property, value, receiver) {
      let success = Reflect.set(target, property, value, receiver)
      if (success) {
        console.log(`${target}${property}属性被修改为${value}`)
      }
      return success
    }
  })
  // 上述代码中,Proxy方法拦截target对象的属性赋值行为,它采用Reflect.set()方法将值赋值给对象的属性。


  // 例子-2
  let resProxy = new Proxy(obj, {
    get(target, property) {
      return Reflect.get(target, property)
    },

    deleteProperty(target, property) {
      return Reflect.defineProperty(target, property)
    },

    has(target, property) {
      return Reflect.has(target, property)
    }
  })
  // 每个Proxy对象的拦截操作(get、delete、has),内部都调用对应的Reflect方法,保证原生行为能够正常执行。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 的 Proxy 和 Reflect 是 ECMAScript 6 引入的新特性。它们可以一起使用来创建代理对象,以拦截对对象的访问和操作,从而提供更灵活的控制和定制行为。 Proxy 是一个 JavaScript 内置对象,它允许你拦截并定义基本操作的自定义行为,例如属性访问、函数调用、对象构造等。Reflect 是一个 JavaScript 内置对象,它提供了一组方法,用于在 Proxy 对象上执行默认行为。 使用 Proxy 和 Reflect,开发人员可以创建具有自定义行为的对象。例如,您可以使用 Proxy 拦截对对象属性的访问,并在 Reflect 上调用默认行为来获取或设置该属性的值。这种灵活性使得开发人员能够更好地控制和自定义应用程序的行为。 下面是一个简单的例子,展示了如何使用 Proxy 和 Reflect 创建一个代理对象: ```javascript const obj = { name: 'John', age: 30 }; const handler = { get(target, prop, receiver) { console.log(`Getting ${prop} property`); return Reflect.get(target, prop, receiver); }, set(target, prop, value, receiver) { console.log(`Setting ${prop} property to ${value}`); return Reflect.set(target, prop, value, receiver); } }; const proxyObj = new Proxy(obj, handler); console.log(proxyObj.name); proxyObj.age = 35; ``` 在上面的例子中,我们创建了一个名为 obj 的对象,并将其传递给一个名为 handler 的代理处理程序。处理程序定义了对 get 和 set 操作的拦截,其中在每个操作中都使用 Reflect 调用默认行为。然后,我们创建了一个名为 proxyObj 的代理对象,并将其设置为 obj 的代理。最后,我们访问了 proxyObj 的属性,并将其设置为一个新值。 当我们运行上面的代码时,我们会看到以下输出: ``` Getting name property John Setting age property to 35 ``` 从输出中可以看出,代理处理程序成功地拦截了对代理对象的访问和操作,并使用 Reflect 调用了默认行为。这样,我们就可以更好地控制和自定义我们的应用程序行为。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值