ES6中的Proxy<代理>和Reflect<反射>

先看个题目

让下列表达式成立

a === 1 && a === 2 && a === 3

我大致的思路是定义变量a = 0 每次取a得值时,先 a++,再返回。
ok要在完成取值之前拦截一步,并且输出我们想要的值,就需要用的es5中的数据劫持了。
于是我咔咔写出了下面的代码:

window['a'] = 0;
    Object.defineProperty(window,'a',{
        get() {
            window['a']++
            return window['a']
        }
    })

然后就咔咔的报错了,报错原因是堆栈溢出。

我思考了一下,原来如此,当我取a的值时,get劫持了我的操作,此时我使a++,相当于又取了a的值,又重复劫持了一次,所以死循环了。

所以我想我换一个不被劫持的值不得了,于是我咔咔写下了下面的代码:

let count = 0;
Object.defineProperty(window,'a',{
    get() {
        count++;
        return count;
    }
})

结果果然没错。

上面两端代码中,都用到了Object.defineProperty。

官方解释:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

它可以定义一个新属性,比如我上面的a,本来是不存在,却被程序定义出来了。
或者修改一个现有的属性,比如第一段程序中的window['a'],本来就有。

OK,据说Vue2.x中的数据双向绑定就用到了这个玩意。

如果想深入了解数据双向绑定的实现,请看文章:http://www.cnblogs.com/libin-1/p/6893712.html

接着说Proxy

Proxy表面上和defineProperty差不多,后者能实现的,前者也能实现,比如监听对象内一个属性的变化

let obj = new Proxy({a:1},{
    get(target, p, receiver) {
        console.log('取值')
    },
    set(target, p, value, receiver) {
        console.log('改值')
    }
})

相比defineProperty,Proxy具有下面几个优势

  1. 监听对象内所有属性时,不需要遍历,而defineProperty则需要遍历。
  2. 支持数组
  3. 不需要对 keys 进行遍历。这解决Object.defineProperty() 的第二个问题.Proxy 是针对整个 obj 的。所以 obj 内部包含的所有的 key ,都可以走进 set。(省了一个 Object.keys() 的遍历)

关于Proxy支持的拦截方法可参考官方文档:
http://es6.ruanyifeng.com/#docs/proxy#Proxy-%E5%AE%9E%E4%BE%8B%E7%9A%84%E6%96%B9%E6%B3%95

Reflect对象

还是刚才的代码

let obj = new Proxy({a:1},{
    get(target, p, receiver) {
        console.log('取值')
    }
})
let a = obj.a

我咔咔的就输出了a,结果却是undefined,为啥,因为get方法里只是拦截和监听,但是方法却没有返回。

我按照官方教程输出了返回值,代码如下:

let obj = new Proxy({a:1},{
    get(target, p, receiver) {
        return Reflect.get(target,p,receiver)
    }
})
let a = obj.a

取到了obj.a的值。
所以啥是Reflect?
官方解释:为操作对象而提供的新API
http://es6.ruanyifeng.com/#docs/reflect

Reflect的优势
1.将Object对象的属于语言内部的方法放到Reflect对象上,即从Reflect对象上拿Object对象内部方法。

let obj = {a:1};

// old
Object.defineProperty();

// new
Reflect.deleteProperty()
  1. 将用 老Object方法 报错的情况,改为返回false
// old
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}
// new
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}
  1. 让Object操作变成函数行为
// old
'name' in Object
// new
Reflect.has(Object,'name')
  1. 在Proxy上有的方法,在Reflect就一定有。在Proxy修改了默认行为后,可通过Reflect保证默认行为正常运行。
let obj = new Proxy({a:1},{
    get(target, p, receiver) {
        // 改变默认行文
        console.log('取值')
        
        // 使默认行为正常执行 
        return Reflect.get(target,p,receiver)
    }
})

let a = obj.a 
console.log(a) // 1

Reflect对象拥有的方法:
请参考官方文档:http://es6.ruanyifeng.com/#docs/reflect

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容