ES6 Reflect使用笔记
Reflect
Reflect 对象和Proxy对象一样, 为操作对象提供了新的API。
为什么使用 Reflect的方式来操作对象?
将 Object 对象上一些明显属于内部的方法放到 Reflect对象上。比如
Object.defindProperty
也可以使用Reflect.defindProperty
修改某些 Object 方法的返回结果
让 Object 操作都变成函数行为。
Reflect 对象的操作方法和 Proxy的方法一一对应, 很方便 Proxy对象来调用 Reflect 方法
例子:
const sum = function (num1, num2) {
return num1 + num2
}
const proxy = new Proxy(sum, {
apply(target, context, args) {
return Reflect.apply(...arguments) * 2
}
})
proxy(1,2) // 6
以上代码 proxy 的配置方法 apply和 Reflect的apply方法是对应关系,直接通过 Reflect.apply
来调用拦截函数 sum
。并将函数执行后的结果 * 2。最终的结果是 6。
#### Reflect 对象和 Proxy的静态方法一样,同样是13个。
- Reflect.apply(target, context, args)
- Reflect.get(target, key, context)
- Reflect.set(target, key, value, context)
- Reflect.construct(target, args)
- Reflect.defindProperty(target, key, desc)
- Reflect.has(target, key)
- Reflect.deleteProperty(target, key)
- Reflect.setProperty(target, proto)
- Reflect.getProperty(target)
- Reflect.ownKeys(target)
- Reflect.isExtensible(target)
- Reflect.preventExtensions(target)
- Reflect.getOwnPropertyDescriptor(target, key)
Reflect.get(target, key, context)
target
: 查找的对象
key
: 查找的属性
context
: 读取getter函数的上下文对象
const obj = {
name: 'qiqingfu',
get sayName() {
console.log(this.name)
}
}
const obj1 = {
name: 'zhangfei'
}
Reflect.get(obj, 'name') // qiqingfu
Reflect.get(obj, 'sayName', obj1) // zhangfei
如果第一个参数不是对象, Reflect.get
方法会报错。
Reflect.set(target, key, value, context)
target
: 要给哪个对象设置
key
: 要设置的属性
value
: 设置的值
返回值
: boolean
const obj = {
value: 1,
set fn(newValue) {
return this.value = newValue
}
}
console.log(Reflect.set(obj, 'name', 'qiqingfu')) // true
console.log(Reflect.set(obj, 'fn', 2))
console.log(obj)
以上代码,给obj对象设置了一个name
属性,其值为qiqingfu
, 并且设置fn
的时候被get
函数拦截到了。
Reflect.has(target, key) 方法检测 target对象上有么有 key这个属性
返回值
: boolean
const obj = {
name: 'qiqingfu',
a: 2
}
console.log(Reflect.has(obj, 'name')) // true
console.log(Reflect.has(obj, 'a')) // true
console.log(Reflect.has(obj, 'b')) // false
其实 Reflect.has
和 in
操作符类似。
Reflect.construct(target, args) 方法用于类似于 new 操作符
target
: 目标函数
args
: 实例化对象需要传递的参数 Array
返回值
: 实例对象
function Prosen (name, age) {
this.name = name;
this.age = age
}
const prosen = Reflect.construct(Prosen, ['qiqingfu', 22])
// {name: 'qiqingfu', age: 22}
以上代码使用 Reflect.construct
方法实例话一个对象,接受的参数为数组类型
Reflect.defineProperty(target, key, decs) 和 Object.defineProperty(target, key, decs) 一样
更推崇使用前者。
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
const obj = {
}
Reflect.defineProperty(obj, 'a', {
value: 1,
configurable: true, // 可配置
writable: true // 可写
})
// {a: 1}
以上代码给 obj 对象添加了一个 a属性, 其值为1并且是可配置和可修改的
Reflect.deleteProperty(target, key) 方法删除 target对象的key属性
const obj = {
a: 1
}
Reflect.defindProperty(obj, 'a')
console.log(obj) // {}
Reflect.getPropertyOf(target) 方法获取一个对象的原型对象
function Prosen() {
}
Prosen.prototype.age = 21
const prosen = Reflect.construct(Prosen, [])
// 获取原型对象的属性
const proto = Reflect.getPrototypeOf(prosen)
console.log(proto)
// {age: 21, constructor: ƒ}
以上代码 给 Prosen 构造函数的原型对象上添加了一个 age属性。并且通过 Reflect.construct
方法实例化一个对象。那么就可以通过 Reflect.getPrototypeOf
方法获取一个对象的原型对象。
Reflect.setPrototypeOf(target, proto) 方法将 proto设置为 target对象的原型对象
function Prosen() {
}
Prosen.prototype.age = 21
const prosen = Reflect.construct(Prosen, [])
// 设置prosen 的原型对象
Reflect.setPrototypeOf(prosen, {b: 2})
此时, prosen的原型对象为 {b:2}, 而 construct
指针会被覆盖
Reflect.ownKeys(target) 获取对象的key值,返回值为数组
和 Object.ownKeys
相同。
const obj = {
a: 1,
[Symbol('c')]: 3,
}
Reflect.defineProperty(obj, 'b', {
value: 2,
configurable: true,
enumerable: true
})
console.log(Reflect.ownKeys(obj))
// ["a", "b", Symbol(c)]
返回值是一个数组, 存放着对象的 key值的集合。
Reflect.getOwnPropertyDescriptor(target, key) 方法获取一个对象key值的描述对象
返回值
: Object
const obj = {
a: 1,
[Symbol('c')]: 3,
}
Reflect.defineProperty(obj, 'b', {
value: 2,
configurable: true,
enumerable: true
})
const decs = Reflect.getOwnPropertyDescriptor(obj, 'b')
console.log(decs)
/*
{value: 2, writable: false, enumerable: true, configurable: true}
*/
以上代码通过 Reflect.getOwnPropertyDescriptor
方法获取一个对象属性的描述对象, 如果第一个参数不是对象会报错。而在 Object.getOwnPropertyDescriptor
不会报错,只不过返回 undefind
ES6 Reflect使用笔记的更多相关文章
- ES6 Reflect的认识
首先我们要了解一下,为什么会新添加这么一个全局对象?如果你看过Reflect的一些函数,你就会发现,这个对象上的方法基本上都可以从Object上面找到,找不到的那些,也是可以通过对对象命令式的操作去实 ...
- ES6 Reflect 与 Proxy
概述 Proxy 与 Reflect 是 ES6 为了操作对象引入的 API . Proxy 可以对目标对象的读取.函数调用等操作进行拦截,然后进行操作处理.它不直接操作对象,而是像代理模式,通过对象 ...
- es6 Reflect对象详解
Reflect是ES6为操作对象而提供的新API,而这个API设计的目的只要有: 将Object对象的一些属于语言内部的方法放到Reflect对象上,从Reflect上能拿到语言内部的方法.如:Obj ...
- ES6 Reflect
1.Reflect概述 ES6 为了操作对象而提供的新 API 2.Reflect设计目的 (1)将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到 ...
- 《深入理解ES6》读书笔记
文章目录 第一章 块级绑定 1. var 声明与变量提升 2. let 与 var 的区别 第二章 字符串与正则表达式 1.字符串扩展 1.1 includes().startsWith() .end ...
- es6小白学习笔记(一)
1.let和const命令 1.es6新增了let和const命令,与var用法类似,但它声明的变量只在let所在的代码块内有效(块级作用域,es5只有全局和函数作用域) { let a = 1; v ...
- ES6新属性笔记
一.destructuring--解构赋值 1.数组解构赋值 (1)完全解构 let [a,b,c] = [1,2,3];//普通 console.log(a+":"+b+&quo ...
- Es6模块语法笔记
/** * Created by Administrator on 2017/4/15. */ /*---------------------export命令--------------------- ...
- JavaScript(ES6)学习笔记-Set和Map数据结构(一)
一.Set 1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. , , , , ']); s; // ...
随机推荐
- 华东交通大学2017年ACM“双基”程序设计竞赛 1010
Problem Description 定义操作:将数 n 变为 f(n) = floor(sqrt(n)).即对一个数开平方后,再向下取整.如对 2 进行一次操作,开平方再向下取整, 1.41421 ...
- Batch the files in the directory
#!/bin/bash #sourceFolder = /home/bigdatagfts/pl62716/refdata #targetFolder = /home/bigdatagfts/pl62 ...
- 002 Add Two Numbers 链表上的两数相加
You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...
- 两个线程分别打印 1- 100,A 打印偶数, B打印奇数
package com.demo.thread; public class PrintNumber { private static Object lock = new Object(); priva ...
- 解决gradle下载慢的问题
解决方法要做两部 一 打开用户主目录 linux平台/home/用户名/.gradle windows平台c:\Users\用户名\.gradle macos平台/Users/用户名/.gradle ...
- net 提供了Thread类用于线程的操作
net 提供了Thread类用于线程的操作. 当初始化一个线程,把Thread.IsBackground=true的时候,指示该线程为后台线程.后台线程将会随着主线程的推出而退出.后台线程不妨碍程序的 ...
- Rematch Redux的替代品
前言:Rematch和vuex很像. 文档:https://github.com/yurizhang/rematch 简介: 先看看rematch的官方介绍: Rematch是没有boilerplat ...
- Spring cloud Eureka 服务治理(注册服务提供者)
搭建完成服务注册中心,下一步可以创建服务提供者并向注册中心注册服务. 接下来我们创建Spring Boot 应用将其加入Eureka服务治理体系中去. 直接使用签名章节创建hello服务项目改造: 1 ...
- npm warn weex @1.0.0 no repository field
玩weex出现nmp安装问题总是包这个错,但是其实是安装成功的 npm warn weex@1.0.0 no repository field. 看字面意思大概是package.json里缺少repo ...
- echarts的title和legend重合解决(各种小细节)
一:关于title与legend重叠 1.重合样子 2.解决办法: legend:{ show: true, top:"6%",//与上方的距离 可百分比% 可像素px }, 3. ...