JS 反射机制及 Reflect 详解

更新日期: 2021-06-02阅读: 1.4k标签: 机制

一、什么是反射机制

反射机制是在编译阶段不知道是哪个类被加载,而是在运行的时候才加载、执行。
也就是说,反射机制指的是程序在运行时能够获取自身的信息。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.isExtensible 与 Object.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: ƒ, …}

来自:https://www.cnblogs.com/Leophen/archive/2021/06/02/14838608.html


链接: https://fly63.com/article/detial/10376

浅析前端页面渲染机制

作为一个前端开发,最常见的运行环境应该是浏览器吧,为了更好的通过浏览器把优秀的产品带给用户,也为了更好的发展自己的前端职业之路,有必要了解从我们在浏览器地址栏输入网址到看到页面这期间浏览器是如何进行工作的

这一次,彻底弄懂 JavaScript 执行机制

javascript是一门单线程语言,Event Loop是javascript的执行机制.牢牢把握两个基本点,以认真学习javascript为中心,早日实现成为前端高手的伟大梦想!

创建js hook钩子_js中的钩子机制与实现

钩子机制也叫hook机制,或者你可以把它理解成一种匹配机制,就是我们在代码中设置一些钩子,然后程序执行时自动去匹配这些钩子;这样做的好处就是提高了程序的执行效率,减少了if else 的使用同事优化代码结构

小程序的更新机制_如何实现强制更新?

在讲小程序的更新机制之前,我们需要先了解小程序的2种启动模式,分别为:冷启动和热启动。小程序不同的启动方式,对应的更新情况不不一样的。无论冷启动,还是热启动。小程序都不会马上更新的,如果我们需要强制更新,需要如何实现呢?

基于JWT的Token认证机制实现及安全问题

JSON Web Token(JWT)是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。其JWT的组成:一个JWT实际上就是一个字符串,它由三部分组成,头部、载荷与签名。

web前端-JavaScript的运行机制

本文介绍JavaScript运行机制,JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。

轮询机制解决后端任务回调问题

现在有一个需求,前端有一个按钮,点击以后会调用后端一个接口,这个接口会根据用户的筛选条件去hadoop上跑任务,将图片的base64转为img然后打包成zip,生成一个下载连接返回给前端,弹出下载框。hadoop上的这个任务耗时比较久

JavaScript预解释是一种毫无节操的机制

js代码执行之前,浏览器首先会默认的把所有带var和function的进行提前的声明或者定义:1.理解声明和定义、2.对于带var和function关键字的在预解释的时候操作不一样的、3.预解释只发生在当前的作用域下

js对代码解析机制

脚本执行js引擎都做了什么呢?1.语法分析 2.预编译 3.解释执行。在执行代码前,还有两个步骤;语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误 ,查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined

web认证机制

以前对认证这方面的认识一直不太深刻,不清楚为什么需要token这种认证,为什么不简单使用session存储用户登录信息等。最近读了几篇大牛的博客才对认证机制方面有了进一步了解。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!