x-note
  • Introduction
  • JavaScript
    • JavaScript 作用域链
    • JavaScript 数据结构与类型
    • JavaScript 原型
    • JavaScript this 关键字
    • JavaScript 函数
    • JavaScript delete 运算符
    • JavaScript 内存管理与垃圾回收
    • JavaScript 严格模式与混乱模式
    • JavaScript 数字精度丢失
    • JavaScript 并发模型
    • 利用原型链实现继承
  • ECMAScript
    • ECMAScript 6 变量及常量的声明
    • ECMAScript 6 变量的解构赋值
    • ECMAScript 6 Promise 对象
    • ECMAScript 6 Symbol
    • ECMAScript 6 Proxy
    • ECMAScript 6 Reflect
    • ECMAScript 6 new.target
    • ECMAScript 6 Set 和 WeakSet
    • ECMAScript 6 Map 和 WeakMap
    • ECMAScript 6 Iterator
    • ECMAScript 6 Generator
    • ECMAScript 6 class
    • ECMAScript 7
    • ECMAScript 8 async 函数
    • ECMAScript 8 内存共享与原子性
    • ECMAScript 8 Others
    • ECMAScript 2018
    • ECMAScript 2019
  • CSS
    • CSS 块格式化上下文(BFC)
    • CSS 盒模型
    • CSS 外边距合并
    • CSS Float
    • CSS Position
    • CSS Border-Image
    • CSS BEM
    • CSS 表布局详解
    • 页面布局之单列布局
    • 页面布局之多列布局
  • React
    • React 组件的生命周期
    • React 虚拟 DOM
    • React Reconciliation
    • React Diff 算法核心
    • React Fiber
    • React Scheduling
    • React Context API
    • React Refs
    • React HMR
    • React Hook
  • VUE
    • VUE 响应式系统
    • VUE 渲染机制
    • 关于 Vue 的思考
  • Webpack
    • Webpack 基本概念
    • Webpack HMR
  • Babel
    • @babel/preset-env
  • WEB
    • WEB 基础知识及概念
      • 屏幕测量单位
      • 重绘与重排
      • 前端模块化系统
      • WEB 客户端存储
      • 浏览器的渲染过程
    • WEB 性能优化
      • WEB 性能指标
      • WEB 图片优化
      • 懒加载资源
    • WEB 安全
      • XSS
      • XSRF
      • 点击劫持
      • 同源策略(Same Origin Policy,SOP)
    • WEB 解决方案
      • webp 兼容方案
      • WEB 拖拽实现方案
    • WEB SEO
  • Git
    • Git 工作流
    • Git 内部原理
  • 传输协议
    • UDP
      • UDP 基本概念
    • TCP
      • TCP 基本概念
    • HTTP
      • HTTP 基础
      • HTTP 缓存
      • HTTP-2
      • HTTP-3
      • HTTPS
      • 自定义 HTTPS 证书
  • Protocol Buffers
    • Protocol Buffers 基础
  • gRPC
    • gRPC 简介
    • gRPC 基础概念
    • GRPC with GraphQL and TypeScript
  • 正则表达式
    • 正则表达式基础
    • 正则表达式的悲观回溯
  • 基础算法
    • 冒泡排序
    • 插入排序
    • 选择排序
    • 快速排序
    • 归并排序
    • 希尔排序
    • 堆排序
    • 桶排序
    • 计数排序
    • 基数排序
    • 二叉树的遍历
    • 动态规划
    • 回溯
  • 压缩算法
    • HPACK
    • QPACK
  • 设计模式
    • DDD
      • 模型元素的模式
    • 常见设计模式
      • 工厂方法
      • 抽象工厂
      • 构造器
      • 原型
      • 单例模式
      • 适配器模式
      • 桥接模式
      • 组合模式
      • 外观模式
      • 享元模式
      • 代理模式
      • 责任链模式
      • 命令模式
      • 迭代器模式
      • 中介者模式
      • 备忘录模式
      • 观察者模式
      • 状态模式
      • 策略模式
      • 模版方法模式
      • 访问者模式
      • 依赖注入
    • MVC
    • MVP
    • MVVM
  • 颜色空间
    • LCH
由 GitBook 提供支持
在本页
在GitHub上编辑
  1. ECMAScript

ECMAScript 6 Reflect

Reflect是一个内置的对象,提供拦截 JavaScript 操作的方法。这些方法与**处理器对象(handler)**的方法相同。

Reflect不是一个函数对象,不可对其使用new操作符

ES6 推出Reflect的主要目的是,将一些明显属于语言范畴的方法,转移到Reflect对象上,例如:Object.defineProperty、Function.prototype.apply(),未来类似的功能也将只在Reflect对象上实现。其次,Reflect的方法返回值是一个布尔值,对于对象的操作更加合理,不需要使用try...catch进行捕获。此外,是某些命令式的操作,转为函数式的行为,比如:delete obj[prop]使用Reflect.deleteProperty(obj, prop)替代。

由于总能在Reflect对象上找到Proxy支持的拦截方法,Proxy可以通过调用Reflect对应的方法作为修改行为的基础,Proxy和Reflect的结合使得对对象的操作更加的便捷。

const proxy = new Proxy({}, {
    get(...args) {
        const rest = Reflect.get(...args);
        if (rest) {
            console.log('get property success');
        } else {
            console.log('get property failed');
        }
        return rest;
    }
});

Reflect.get(proxy, 'a'); // get property failed

Reflect.set(proxy, 'a', 1);
Reflect.get(proxy, 'a'); //get property success

相关API

Reflect.apply(target, context, args)

对一个函数进行调用操作,同时可以传入一个数组作为调用参数.

Reflect.apply(Array.prototype.slice, [1, 2, 3], [0, 2]); // [1, 2]

Reflect.construct(target, args[, newTarget])

newTarget 参考 new.target

const arrNum = Reflect.construct(Array, [], Number);

Array.isArray(arrNum); // true
Refelect.getPrototypeOf(arrNum) === Number.prototype; // true

Reflect.defineProperty(target, prop, descriptor)

定义对象属性,与Object.defineProperty()类似

const obj = {};
const rest = Reflect.defineProperty(obj, 'a', { value: 1 }); // true
console.log(rest, obj.a); // true 1

Reflect.preventExtensions(obj);
const rest2 = Reflect.defineProperty(obj, 'b', { value: 1 }); // true
console.log(rest2, obj.b); // false undefined

Reflect.deleteProperty(target, propKey)

删除目标对象的属性,delete操作符的函数级操作

const obj = { a: 1 };
Reflect.defineProperty(obj, 'b', {
    configurable: false,
    value: 2 
});
const rest1 = Reflect.deleteProperty(obj, 'a');
const rest2 = Reflect.deleteProperty(obj, 'b');

console.log(rest1, obj.a); // true undefined
console.log(rest2, obj.b); // false 2

Reflect.get(target, propKey[, receiver])

获取对象身上某个属性的值

const obj = {
    a: 1,
    [Symbol.for('b')]: 2,
    get c() {
        return 3;
    }
};

Reflect.get(obj, 'a'); // 1
Reflect.get(obj, Symbol.for('b')); // 2
Reflect.get(obj, 'c'); // 3


Reflect.get([1, 2], 1); // 2

function fn () { }
fn.prototype.z = 'parent';
Reflect.get(new fn(), 'z'); // parent

Reflect.getOwnPropertyDescriptor(target, propKey)

获取对象属性描述器。

const obj = { a: 1 };
Reflect.defineProperty(obj, 'b', {
    configurable: false,
    value: 2 
});

Reflect.getOwnPropertyDescriptor(obj, 'a'); // {value: 1, writable: true, enumerable: true, configurable: true}
Reflect.getOwnPropertyDescriptor(obj, 'b'); // {value: 2, writable: false, enumerable: false, configurable: false}

Reflect.getPrototypeOf(target)

获取对象原型

class A {}
const obj = new A();
Reflect.getPrototypeOf(obj) === A.prototype;

function fn () { }
const obj2 = new fn();
Reflect.getPrototypeOf(obj2) === fn.prototype; // true

Reflect.has(target, propKey)

检查对象是否存在某个属性

const obj = {
    a: 1,
    [Symbol.for('b')]: 2,
    get c() {
        return 3;
    }
};

Reflect.has(obj, 'a'); // true
Reflect.has(obj, Symbol.for('b')); // true
Reflect.has(obj, 'c'); // true
Reflect.has(obj, 'd'); // false

Reflect.isExtensible(target)

检查对象是否可扩展

const obj = {};

Reflect.isExtensible(obj); // true
Reflect.preventExtensions(obj);
Reflect.isExtensible(obj); // false

Reflect.ownKeys(target)

返回一个包含所有自身属性(不包含继承属性)的数组

const obj1 = {
    a: 1,
    [Symbol.for('b')]: 2,
    get c() {
        return 3;
    }
};
Reflect.ownKeys(obj1); // ["a", "c", Symbol(b)]

function fn () {
    this.x = 1
}
fn.prototype.z = 'z';
const obj2 = new fn();
Reflect.ownKeys(obj2); // ["x"]

Reflect.preventExtensions(target)

将对象标记为不再可扩展

const obj = {};
obj.a = 1;
Reflect.preventExtensions(obj); // true
obj.b = 1;

console.log(obj); // { a: 1 }

Reflect.set(target, propKey, val[, receiver])

给目标对象分配属性的值

const obj = {};
Reflect.set(obj, 'a', 1); // true

Reflect.defineProperty(obj, 'a', { 
    writeable: false,
}); // true
Reflect.set(obj, 'a', 2); // false

Reflect.preventExtensions(obj); // true
Reflect.set(obj, 'b', 1); // false

Reflect.setPrototypeOf(target, prototype)

修改对象的原型

function fn () {}
const obj = new fn();

Reflect.getPrototypeOf(obj) === fn.prototype; // true

Reflect.setPrototypeOf(obj, Array.prototype); // true
Reflect.getPrototypeOf(obj) === Array.prototype; // true

Reflect.preventExtensions(obj); // true
Reflect.setPrototypeOf(obj, Number.prototype); // true
上一页ECMAScript 6 Proxy下一页ECMAScript 6 new.target

最后更新于7年前

对构造函数进行操作.

new