一、什么是反射机制

反射机制是在编译阶段不知道是哪个类被加载,而是在运行的时候才加载、执行。

也就是说,反射机制指的是程序在运行时能够获取自身的信息。

js 中的 apply 就是反射机制。

二、Reflect

1、Reflect 定义

Reflect 是一个内建的对象,用来提供方法去拦截 JavaScript 的操作。

Reflect 不是一个函数对象,所以它是不可构造的,也就是说它不是一个构造器,不能通过 new 操作符去新建或者将其作为一个函数去调用 Reflect 对象。

Reflect 的所有属性和方法都是静态的。

Reflect 内部封装了一系列对对象的底层操作

Reflect 成员方法就是 Proxy 处理对象的默认实现

const proxy = new Proxy(obj, {
get(target, property) {
// 如果没有定义 get 方法,那么默认返回的就是 Reflect 的 get 方法
return Reflect.get(target, property)
}
})

2、Reflect API 汇总

Reflect 提供了一套用于操作对象的 API,我们之前操作对象可以用 Object 上面的一些方法,也可以用 in、delete 这种操作符,使用 Reflect 就统一了操作方式

handler ⽅法 默认调⽤ 功能
get Reflect.get() 获取对象身上某个属性的值
set Reflect.set() 在对象上设置属性
has Reflect.has() 判断一个对象是否存在某个属性
deleteProperty Reflect.deleteProperty() 删除对象上的属性
getProperty Reflect.getPrototypeOf() 获取指定对象原型的函数
setProperty Reflect.setPrototypeOf() 设置或改变对象原型的函数
isExtensible Reflect.isExtensible() 判断一个对象是否可扩展 (即是否能够添加新的属性)
preventExtensions Reflect.preventExtensions() 阻止新属性添加到对象
getOwnPropertyDescriptor Reflect.getOwnPropertyDescriptor() 获取给定属性的属性描述符
defineProperty Reflect.defineProperty() 定义或修改一个对象的属性
ownKeys Reflect.ownKeys() 返回由目标对象自身的属性键组成的数组
apply Reflect.apply() 对一个函数进行调用操作,同时可以传入一个数组作为调用参数
construct Reflect.construct() 对构造函数进行 new 操作,实现创建类的实例
.preventExtensions Reflect.preventExtensions() 阻止新属性添加到对象

3、.apply()

Reflect.apply(target, thisArgument, argumentsList)

  • target:目标函数(必选)
  • thisArgument:target 函数调用时绑定的 this 对象(可选)
  • argumentsList:target 函数调用时传入的实参列表,该参数应该是一个类数组的对象(可选)

① ES5 用法

先指定方法,再去调用 apply

Math.floor.apply(null, [1.72])  // 1

② ES6 用法

先传递 apply,再指定是哪个方法

Reflect.apply(Math.floor, null, [1.72])  // 1

静态扫描时 Math.floor 是没有被执行,等到运行时再动态的将 Math.floor 作为参数传进来的

③ 实际应用

// ES5 用法
let price = 101.5
if (price > 100) {
price = Math.floor.apply(null, [price])
} else {
price = Math.ceil.apply(null, [price])
} price // 101
// ES6 用法
let price = 101.5 Reflect.apply(price > 100 ? Math.floor : Math.ceil, null, [price]) // 101

4、.construct()

使用反射的方式去实现创建类的实例,类似于 new target(…args)

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

  • target:被运行的目标函数(必选)
  • argumentsList:调用构造函数的数组或者伪数组(可选)
  • newTarget:该参数为构造函数, 参考 new.target 操作符,如果没有 newTarget 参数, 默认和 target 一样(可选)

① ES5 用法

let a = new Date()

a.getTime()  // 1632632744483

② ES6 用法

let b = Reflect.construct(Date, [])

b.getTime()  // 1632632744484

5、.defineProperty()

静态方法 Reflect.defineProperty() 基本等同于 Object.defineProperty() 方法

Reflect.defineProperty(target, propertyKey, attributes)

  • target:目标对象(必选)
  • propertyKey:要定义或修改的属性的名称(可选)
  • attributes:要定义或修改的属性的描述(可选)

① ES5 用法

const student = {}
const r = Object.defineProperty(student, 'name', { value: 'Mike' }) student // {name: "Mike"}
r // {name: "Mike"}

② ES6 用法

const student = {}
const r = Reflect.defineProperty(student, 'name', { value: 'Mike' }) student // {name: "Mike"}
r // true

这两个方法效果上来看是一摸一样的,都可以改变一个对象的值

区别在于返回值不同:Object是返回这个值,Reflect是返回true

PS: 在 W3C 中,以后所有的 Object 上面的方法,都会慢慢迁移到 Reflect 对象,可能以后会在 Object 上面移除这些方法

6、.deleteProperty()

Reflect.deleteProperty 允许你删除一个对象上的属性,返回一个 Boolean 值表示该属性是否被成功删除,它几乎与非严格的 delete operator 相同

Reflect.deleteProperty(target, propertyKey)

  • target:删除属性的目标对象
  • propertyKey:将被删除的属性的名称

① ES5 用法

const obj = { x: 1, y: 2 }
const a = delete obj.x obj // {y: 2}
a // true

② ES6 用法

const obj = { x: 1, y: 2 }
const a = Reflect.deleteProperty(obj, 'x') obj // {y: 2}
a // true

7、.get()

Reflect.get() 方法的工作方式,就像从 object (target[propertyKey]) 中获取属性,但它是作为一个函数执行的

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

① ES5 用法

const obj = { x: 1, y: 2 }

obj.x  // 1
obj['x'] // 1

② ES6 用法

const obj = { x: 1, y: 2 }

Reflect.get(obj, 'x')  // 1

Reflect.get(['a', 'b', 'c'], 1)  // b

8、.getOwnPropertyDescriptor()

静态方法 Reflect.getOwnPropertyDescriptor()Object.getOwnPropertyDescriptor() 方法相似

如果在对象中存在,则返回给定的属性的属性描述符,否则返回 undefined

Reflect.getOwnPropertyDescriptor(target, propertyKey)

① ES5 用法

const obj = { x: 1, y: 2 }

Object.getOwnPropertyDescriptor(obj, 'x')
// {value: 1, writable: true, enumerable: true, configurable: true}

② ES6 用法

const obj = { x: 1, y: 2 }

Reflect.getOwnPropertyDescriptor(obj, 'x')
// {value: 1, writable: true, enumerable: true, configurable: true} Reflect.getOwnPropertyDescriptor({ x: 'hello' }, 'y')
// undefined Reflect.getOwnPropertyDescriptor([], 'length')
// {value: 0, writable: true, enumerable: false, configurable: false}

③ 对比

如果 Reflect.getOwnPropertyDescriptor 的第一个参数不是一个对象(一个原始值),那么将造成 TypeError 错误

而对于 Object.getOwnPropertyDescriptor,非对象的第一个参数将被强制转换为一个对象处理

Reflect.getOwnPropertyDescriptor("foo", 0);
// TypeError: "foo" is not non-null object Object.getOwnPropertyDescriptor("foo", 0);
// { value: "f", writable: false, enumerable: true, configurable: false }

9、.getPrototypeOf()

静态方法 Reflect.getPrototypeOf()Object.getPrototypeOf() 方法是一样的,都是返回指定对象的原型(即,内部的 [[Prototype]] 属性的值)

Reflect.getPrototypeOf(target)

① ES5 用法

const d = New Date()

Object.getPrototypeOf(d)
// {constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …}

② ES6 用法

const d = New Date()

Reflect.getPrototypeOf(d)
// {constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …}

10、.has()

判断一个对象是否存在某个属性,和 in 运算符 的功能完全相同

Reflect.has(target, propertyKey)

const obj = { x: 1, y: 2 }

Reflect.has(obj, 'x')  // true
Reflect.has(obj, 'z') // false

11、.isExtensible()

判断一个对象是否可扩展

Reflect.isExtensibleObject.isExtensible 方法一样,都是判断一个对象是否可扩展 (即是否能够添加新的属性)

Reflect.isExtensible(target)

const obj = { x: 1, y: 2 }

Reflect.isExtensible(obj)  // true

Object.freeze(obj)  // 阻止新属性添加到对象
obj.z = 3 Reflect.isExtensible(obj) // false
obj // {x: 1, y: 2}

12、.ownKeys()

判断对象自身属性

Reflect.ownKeys 方法返回一个由目标对象自身的属性键组成的数组,它的返回值等同于 `Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))

Reflect.ownKeys(target)

const obj = { x: 1, y: 2 }

Reflect.ownKeys(obj)  // ["x", "y"]
Reflect.ownKeys([]) // ["length"]
Reflect.ownKeys([1, 2]) // ["0", "1", "length"]

13、.preventExtensions()

阻止新属性添加到对象,等同于Object.freeze()

Reflect.preventExtensions 方法阻止新属性添加到对象,例如:防止将来对对象的扩展被添加到对象中,与 Object.preventExtensions() 方法一致

Reflect.preventExtensions(target)

const obj = { x: 1, y: 2 }

Reflect.isExtensible(obj)  // true

Reflect.preventExtensions(obj)  // 阻止新属性添加到对象
obj.z = 3 Reflect.isExtensible(obj) // false
obj // {x: 1, y: 2}

14、.set()

写数据

Reflect.set 方法允许你在对象上设置属性,用来给属性赋值,类似 property accessor 的语法,但它是以函数的方式

Reflect.set(target, propertyKey, value[, receiver])

const obj = { x: 1, y: 2 }
Reflect.set(obj, 'z', 4) obj // {x: 1, y: 2, z: 4} const arr = ['apple', 'pear']
Reflect.set(arr, 1, 'banana') arr // ["apple", "banana"]

15、.setPrototypeOf()

Reflect.setPrototypeOf 方法改变指定对象的原型 (即内部的 [[Prototype]] 属性值)

Reflect.setPrototypeOf(target, prototype)

const arr = ['apple', 'pear']
Reflect.getPrototypeOf(arr)
// [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ,…] Reflect.setPrototypeOf(arr, String.prototype)
Reflect.getPrototypeOf(arr)
// String {"", constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}

JS 反射机制及 Reflect 详解的更多相关文章

  1. JAVA反射概念及使用详解(超详细)

    JAVA反射概念及使用详解 一.什么是反射? 反射:框架设计的灵魂 框架:半成品软件.可以在框架的基础上进行软件开发,简化编码 反射:将类的各个组成部分封装为其他对象,这就是反射机制 ​ 好处: ​ ...

  2. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  3. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  4. ext.js的mvc开发模式详解

    ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...

  5. 微信JS接口汇总及使用详解

    这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...

  6. js中中括号,大括号使用详解

    js中中括号,大括号使用详解 一.总结 一句话总结:{ } 是一个对象,[ ] 是一个数组 1.js大括号{}表示什么意思? 对象 { } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或 ...

  7. js对象浅拷贝和深拷贝详解

    js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...

  8. amazeui中的js插件有哪些(详解功能)

    amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...

  9. 大数据学习笔记——Spark工作机制以及API详解

    Spark工作机制以及API详解 本篇文章将会承接上篇关于如何部署Spark分布式集群的博客,会先对RDD编程中常见的API进行一个整理,接着再结合源代码以及注释详细地解读spark的作业提交流程,调 ...

随机推荐

  1. spring boot最新版使用几个坑解决

    <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent ...

  2. 【Set】Set集合求并集,交集,差集

    /** * @author: Sam.yang * @date: 2020/11/16 11:14 * @desc: Set集合操作工具类 */ public class SetOptUtils { ...

  3. 【Nginx(二)】Nginx目录结构和常用的命令以及核心配置文件

    Nginx的目录结构: 默认的安装路径 : /usr/local/nginx 安装完成后,Nginx的目录结构如下: conf:   #所有配置文件的目录 nginx.conf  #默认的主要配置文件 ...

  4. Ribbon、Feign和OpenFeign的区别

    Spring Cloud 微服务架构学习记录与示例 Ribbon Ribbon 是 Netflix开源的基于HTTP和TCP等协议负载均衡组件 Ribbon 可以用来做客户端负载均衡,调用注册中心的服 ...

  5. hook Android系统调用的乐趣和好处

    翻译:myswsun 0x00 前言 Android的内核是逆向工程师的好伙伴.虽然常规的Android应用被限制和沙盒化,逆向工程师可以按自己希望自定义和改变操作系统和内核中行为.这给了你不可多得的 ...

  6. Python编写基于socket的非阻塞多人聊天室程序(单线程&多线程)

    前置知识:socket非阻塞函数(socket.setblocking(False)),简单多线程编程 代码示例: 1. 单线程非阻塞版本: 服务端: #!/usr/bin/env python # ...

  7. POJ1149 PIGS(最大流)

    题意:       有一个人,他有m个猪圈,每个猪圈里面有一定数量的猪,但是每个猪圈的门都是锁着的,他自己没有钥匙,只有顾客有钥匙,一天依次来了n个顾客,(记住是依次来的)他们每个人都有一些钥匙,和他 ...

  8. Android开机时间分析

    http://blog.csdn.net/huangyabin001/article/details/42777703

  9. 【python】Leetcode每日一题-二叉搜索树节点最小距离

    [python]Leetcode每日一题-二叉搜索树节点最小距离 [题目描述] 给你一个二叉搜索树的根节点 root ,返回 树中任意两不同节点值之间的最小差值 . 示例1: 输入:root = [4 ...

  10. spring.framework 版本从4.1.6.RELEASE升到5.0.20.RELEASE

    将org.springframework 使用到的jar 版本号改为5.0.20.RELEASE后运行会报错: Servlet.service() for servlet [springmvc] in ...