ES6学习笔记（8）——Reflect

港控/mmm° 2022-11-27 00:49 108阅读 0赞

# Reflect #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]

## 设计目的 ##

1.  **将`Object`对象的一些明显属于语言内部的方法（比如`Object.defineProperty`），放到`Reflect`对象上**。然后就可以从`Reflect`对象上可以拿到语言内部的方法
2.  **修改某些`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
        }
3.  **让`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
4.  **`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) { 
              log('property ' + name + ' on ' + target + ' set to ' + value);
            }
            return success;
          }
        });
        //它采用Reflect.set方法将值赋值给对象的属性，确保完成原有的行为，然后再部署额外的功能
        //每一个Proxy对象的拦截操作，内部都调用对应的Reflect方法，保证原生行为能够正常执行
5.  有了`Reflect`对象以后，很多操作会更易读
    
        // 老写法
        Function.prototype.apply.call(Math.floor, undefined, [1.75]) // 1
        
        // 新写法
        Reflect.apply(Math.floor, undefined, [1.75]) // 1

## [静态方法][Link 1] ##

*  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)

1.  `Reflect.apply(func, thisArg, args)`：等同于`Function.prototype.apply.call(func, thisArg, args)`，用于绑定`this`对象后执行给定函数
    
        const ages = [11, 33, 12, 54, 18, 96];
        
        // 旧写法
        const youngest = Math.min.apply(Math, ages);
        const oldest = Math.max.apply(Math, ages);
        const type = Object.prototype.toString.call(youngest);
        
        // 新写法
        const youngest = Reflect.apply(Math.min, Math, ages);
        const oldest = Reflect.apply(Math.max, Math, ages);
        const type = Reflect.apply(Object.prototype.toString, youngest, []);
2.  `Reflect.construct(target, args)`：调用构造函数的方法
    
        function Greeting(name) { 
          this.name = name;
        }
        
        // new 的写法
        const instance = new Greeting('张三');
        
        // Reflect.construct 的写法
        const instance = Reflect.construct(Greeting, ['张三']);
3.  `Reflect.get(target, name, receiver)`：查找并返回`target`对象的`name`属性，如果没有该属性，则返回`undefined`。
    
        var myObject = { 
          foo: 1,
          bar: 2,
          get baz() { 
            return this.foo + this.bar;
          },
        }
        
        Reflect.get(myObject, 'foo') // 1
        Reflect.get(myObject, 'bar') // 2
        Reflect.get(myObject, 'baz') // 3
        
        //如果name属性部署了读取函数（getter），则读取函数的this绑定receiver
        var myReceiverObject = { 
          foo: 4,
          bar: 4,
        };
        
        Reflect.get(myObject, 'baz', myReceiverObject) // 8
4.  `Reflect.set(target, name, value, receiver)`：设置`target`对象的`name`属性等于`value`
    
        var myObject = { 
          foo: 1,
          set bar(value) { 
            return this.foo = value;
          },
        }
        
        myObject.foo // 1
        Reflect.set(myObject, 'foo', 2);
        myObject.foo // 2
        Reflect.set(myObject, 'bar', 3)
        myObject.foo // 3
        
        //如果name属性设置了赋值函数，则赋值函数的this绑定receiver
        var myReceiverObject = { 
          foo: 0,
        };
        Reflect.set(myObject, 'bar', 4, myReceiverObject);
        myObject.foo // 1
        myReceiverObject.foo // 4
        
        //Reflect.set会触发Proxy.defineProperty拦截
5.  `Reflect.defineProperty(target, propertyKey, attributes)`：基本等同于`Object.defineProperty`，用来为对象定义属性
    
        function MyDate() { /*…*/}
        
        // 旧写法
        Object.defineProperty(MyDate, 'now', { 
          value: () => new Date.now()
        });
        
        // 新写法
        Reflect.defineProperty(MyDate, 'now', { 
          value: () => new Date.now()
        });
6.  `Reflect.deleteProperty(obj, name)`：等同于`delete obj[name]`，用于删除对象的属性
    
        const myObj = {  foo: 'bar' };
        
        // 旧写法
        delete myObj.foo;
        
        // 新写法
        Reflect.deleteProperty(myObj, 'foo');
        //返回一个布尔值。如果删除成功，或者被删除的属性不存在，返回true；删除失败，被删除的属性依然存在，返回false
7.  `Reflect.has(obj, name)`：对应`name in obj`里面的`in`运算符
    
        var myObject = { 
          foo: 1,
        };
        
        // 旧写法
        'foo' in myObject // true
        
        // 新写法
        Reflect.has(myObject, 'foo') // true
8.  `Reflect.ownKeys (target)`：返回对象的所有属性，基本等同于`Object.getOwnPropertyNames`与`Object.getOwnPropertySymbols`之和
    
        var myObject = { 
          foo: 1,
          bar: 2,
          [Symbol.for('baz')]: 3,
          [Symbol.for('bing')]: 4,
        };
        
        // 旧写法
        Object.getOwnPropertyNames(myObject)
        // ['foo', 'bar']
        
        Object.getOwnPropertySymbols(myObject)
        //[Symbol.for('baz'), Symbol.for('bing')]
        
        // 新写法
        Reflect.ownKeys(myObject)
        // ['foo', 'bar', Symbol.for('baz'), Symbol.for('bing')]
9.  `Reflect.isExtensible (target)`：对应`Object.isExtensible`，返回一个布尔值，表示当前对象是否可扩展
    
        const myObject = { };
        
        // 旧写法
        Object.isExtensible(myObject) // true
        
        // 新写法
        Reflect.isExtensible(myObject) // true
10. `Reflect.preventExtensions(target)`：对应`Object.preventExtensions`方法，用于让一个对象变为不可扩展。它返回一个布尔值，表示是否操作成功
    
        var myObject = { };
        
        // 旧写法
        Object.isExtensible(myObject) // true
        
        // 新写法
        Reflect.preventExtensions(myObject) // true
11. `Reflect.getOwnPropertyDescriptor(target, propertyKey)`：基本等同于`Object.getOwnPropertyDescriptor`，用于得到指定属性的描述对象
    
        var myObject = { };
        Object.defineProperty(myObject, 'hidden', { 
          value: true,
          enumerable: false,
        });
        
        // 旧写法
        var theDescriptor = Object.getOwnPropertyDescriptor(myObject, 'hidden');
        
        // 新写法
        var theDescriptor = Reflect.getOwnPropertyDescriptor(myObject, 'hidden');
12. `Reflect.getPrototypeOf(obj)`：读取对象的`__proto__`属性，对应`Object.getPrototypeOf(obj)`
    
        const myObj = new FancyThing();
        
        // 旧写法
        Object.getPrototypeOf(myObj) === FancyThing.prototype;
        
        // 新写法
        Reflect.getPrototypeOf(myObj) === FancyThing.prototype;
13. `Reflect.setPrototypeOf(obj,newProto)`：设置对象的\_\_proto\_\_属性，返回第一个参数对象。对应`Object.setPrototypeOf(obj, newProto)`
    
        const myObj = new FancyThing();
        
        // 旧写法
        Object.setPrototypeOf(myObj, OtherThing.prototype);
        // 新写法
        Reflect.setPrototypeOf(myObj, OtherThing.prototype);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/59845b73eeb14cf3b5bd1477ff0ec6cb.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect