es6 Proxy
proxy在语言层面去操作一个对象
var user={};
user.fname='Bob';
user.lname="Wood"; user.fullName= function () {
console.log(this.fname+" "+this.lname);
}
user.fullName();//Bob Wood
现在要做到user.fullName就让它去显示。
proxy接收2个参数,第一个是对象{},第二个也是个{}。
var user = new Proxy({}, {
get: function (obj, prop) {
return obj.fname + " " + obj.lname;
}
});
user.fname = 'Bob';
user.lname = "Wood";
console.log("user.fullName:" + user.fullName); //user.fullName:Bob Wood
此时没有对传入get方法中的prop做判断。所以哪怕输入一个user.age也会输出:Bob Wood
console.log("user.age:" + user.age); //user.age:Bob Wood
所以做一个判断,如果prop是full_name就输出全名
var user = new Proxy({}, {
get: function (obj, prop) {
if(prop=='full_name'){
return obj.fname + " " + obj.lname;
}
}
});
user.fname = 'Bob';
user.lname = "Wood";
console.log("user.full_name:" + user.full_name); //user.full_name:Bob Wood
console.log("user.age:" + user.age); //user.age:undefined
也可以通过switch对多个prop进行处理
var user = new Proxy({}, {
get: function (obj, prop) {
switch (prop){
case 'full_name':
return obj.fname + " " + obj.lname;
case 'age':
return obj.age;
}
}
});
user.fname = 'Bob';
user.lname = "Wood";
user.age="25";
console.log("user.full_name:" + user.full_name); //user.full_name:Bob Wood
console.log("user.age:" + user.age); //user.age:25
总结:get就像一层过滤器一样,obj在取值前加了一层,在对象提取值之前做一些操作。
除了get,也可以用set在设置属性时做一层处理。
var user = new Proxy({}, {
get: function (obj, prop) {
switch (prop) {
case 'full_name':
return obj.fname + " " + obj.lname;
case 'age':
return obj.age;
}
}, set: function (obj, prop,value) {//针对不同属性set值
switch (prop) {
case 'age':
obj.age=value+"岁";
break;
default:
obj[prop]=value; //age之外的属性直接保存
break;
}
}
});
user.fname = 'Bob';
user.lname = "Wood";
user.age = "25";
console.log("user.full_name:" + user.full_name); //user.full_name:Bob Wood
console.log("user.age:" + user.age); //user.age:25岁
除了get ,set 还有一些方法如下:
var handler =
{
// target.prop
get: ...,
// target.prop = value
set: ...,
// 'prop' in target
has: ...,
// delete target.prop
deleteProperty: ...,
// target(...args)
apply: ...,
// new target(...args)
construct: ...,
// Object.getOwnPropertyDescriptor(target, 'prop')
getOwnPropertyDescriptor: ...,
// Object.defineProperty(target, 'prop', descriptor)
defineProperty: ...,
// Object.getPrototypeOf(target), Reflect.getPrototypeOf(target),
// target.__proto__, object.isPrototypeOf(target), object instanceof target
getPrototypeOf: ...,
// Object.setPrototypeOf(target), Reflect.setPrototypeOf(target)
setPrototypeOf: ...,
// for (let i in target) {}
enumerate: ...,
// Object.keys(target)
ownKeys: ...,
// Object.preventExtensions(target)
preventExtensions: ...,
// Object.isExtensible(target)
isExtensible :...
}
参考:http://wiki.jikexueyuan.com/project/es6/object.html
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/6919862.html有问题欢迎与我讨论,共同进步。
es6 Proxy的更多相关文章
- ES6 Proxy 性能之我见
ES6 Proxy 性能之我见 本文翻译自https://thecodebarbarian.com/thoughts-on-es6-proxies-performance Proxy是ES6的一个强力 ...
- Vue3.0 响应式数据原理:ES6 Proxy
Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...
- ES6 Proxy和Reflect(下)
construct() construct方法用于拦截new命令. var handler = { construct (target, args) { return new target(...ar ...
- ES6 Proxy和Reflect (上)
Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy可以理 ...
- es6 proxy代理
es6 新增构造函数 Proxy Proxy 构造函数,可以使用new 去创建,可以往里面插入两个参数,都是对象 let target = {} let handler = {} let proxy ...
- ES6 Proxy的应用场景
一.相关API Proxy Reflect 二.Proxy应用场景 1.数据校验 表单提交的时候做数据校验,例如年龄是不是满足条件,数据类型是不是满足要求等等,这场场景非常适合使用Proxy. 下面展 ...
- es6 Proxy对象详解
Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改.这个词的原理为代理,在这里可以表示 ...
- 新的知识点来了-ES6 Proxy代理 和 去银行存款有什么关系?
ES给开发者提供了一个新特性:Proxy,就是代理的意思.也就是我们这一节要介绍的知识点. 以前,ATM还没有那么流行的时候(暴露年纪),我们去银行存款或者取款的时候,需要在柜台前排队,等柜台工作人员 ...
- es6 Proxy简单使用
es6的Proxy是什么? 可以理解为,是在访问对象前的一层拦截.只要访问的该对象,就要通过这个一层拦截.这一层的拦截,可以进行数据的过滤和更改 比如下面这个 var p = new Proxy({} ...
随机推荐
- Python 脚本碎片
基本输入输出 用户名/密码 #!/usr/bin/env python3 # -*- coding:utf-8 -*- # Liu Lei import getpass username = inpu ...
- mutt+msmtp实现在shell环境中发送电子邮件
作者:邓聪聪 为了自动化接收服务端的文件备份信息,利用mutt+msmtp在shell环境中发送电子邮件,轻松高效的完成运维工作. 下载msmtp wget http://downloads.sour ...
- Ridis
Redis介绍 redis是一个key-value存储系统.和Memcached类似,它支持存储的values类型相对更多,包括字符串.列表.哈希散列表.集合,有序集合. 这些数据类型都支持push/ ...
- zabbix添加对haproxy的监控
zabbix添加对haproxy的监控 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy本身提供一个web页面 ...
- FreeSWITCH黑名单功能设置
功能描述:对呼叫的号码进行过滤 步骤: 1.编译mod_blacklist 模块:进入源目录/usr/local/src/freeswitch --> make mod_blacklist-i ...
- Linux数字雨
<黑客帝国>电影里满屏幕代码的"数字雨",在 Linux 里面你也可以轻松实现这样的效果,你只需要一个命令 cmatrix . 需要先安装,因为 Ubuntu 没有预装 ...
- linux 查看nginx如何启动
执行命令: ps -A | grep nginx如果返回结果的话,说明有nginx在运行,服务已经启动
- Apache服务器和tomcat服务器有什么区别(转)
Apache与Tomcat都是Apache开源组织开发的用于处理HTTP服务的项目,两者都是免费的,都可以做为独立的Web服务器运行.Apache是Web服务器而Tomcat是Java应用服务器. A ...
- 33)django-原生ajax,伪ajax
一:概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作 ...
- 用Python优雅的处理日志
我们可以通过以下3种方式可以很优雅配置logging日志: 1)使用Python代码显式的创建loggers, handlers和formatters并分别调用它们的配置函数: 2)创建一个日志配置文 ...