Object.defineProperty和Proxy

greatwhole 发布于2019-08-23 12:12 / 2367人阅读

摘要：问题无法监控到数组下标的变化。的指向虽然可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在代理的情况下，目标对象内部的关键字会指向代理。

Object.defineProperty问题

Object.defineProperty() 无法监控到数组下标的变化。vue只能通过以下几种方法来监听

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

以上几种方法也是经过vue内部处理后才能监听的。

只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历，如果属性值也是对象那么需要深度遍历,显然能劫持一个完整的对象是更好的选择。

Proxy

代理:对外暴露代理对象,操作的时候，表面上操作的是代理对象(proxy)，实际上改变的是目标对象 (target)，从而可以在操作代理对象的时候进行一些处理(handler)后，再传递到目标对象。

特点：

可以劫持整个对象，并返回一个新对象

有13种劫持操作

Proxy是es6提供的，兼容性不好,无法用polyfill磨平

Proxy使用：

es6提供proxy构造函数，第一个参数target:是所要代理的目标对象，可以是空对象。第二个handler是拦截器，一个拦截器可以有多个拦截操作

var proxy = new Proxy(target, handler);

所有的对target的操作都落在proxy上了。

拦截操作一共有13个

get

get(target, propKey, receiver)：拦截对象属性的读取 可以继承

set

set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy["foo"] = v，返回一个布尔值。

更多拦截器信息>>

Reflect

反射：通过类的类类型来操作类的属性。包含来对象语言内部的方法，一共有13种，和proxy一一对应，如果在Proxy中调用Reflect的话，其实对应的就是默认行为。

Proxy的this指向

虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98091.html

ES6 系列之 defineProperty 与 proxy

摘要：存取描述符同时具有以下可选键值一个给属性提供的方法，如果没有则为。该方法返回值被用作属性值。值得注意的是属性描述符必须是数据描述符或者存取描述符两种形式之一，不能同时是两者。可以忽略方法的返回值。前言我们或多或少都听过数据绑定这个词，数据绑定的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？ define...

sean 2019-08-23 12:59 评论0 收藏0
深入理解ES6之《代理和反射》

摘要：使用陷阱验证属性用于接收属性代理的目标的对象要写入的属性键被写入的属性的值操作发生的对象通常是代理属性必须是数字抛错用陷阱验证对象结构属性不存在抛出错误使用陷阱隐藏已有属性可以用操作符来检测给定对象中是否包含有某个属性，如果自有属性或原型属使用set陷阱验证属性 let target = { name: target } let proxy = new Proxy(targe...

Stardustsky 2019-08-21 16:24 评论0 收藏0
深入理解ES6之《代理和反射》

摘要：使用陷阱验证属性用于接收属性代理的目标的对象要写入的属性键被写入的属性的值操作发生的对象通常是代理属性必须是数字抛错用陷阱验证对象结构属性不存在抛出错误使用陷阱隐藏已有属性可以用操作符来检测给定对象中是否包含有某个属性，如果自有属性或原型属使用set陷阱验证属性 let target = { name: target } let proxy = new Proxy(targe...

curried 2019-08-29 13:25 评论0 收藏0
ES6之Reflect

摘要：查找并返回对象的属性例例属性部署了读取函数返回的是的参数对象注意如果的第一个参数不是对象，则会报错。它返回一个布尔值，表示是否操作成功用于返回对象的所有属性使用和实现观察者模式请参考观察者模式 1、什么是Reflect？为操作对象而提供的新API 2、为什么要设计Reflect？（1）将Object对象的属于语言内部的方法放到Reflect对象上，即从Reflect对象上拿Object...

BingqiChen 2019-08-23 16:17 评论0 收藏0
ECMAScript6(12)：Proxy 和 Reflect

摘要：返回一个布尔值拦截操作符，返回一个布尔值拦截操作符，返回一个布尔值拦截遍历器，返回一个遍历器拦截，返回一个布尔值拦截，返回一个数组。 Proxy 对象 Proxy 用来修改某些默认操作，等同于在语言层面做出修改。所以属于一种元编程(meta programming), 即对编程语言进行编程。字面理解为Proxy代理了某些默认的操作。其使用格式如下： var proxy = new Pr...

habren 2019-08-23 11:46 评论0 收藏0