ES6学习笔记(12)----Reflect
参考书《ECMAScript 6入门》
http://es6.ruanyifeng.com/
Reflect
1.概述:Object对象的内部方法都能在Reflect中找到,同时Reflect将Object的一些命令改成了函数操作,且Reflect与Proxy一一对应。
2.静态方法
Object,Reflect,Proxy对比
Reflect第一个参数是对象,如果不是,则报错
let s = Symbol("ss");
let obj = {
"color" : "black",
size : 12,
[s] : "test symbol"
}
let obj1 = {
"type" : "A"
}
function Animal(name){
this.name = name;
}
Object.defineProperty(obj,'nonEm',{
value : "123",
enumerable : false,
confirgurable : true,
writable : true
});
Reflect.defineProperty(obj,'nonCn',{
value : "er",
enumerable : true,
configurable : false,
writable : true
});
Object.keys(obj);// ["color", "size", "nonCn"]
Reflect.ownKeys(obj);//["color", "size", "nonEm", "nonCn", Symbol(ss)]
obj.color //'black'
obj['color'] //'black'
Reflect.get(obj,'color'); //'black'
obj.name = "add name";//'add name'
Reflect.set(obj,'name','add name');//true
'size' in obj //true
Reflect.has(obj,'size');//true
Object.getOwnPropertyDescriptor(obj,'name');//{value: "add name", writable: true, enumerable: true, configurable: true}
Reflect.getOwnPropertyDescriptor(obj,'name');//{value: "add name", writable: true, enumerable: true, configurable: true}
Object.setPrototypeOf(obj,obj1);//{color: "black", size: 12, nonCn: "er", name: "add name", nonEm: "123", …}
Reflect.setPrototypeOf(obj,obj1);//true
Object.getPrototypeOf(obj);//{type: "A"}
Reflect.getPrototypeOf(obj);//{type: "A"}
Object.isExtensible(obj);//true
Reflect.isExtensible(obj);//true
Object.preventExtensions(obj);//{color: "black", size: 12, nonCn: "er", name: "add name", nonEm: "123", …}
Reflect.preventExtensions(obj);//true
Object.isExtensible(obj);//false
Reflect.isExtensible(obj);//false
delete obj['color']//true
Reflect.deleteProperty(obj,'color');//true
Reflect.ownKeys(obj);//["size", "nonEm", "nonCn", "name", Symbol(ss)]
let cat = new Animal('cat');
let cat1 = Reflect.construct(Animal,'cat1');
3.观察者模式
let obj = {name : "test"}
let handler = {
set(target,propKey,propValue,receiver){
let origin = Reflect.set(target,propKey,propValue,receiver);
console.log("add " + propKey+ " = " + propValue + " to target");
return origin;
}
}
let proxy = new Proxy(obj,handler);
proxy.color = "red"; //add color = red to target "red"
将观察对象与反应行为改为动态参数
let fs = new Set();
let objTest = {name : "123"};
let action = function(t,k,v){
console.log("add new attributes");
}
let observe = function(fn){
fs.add(fn);
}
let observeObj = function(obj){
return new Proxy(obj,{
set(target,propKey,propValue,receiver){
let origin = Reflect.set(target,propKey,propValue,receiver);
fs.forEach(fn => fn());
return origin;
}
});
}
observe(action);
let x = observeObj(objTest);
x.color = "455";//add new attributes "455"
ES6学习笔记(12)----Reflect的更多相关文章
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6学习笔记之变量的解构赋值
变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...
- JS&ES6学习笔记(持续更新)
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- Ext.Net学习笔记12:Ext.Net GridPanel Filter用法
Ext.Net学习笔记12:Ext.Net GridPanel Filter用法 Ext.Net GridPanel的用法在上一篇中已经介绍过,这篇笔记讲介绍Filter的用法. Filter是用来过 ...
- es6学习笔记-class之一概念
前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...
- SQL反模式学习笔记12 存储图片或其他多媒体大文件
目标:存储图片或其他多媒体大文件 反模式:图片存储在数据库外的文件系统中,数据库表中存储文件的对应的路径和名称. 缺点: 1.文件不支持Delete操作.使用SQL语句删除一条记录时,对应的文 ...
- golang学习笔记12 beego table name `xxx` repeat register, must be unique 错误问题
golang学习笔记12 beego table name `xxx` repeat register, must be unique 错误问题 今天测试了重新建一个项目生成新的表,然后复制到旧的项目 ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
随机推荐
- PHP——巧用PHP函数array_merge()合并数组
前言 返回联系人列表,包含所有的字母,之前返回的是存在这个联系人才会返回对应的大写字母,后面更改了要求要返回所有的字母从A-Z.PHP内置的一些函数活用起来,真的很省劲! 步骤 一般这时候大家可能直接 ...
- jQuery常用插件大全(9)ResponsiveSlides插件
ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...
- LoadRunner检查点使用小结
LR中检查点有两种:图片和文字. 常用检查点函数如下: 1)web_find()函数用于从 HTML 页中搜索指定的文本字符串: 2)web_reg_find()函数注册一个请求,以在下一个操作函数( ...
- 根据用户时区显示当地时间 javascript+php
在跨时区应用中会用到下面代码,这是以前写的一段代码. 服务器保存相关时间配置,保存形式为GMT时间,客户端需要根据客户所在时区做相应显示,以符合客户习惯. 1. [代码][JavaScript]代码 ...
- UISwitch用法:
代码: #import "ViewController.h" @interface ViewController () @end @implementation ViewContr ...
- 「网络流24题」「LuoguP2774」方格取数问题(最大流 最小割
Description 在一个有 m*n 个方格的棋盘中,每个方格中有一个正整数.现要从方格中取数,使任意 2 个数所在方格没有公共边,且取出的数的总和最大.试设计一个满足要求的取数算法.对于给定的方 ...
- [51nod 1129] 字符串最大值(kmp)
传送门 题目大意 求一个字符串的前 缀出现次数乘以长度的最大值. 题解 暴力枚举每一个前缀求出现次数再乘以常数取最大 这样做会T几个点 看了老师的做法是任意前缀出现的次数,它的next也会出现这些次数 ...
- hihoCoder搜索二·骑士问题
#include <stdio.h> #include <string.h> #include <math.h> #include <algorithm> ...
- scrapy 用法总结
待更新: 建立python开发虚拟环境 virtualenv mkvirtualenv --python=the-path-to-the-python-you-want-to use 安装: 使用p ...
- C++11六大函数(构造函数,移动构造函数,移动赋值操作符,复制构造函数,赋值操作符,析构函数)
在C++中,有三大函数复制控制(复制构造函数,赋值操作符,析构函数),而在C++11中,加入了移动构造函数,移动赋值操作符.我就斗胆将他们命名为六大函数好了. 一.构造函数 c++primer中说过: ...