Object.defineProperties()与Proxy对象代理
Object.defineProperties()
了不起啊。。vue.js通过它实现双向绑定的
Object.defineProperties(obj,props)
方法直接在一个对象上定义新的属性或修改现有属性 并返回该对象
参数
obj
在其上定义或修改属性的对象
props
要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种:数据描述符和访问器
描述符具有以下键:
configurable
true
当且仅当该属性描述符的类型可以被改变并且该属性可以从对应对象中删除
默认为false
enumerable
true
当且仅当在枚举相应对象上的属性时该属性显现
默认为false
value
- 与属性关联的值。可以是任何有效的JavaScript值(数字,对象,函数等)
默认为undefined
. writable
true
当且仅当与该属性相关联的值可以用assignment operator改变时
默认为false
get
- 作为该属性的 getter 函数,如果没有 getter 则为
undefined
。函数返回值将被用作属性的值
默认为undefined
set
- 作为属性的 setter 函数,如果没有 setter 则为
undefined
。函数将仅接受参数赋值给该属性的新值
默认为undefined
var a= {}
Object.defineProperty(a,"b",{
value:123
})
console.log(a.b);//
第一个参数:目标对象
第二个参数:需要定义的属性或方法的名字
第三个参数:目标属性所拥有的特性(descriptor)
现在咱主要讲get跟set哈 !! (其他详情可参考MDN) https://developer.mozilla.org/zh-CN/
set 和 get
在 descriptor 中不能 同时设置访问器 (get 和 set) 和 wriable 或 value 否则会错 就是说想用(get 和 set) 就不能用(wriable 或 value中的任何一个)
set 和 get 他俩干啥用的
var a= {}
Object.defineProperty(a,"b",{
set:function(newValue){
console.log("你要赋值给我 我的新值是"+newValue)
},
get:function(){
console.log("你取我的值")
return 2 //注意这里 我硬编码返回2
}
})
a.b =1 //打印 你要赋值给我,我的新值是1
console.log(a.b) //打印 你取我的值
//打印 2 注意这里,和我的硬编码相同的
简单来说,, 这个 “b” 赋值 或者 取值的时候会分别触发 set 和 get 对应的函数 取值、赋值
JS proxy
Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)
记得前一段时间用它实现过原生的双向数据绑定
<html>
<head>
</head>
<body>
<input type="text" id='ipt' oninput='handle()' />
<div id='txt'></div>
<button id='btn'>王瘦瘦</button>
<script>
var obj = {
mess:''"
} var proxy = new Proxy(obj, {
get: function(target) {
return target.mess;
},
set: function(target,key,value){
target.mess = value;
txt.innerHTML = proxy.mess;
}
}); function handle(){
var val = ipt.value;
//proxy添加了get和set方法
proxy.mess = val;
} btn.onclick = function(){
console.log(proxy.mess);
}
</script>
</body>
</html>
Proxy是ES6中提供的新的API 可以用来定义对象各种基本操作的自定义行为
(在文档中被称为traps我觉得可以理解为一个针对对象各种行为的钩子)
拿它可以做很多有意思的事情 在我们需要对一些对象的行为进行控制时将变得非常有效
Proxy参数
target
用Proxy
包装的目标对象(要被代理的对象可以是任何类型的对象 包括原生数组 函数 甚至另一个代理)
handler
一个对象 其属性是当执行一个操作时定义代理的行为的函数(对该代理对象的各种操作行为处理)
语法
let target = {}
let handlers = {}
let proxy = new Proxy(target, handlers) proxy.a = 123 console.log(target.a) //
在第二个参数为空对象的情况下 基本可以理解为是对第一个参数做的一次浅拷贝
(proxy是浅拷贝 只是做的对象的代理)
target是代理为数组扩展的实用工具 可以灵活的“定义”属性 而不需要使用Object.defineProperties方法
var docCookies = new Proxy(docCookies, {
"get": function (oTarget, sKey) {
return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
},
"set": function (oTarget, sKey, vValue) {
if (sKey in oTarget) { return false; }
return oTarget.setItem(sKey, vValue);
},
"deleteProperty": function (oTarget, sKey) {
if (sKey in oTarget) { return false; }
return oTarget.removeItem(sKey);
},
"enumerate": function (oTarget, sKey) {
return oTarget.keys();
},
"ownKeys": function (oTarget, sKey) {
return oTarget.keys();
},
"has": function (oTarget, sKey) {
return sKey in oTarget || oTarget.hasItem(sKey);
},
"defineProperty": function (oTarget, sKey, oDesc) {
if (oDesc && "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); }
return oTarget;
},
"getOwnPropertyDescriptor": function (oTarget, sKey) {
var vValue = oTarget.getItem(sKey);
return vValue ? {
"value": vValue,
"writable": true,
"enumerable": true,
"configurable": false
} : undefined;
},
}); /* Cookies 测试 */ alert(docCookies.my_cookie1 = "First value");
alert(docCookies.getItem("my_cookie1")); docCookies.setItem("my_cookie1", "Changed value");
alert(docCookies.my_cookie1);
全部traps
在这里实现一个简单的对象保护 只读属性 实现数据的保护
let Person = {
name : "老赵",
age : 18
} let person = new Proxy(Person,{
get(target,key){
return target[key] //读操作
},
set(target,key,value){
if(key !== "name"){
target[key] = value
}
}
})
//person.name = "王瘦瘦" //报错 不允许比老赵帅!!
Feeling so high but too far away
Object.defineProperties()与Proxy对象代理的更多相关文章
- Object.defineProperties——MEAN开发后台的Model层
Object.defineProperties是什么?有什么用? 这个问题比较听起来可能比较难以理解,确实我也是在项目中遇到的才会去想.以前看到<高级程序设计>的时候,有这么一种东西,定义 ...
- 分享一个Object.defineProperties 定义一个在原对象可读可写的方法
function A(){ this.name = 'hellow word'; } Object.defineProperties( A.prototype,{ doSomething2 : { v ...
- js中Object.defineProperties 定义一个在原对象可读可写的方法
function A(){ this.name = 'hellow word'; } Object.defineProperties( A.prototype,{ doSomething2 : { v ...
- es6 Proxy对象详解
Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改.这个词的原理为代理,在这里可以表示 ...
- Inside Flask - globals 全局变量(对象代理)
Inside Flask - globals 全局变量(对象代理) 框架是一个容器,在框架内编程,一般是要遵守框架的约定和使用模式.通常这样的模式是 IoC,即由框架调用用户的代码,而不是用户调用框架 ...
- 在spring中获取代理对象代理的目标对象工具类
昨天晚上一哥们需要获取代理对象的目标对象,查找了文档发现没有相应的工具类,因此自己写了一个分享给大家.能获取JDK动态代理/CGLIB代理对象代理的目标对象. 问题描述:: 我现在遇到个棘手的问题,要 ...
- 获取JDK动态代理/CGLIB代理对象代理的目标对象。
问题描述:: 我现在遇到个棘手的问题,要通过spring托管的service类保存对象,这个类是通过反射拿到的,经过实验发现这个类只能反射取得sservice实现了接口的方法,而extends类的方法 ...
- es6学习笔记-proxy对象
前提摘要 尤大大的vue3.0即将到来,虽然学不动了,但是还要学的啊,据说vue3.0是基于proxy来进行对值进行拦截并操作,所以es6的proxy也是要学习一下的. 一 什么是proxy Prox ...
- 设计模式之Proxy(代理)(转)
理解并使用设计模式,能够培养我们良好的面向对象编程习惯,同时在实际应用中,可以如鱼得水,享受游刃有余的乐趣. Proxy是比较有用途的一种模式,而且变种较多,应用场合覆盖从小结构到整个系统的大结构,P ...
随机推荐
- centos7下安装docker(25docker swarm---replicated mode&global mode)
swarm可以在service创建或运行过程中灵活的通过--replicas调整容器的副本数量,内部调整调度器则会根据当前集群资源使用的情况在不同的node上启动或停止容器,这就是service默认的 ...
- 当web应用包含了websocket长连接,如何在web应用前加一层nginx转发
1 通过在web应用的前面加一层nginx ,可以实现一台主机部署多个应用,每个应用都可以用不同的域名去访问,并且端口都是80 2 nignx 转发websocket长连接 1 每个web应用,他们运 ...
- jenkins使用3----相关工具安装
一.相关工具安装 a.git安装 #yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc-c++ ...
- apt-get update 更新 ubuntu时出现Hash sum mismatch的原因及解决方法
$ sudo apt-get update ...... Hit http://mirrors.163.com trusty/main Sources ...
- Csharp—碎片知识积累
1.获取应用程序的工作目录 2.将两个字符串组成一个新的路径: 3.MessageBox使用(弹出一个消息框)(第一个参数是消息内容,第二个参数是消息标题,第三个参数是按钮设置,第四个参数是消息内容前 ...
- luogu p1652 圆
题目部分 题目描述 给出N个圆,保证任意两个圆都相离,然后给出两个点(x1,y1).(x2,y2),保证均不在某个圆上,要从点(x1,y1)到(x2,y2)画条曲线,问这条曲线最少穿过多少次圆的边界? ...
- machine learning[GMM-EM]
介绍下EM算法和GMM模型,先简单介绍GMM的物理意义,然后给出最直接的迭代过程:然后再介绍EM. 1 高斯混合模型 高斯分布,是统计学中的模型,其输出值表示当前输入数据样本(一维标量,多维向量)的概 ...
- Python学到什么程度才可以去找工作?掌握这4点足够了!
大家在学习Python的时候,有人会问"Python要学到什么程度才能出去找工作",对于在Python培训机构学习Python的同学来说这都不是问题,因为按照Python课程大纲来 ...
- 扒一扒: Java 中的枚举
目录 1. 枚举的定义 1.1 传统的非枚举方法 1.2 枚举方法 1.3 定义总结 2 枚举的本质 2.1 继承 java.lang.Enum 2.2 final 类型 2.3 枚举常量本身就是该类 ...
- Java面试之高并发系统
在开发高并发系统时有三把利器用来保护系统:缓存.降级和限流.