博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
响应式监听--------ES6之Proxy代理 和 Object.defineProperty
阅读量:6415 次
发布时间:2019-06-23

本文共 2199 字,大约阅读时间需要 7 分钟。

  hot3.png

ES6中提出了一个新的特性,就是proxy,用来拦截在一个对象上的指定操作。这个功能非常的有用。举一个例子来说:

var engineer = { name: 'Joe Sixpack', salary: 50 };var interceptor = {  set: function (receiver, property, value) {    console.log(property, 'is changed to', value);    receiver[property] = value;  }};engineer = Proxy(engineer, interceptor);

engineer对象被代理Proxy构建的代理对象代替,传入Proxy的第二个参数是一个处理器函数,一个处理器函数有多种方法,如get、set等方法。这里的set方法能够拦截到那些在代理对象身上进行的所有的属性赋值操作。 

当我们执行下面赋值:

engineer.salary = 60;
  • 1

会触发处理器,输出信息:

salary is changed to 60
  • 1

每当代理对象被赋值,处理器函数就会调用,这样就可以用来调试某些问题。

当然了,Proxy可不是仅仅为了调试而诞生的,如果你用过Sencha Touch 或者 AngularJS的话,就会发现这些框架都是类似数据模型绑定的功能。

笔者曾在Sencha Touch中用过代理,代码如下:

proxy:{//数据代理//              type:'localstorage',//              id:'bills',                // limitParam:'limit',                // pageParam:'page',                //将用户代理改为sql,通过websql来解决localstorage的5MB存储上限的问题                type:'sql',                database:'myDB',                table:'bill',            },            //filters:[{property:"kind",value:"无"}],//过滤属性            listeners:{                removerecords:function(){                    console.log("数据被删除");                },                addrecords:function(){                    console.log("数据被追加");                },                updaterecord:function(){                    console.log("数据被修改");                },            }
  •  

可以看到,它采用的是一种监听setter和getter的办法,而在Angular中采用的则是脏检测。。当我们有了Proxy后,对于简单的数据模型绑定就可以简化这些特定的检测方式了。

我们还可以使用proxy来实现多继承。众所周知,javascript中每个对象只能有一个直接的上层原型,从而无法实现多继承:

var foo = {    foo: function () {        console.log("foo")    }};var bar = {    bar: function () {        console.log("bar")    }};var sonOfFoo = Object.create(foo);sonOfFoo.foo();     //"foo"var sonOfBar = Object.create(bar);sonOfBar.bar();     //"bar"//怎么才能既有foo方法又有bar方法?
  •  

我们可以通过proxy中的get处理器来生成一个继承两个原型的代理对象:

sonOfFooBar = new Proxy({}, {    get: function (target, name) {        return target[name] || foo[name] || bar[name];    }})sonOfFooBar.foo();   //"foo",有foo方法,继承自对象foosonOfFooBar.bar();   //"bar",也有bar方法,继承自对象bar

其还有很多应用场景,可以参考下面这篇文章:

但是百度EFE团队给出的评价是该功能不能通过模拟实现,所以建议不要使用。所以还是值得观望一段时间的。

 

 Object.defineProperty

     
test
这是一个测试

转载于:https://my.oschina.net/dawd/blog/1548660

你可能感兴趣的文章
经典算法
查看>>
11 用户交互,显示省市县三级联动的选择
查看>>
sql语句的优化分析
查看>>
运维面试题五十题
查看>>
雷神编码博客入口
查看>>
7.微软AJAX的解决方案
查看>>
线程中断、线程让步、线程睡眠、线程合并
查看>>
当通过Struts2传值给后台时,如果是外键,传字符串那么会出现错误
查看>>
主流浏览器
查看>>
String类replaceAll方法正则替换深入分析
查看>>
快速排序
查看>>
极限编程和JUnit
查看>>
iOS中 SDWebImage手动清除缓存的方法 技术分享
查看>>
[Array]448. Find All Numbers Disappeared in an Array
查看>>
因为我想在博客园长呆,所以给博客园提一些改进建议
查看>>
hdu 1087 Super Jumping! Jumping! Jumping! (DP)
查看>>
struts和struts2的区别
查看>>
JavaScript 自执行函数剖析
查看>>
软工作业--团队作业2
查看>>
Windows Phone 的后台代理不支持的 API
查看>>