devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ES6中Reflect对象使用详解（附代码）_reflect.has

作者：羊村懒王 | 2024-03-20 18:33:03

赞

踩

reflect.has

目录

目录

Reflect的方法

 Reflect.get(target, name, receiver)

Reflect.set(target, name, value, receiver)

Reflect.has(obj, name)

Reflect.deleteProperty(obj, name)

Reflect.ownKeys (target)

Reflect.preventExtensions(target)

Reflect.isExtensible (target)

Reflect.defineProperty(target, propertyKey, attributes)

Reflect.getOwnPropertyDescriptor(target, propertyKey)

Reflect.apply(func, thisArg, args)

概述

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

1.将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。

2.修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。

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

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

Reflect的方法

  • Reflect.apply(target, thisArg, args)
  • Reflect.construct(target, args)
  • Reflect.get(target, name, receiver)
  • Reflect.set(target, name, value, receiver)
  • Reflect.defineProperty(target, name, desc)
  • Reflect.deleteProperty(target, name)
  • Reflect.has(target, name)
  • Reflect.ownKeys(target)
  • Reflect.isExtensible(target)
  • Reflect.preventExtensions(target)
  • Reflect.getOwnPropertyDescriptor(target, name)
  • Reflect.getPrototypeOf(target)
  • Reflect.setPrototypeOf(target, prototype)

 Reflect.get(target, name, receiver)

Reflect.get(target, name, receiver)

Reflect.get方法查找并返回target对象的name属性，如果没有该属性，则返回undefined。

如果name属性部署了读取函数（getter），则读取函数的this绑定receiver。

  1.     <script>
  2.         // Reflect.get(target, name, receiver)
  3.         // Reflect.get方法查找并返回target对象的name属性，如果没有该属性，则返回undefined。
  4.  
  5.         let obj = {
  6.             name: '再努力些吧',
  7.             age: 18,
  8.             work: '前端',
  9.             get baz() {
  10.                 return this.name + '的' + this.age;
  11.             },
  12.  
  13.         }
  14.         console.log(Reflect.get(obj, 'name'));//再努力些吧
  15.         console.log(Reflect.get(obj, 'age'));//18
  16.         console.log(Reflect.get(obj, 'work'));//前端
  17.         console.log(Reflect.get(obj, 'sex'));//undefined
  18.  
  19.         // 如果name属性部署了读取函数（getter），则读取函数的this绑定receiver。
  20.  
  21.         let newObj = {
  22.             name: '不能摆烂',
  23.             age: 28
  24.         }
  25.  
  26.         console.log(Reflect.get(obj, 'baz', newObj));//不能摆烂的28
  27.  
  28.  
  29.     </script>

Reflect.set(target, name, value, receiver)

注意：Reflect.set，方法用法复杂，我只是简单展示用法，具体详细的建议去 阮一峰的ES6 去看

Reflect.set(target, name, value, receiver)

Reflect.set方法设置target对象的name属性等于value。

如果name属性设置了赋值函数，则赋值函数的this绑定receiver。

  1.     <script>
  2.  
  3.         // Reflect.set(target, name, value, receiver)
  4.         // Reflect.set方法设置target对象的name属性等于value。
  5.         let obj = {
  6.             name: '再努力些吧',
  7.             age: 18,
  8.             work: '前端',
  9.             set baz(value) {
  10.                 return this.age = value
  11.             },
  12.  
  13.         }
  14.  
  15.  
  16.  
  17.  
  18.         Reflect.set(obj, 'name', '今天努力了吗')
  19.         console.log(obj.name);//今天努力了吗
  20.  
  21.  
  22.         // 如果name属性设置了赋值函数，则赋值函数的this绑定receiver。
  23.  
  24.         let newObj = {
  25.             name: '不能摆烂',
  26.             age: 28
  27.         }
  28.  
  29.         Reflect.set(obj, 'age', 15, newObj)
  30.  
  31.         console.log(obj.age);//18
  32.         console.log(newObj.age);//15
  33.  
  34.     </script>

Reflect.has(obj, name)

Reflect.has方法对应name in obj里面的in运算符。

如果Reflect.has()方法的第一个参数不是对象，会报错。

  1. <script>
  2.  
  3.         // Reflect.has(obj, name)
  4.         // Reflect.has方法对应name in obj里面的in运算符。
  5.         // 如果Reflect.has()方法的第一个参数不是对象，会报错。
  6.         let obj = {
  7.             name: '再努力些吧',
  8.             age: 18,
  9.             work: '前端',
  10.  
  11.  
  12.         }
  13.         // 旧写法
  14.         console.log('age' in obj);//true
  15.         console.log('sex' in obj);//false
  16.         // 新写法
  17.         console.log(Reflect.has(obj, 'age'));//true
  18.         console.log(Reflect.has(obj, 'sex'));//false
  19.  
  20. </script>

Reflect.deleteProperty(obj, name)


Reflect.deleteProperty方法等同于delete obj[name]，用于删除对象的属性。

该方法返回一个布尔值。如果删除成功，或者被删除的属性不存在，返回true；删除失败，被删除的属性依然存在，返回false。

如果Reflect.deleteProperty()方法的第一个参数不是对象，会报错。

  1.   <script>
  2.  
  3.         // Reflect.deleteProperty(obj, name)
  4.         // Reflect.deleteProperty方法等同于delete obj[name]，用于删除对象的属性。
  5.  
  6.         // 该方法返回一个布尔值。如果删除成功，或者被删除的属性不存在，返回true；删除失败，被删除的属性依然存在，返回false。
  7.  
  8.         // 如果Reflect.deleteProperty()方法的第一个参数不是对象，会报错。
  9.  
  10.         let obj = {
  11.             name: '再努力些吧',
  12.             age: 18,
  13.             work: '前端',
  14.  
  15.  
  16.         }
  17.  
  18.         // 旧写法
  19.         // delete obj.age
  20.         // console.log(obj);//{name: '再努力些吧', work: '前端'}
  21.  
  22.         // 新写法
  23.         console.log(Reflect.deleteProperty(obj, 'name'));//true
  24.         console.log(obj);//{age: 18, work: '前端'}
  25.  
  26.  
  27.     </script>

Reflect.ownKeys (target)

Reflect.ownKeys方法用于返回对象的所有属性，基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和

  1. <script>
  2.  
  3.         // Reflect.ownKeys (target) 
  4.         // Reflect.ownKeys方法用于返回对象的所有属性，基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和
  5.  
  6.         let myObject = {
  7.             foo: 1,
  8.             bar: 2,
  9.             [Symbol.for('baz')]: 3,
  10.             [Symbol.for('bing')]: 4,
  11.         };
  12.  
  13.  
  14.         //旧写法
  15.  
  16.         //获取对象中除了symbol之外的对象的所有属性
  17.         console.log(Object.getOwnPropertyNames(myObject));//['foo', 'bar']
  18.  
  19.         //获取对象中symbol的对象的所有属性
  20.         console.log(Object.getOwnPropertySymbols(myObject));//[Symbol(baz), Symbol(bing)]
  21.  
  22.         // 新写法
  23.  
  24.         // 获取所有属性
  25.         console.log(Reflect.ownKeys(myObject));// ['foo', 'bar', Symbol(baz), Symbol(bing)]
  26.  
  27. </script>

Reflect.preventExtensions(target)

Reflect.preventExtensions对应Object.preventExtensions方法，用于让一个对象变为不可扩展。它返回一个布尔值，表示是否操作成功。

  1.  
  2. <script>
  3.         // Reflect.preventExtensions(target)
  4.         // Reflect.preventExtensions对应Object.preventExtensions方法，用于让一个对象变为不可扩展。它返回一个布尔值，表示是否操作成功。
  5.  
  6.         let myObject = {}
  7.  
  8.  
  9.         // 旧写法
  10.         console.log(Object.preventExtensions(myObject));//{}
  11.  
  12.  
  13.         // 新写法
  14.         console.log(Reflect.preventExtensions(myObject));//true
  15.  
  16.  
  17.           // 如果参数不是对象，Object.preventExtensions在 ES5 环境报错，在 ES6 环境返回传入的参数，而Reflect.preventExtensions会报错。
  18.  
  19.  
  20. // ES5 环境
  21. // Object.preventExtensions(1) // 报错
  22.  
  23. // ES6 环境
  24. // Object.preventExtensions(1) // 1
  25.  
  26. // 新写法
  27.  
  28. // Reflect.preventExtensions(1) // 报错
  29.  
  30. </script>

Reflect.isExtensible (target)

Reflect.isExtensible方法对应Object.isExtensible，返回一个布尔值，表示当前对象是否可扩展。

如果参数不是对象，Object.isExtensible会返回false，因为非对象本来就是不可扩展的，而Reflect.isExtensible会报错。

  1. <script>
  2.         // Reflect.isExtensible (target)
  3.         // Reflect.isExtensible方法对应Object.isExtensible，返回一个布尔值，表示当前对象是否可扩展。
  4.  
  5.         let myObject = {}
  6.  
  7.         // 旧写法
  8.  
  9.         console.log(Object.isExtensible(myObject));//true
  10.  
  11.         // 新写法
  12.  
  13.         console.log(Reflect.isExtensible(myObject));//true
  14.  
  15.         // 如果参数不是对象，Object.isExtensible会返回false，因为非对象本来就是不可扩展的，而Reflect.isExtensible会报错。
  16.  
  17.         console.log(Object.isExtensible(1));// false
  18.         console.log(Reflect.isExtensible(1));// 报错
  19. </script>

Reflect.defineProperty(target, propertyKey, attributes)

Reflect.defineProperty方法基本等同于Object.defineProperty，用来为对象定义属性。未来，后者会被逐渐废除，请从现在开始就使用Reflect.defineProperty代替它。

  1. <script>
  2.         // Reflect.defineProperty(target, propertyKey, attributes)
  3.         // Reflect.defineProperty方法基本等同于Object.defineProperty，用来为对象定义属性。未来，后者会被逐渐废除，请从现在开始就使用Reflect.defineProperty代替它。
  4.  
  5.         let myObject = {}
  6.  
  7.         // 旧写法
  8.         Object.defineProperty(myObject, "name", {
  9.             enumerable: false,
  10.             configurable: false,
  11.             writable: false,
  12.             value: "再努力些把"
  13.         });
  14.         console.log(myObject);//{name: '再努力些把'}
  15.  
  16.         // 新写法
  17.         Reflect.defineProperty(myObject, 'now', {
  18.             value: () => Date.now()
  19.         });
  20.         console.log(myObject);//{name: "再努力些把"  now: () => Date.now()}
  21.         console.log(myObject.now());//1660548733267
  22.         // 如果Reflect.defineProperty的第一个参数不是对象，就会抛出错误，比如 
  23.           Reflect.defineProperty(1, 'foo')。
  24. </script>

Reflect.getOwnPropertyDescriptor(target, propertyKey)

Reflect.getOwnPropertyDescriptor基本等同于Object.getOwnPropertyDescriptor，用于得到指定属性的描述对象，将来会替代掉后者。

  1. <script>
  2.         // Reflect.getOwnPropertyDescriptor(target, propertyKey)
  3.         // Reflect.getOwnPropertyDescriptor基本等同于Object.getOwnPropertyDescriptor，用于得到指定属性的描述对象，将来会替代掉后者。
  4.  
  5.         var myObject = {};
  6.         Object.defineProperty(myObject, 'hidden', {
  7.             value: true,
  8.             enumerable: false,
  9.         });
  10.         Reflect.defineProperty(myObject, 'now', {
  11.             value: () => Date.now()
  12.         });
  13.  
  14.         // 旧写法
  15.         var theDescriptor = Object.getOwnPropertyDescriptor(myObject, 'hidden');
  16.         //{value: true, writable: false, enumerable: false, configurable: false}
  17.  
  18.         console.log(theDescriptor);
  19.  
  20.         // 新写法
  21.         var theDescriptor = Reflect.getOwnPropertyDescriptor(myObject, 'now');
  22.         //{writable: false, enumerable: false, configurable: false, value: ƒ}
  23.         console.log(theDescriptor);
  24.         // Reflect.getOwnPropertyDescriptor和Object.getOwnPropertyDescriptor的一个区别是，如果第一个参数不是对象，
  25.         // Object.getOwnPropertyDescriptor(1, 'foo')不报错，返回undefined，而
  26.         // Reflect.getOwnPropertyDescriptor(1, 'foo')会抛出错误，表示参数非法。
  27.     </script>

Reflect.apply(func, thisArg, args)

Reflect.apply方法等同于Function.prototype.apply.call(func, thisArg, args)，用于绑定this对象后执行给定函数。

一般来说，如果要绑定一个函数的this对象，可以这样写fn.apply(obj, args)，但是如果函数定义了自己的apply方法，就只能写成Function.prototype.apply.call(fn, obj, args)，采用Reflect对象可以简化这种操作。

  1. <script>
  2.         // Reflect.apply(func, thisArg, args)
  3.         // Reflect.apply方法等同于Function.prototype.apply.call(func, thisArg, args)，用于绑定this对象后执行给定函数。
  4.  
  5.         // 一般来说，如果要绑定一个函数的this对象，可以这样写fn.apply(obj, args)，但是如果函数定义了自己的apply方法，就只能写成Function.prototype.apply.call(fn, obj, args)，采用Reflect对象可以简化这种操作。
  6.  
  7.         const ages = [11, 33, 12, 54, 18, 96];
  8.  
  9.         // 旧写法
  10.         const youngest = Math.min.apply(Math, ages);
  11.         const oldest = Math.max.apply(Math, ages);
  12.         const type = Object.prototype.toString.call(youngest);
  13.  
  14.  
  15.         // 新写法
  16.         // const youngest = Reflect.apply(Math.min, Math, ages);
  17.         // const oldest = Reflect.apply(Math.max, Math, ages);
  18.         // const type = Reflect.apply(Object.prototype.toString, youngest, []);
  19.  
  20.  
  21.  
  22.         console.log(youngest); //11
  23.         console.log(oldest); //96
  24.         console.log(type); //[object Number]
  25. </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/275728
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号