Proxy和Reflect

原因

最近在写 unar.js(一个技术超越react angular vue)的mvvm库。通过研究proxy的可行性。故作以下研究

Proxy代理一个函数

var fn=function(){
    console.log("fn")
}
var proxyFn=new Proxy(fn,{
    apply:function(target,scope,args){
        target()
    }
})
proxyFn()//fn
proxyFn.call(window)//fn
proxyFn.apply(window)//fn

//通过proxy的平常调用,call,apply调用都走代理的apply方法
//这个方法参数可以穿目标代理函数,目标代理函数的作用域,和参数

Proxy引入Reflect本质

var fn=function(...args){
    console.log(this,args)
}
var proxyFn=new Proxy(fn,{
    apply:function(target,scope,args){
        target.call(scope,...args)
    }
})
proxyFn(1)//Window,[1]
proxyFn.call(window,1)//Window,[1]
proxyFn.apply(window,[1])//Window,[1]

Reflect实用

//Relect.apply有对函数调用的时候的封装。
//Relect.apply(fn,scope,args)

var fn=function(...args){
    console.log(this,args)
}
var proxyFn=new Proxy(fn,{
    apply:function(target,scope,args){
        Reflect.apply(...arguments)
    }
})
proxyFn(1)//Window,[1]
proxyFn.call(window,1)//Window,[1]
proxyFn.apply(window,[1])//Window,[1]

Proxy、Reflect实用

一般我们会将代理的变量名proxyFn命名成代理对象的名字fn。

var fn=function(...args){
    console.log(this,args)
}
var fn=new Proxy(fn,{
    apply:function(target,scope,args){
        Reflect.apply(...arguments)
    }
})
fn(1)//Window,[1]
fn.call(window,1)//Window,[1]
fn.apply(window,[1])//Window,[1]

原文地址:https://www.cnblogs.com/leee/p/8251512.html

时间: 2024-11-05 22:32:04

Proxy和Reflect的相关文章

ES6(Proxy 和 Reflect)

Proxy 和 Reflect 1.Proxy 和 Reflect 的概念 Proxy 意为 ‘代理’,连接了用户和真实对象之间的一个层 Reflect 意为‘反射’   反射的是Object 2.适用场景 一.Proxy 语法 1.类似于供应商的原始对象 obj ,通过 Proxy 新生成对象,这个对象是映射 Object 的,用户访问 monitor, 通过 Proxy ,再传递给 obj 对象. 2.设置最简单的代理操作(拦截读取作用) 真实的为 2017-03-11,通过‘代理’的作用,

利用ES6中的Proxy和Reflect 实现简单的双向数据绑定

利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo. 好像vue3也把 obj.defineProperty()  换成了Proxy+Reflect. 话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>proxy</title> </hea

ES6--Set、Map、Symbol、Proxy及Reflect

九.Set和Map数据结构 Set ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值.之前的博文曾阐述过使用ES5实现JavaScript数据结构-集合. new Set([iterable]); var items = new Set([1,2,3,4,5,5,5,5]); console.log(items.size); // 5 console.log(items); // Set {1, 2, 3, 4, 5} console.log([...items

ES6初识-Proxy和Reflect

{ let obj={ time:'2017-03-11', name:'net', _r:123 }; let monitor=new Proxy(obj,{ // 拦截对象属性的读取 get(target,key){ return target[key].replace('2017','2018') }, // 拦截对象设置属性 set(target,key,value){ if(key==='name'){ return target[key]=value; }else{ return t

es6之Proxy,Reflect

Proxy 可以理解成,在目标对象之前架设一层"拦截",外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写. var proxy = new Proxy(target, handler); new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为. 如果handler没有设置任何拦截,那就等同于直接通向原对象. var target = {}; var handl

es6——Proxy和Reflect

Proxy代理,Reflect反射 Proxy对属性的读取 { //供应商,原始对象 let obj={ time:'2017-1-1', name:'net', _r:123 } //代理商,新生成一个Proxy对象,将要代理的对象放进去,后面是实现代理的方法 let monitor=new Proxy(obj,{ //拦截对象属性的读取 get(target,key){ return target[key].replace('2017','2016')//将读取到的2017全部替换成2018

ES6(十一)Proxy和Reflect

Proxy let obj = { time: '2019-01-01', name: 'ronle' } let monitor = new Proxy(obj, { // 拦截对象属性的读取 get (target, key) { return target[key].replace('2019', '2020') }, // 拦截对象设置属性 set (target, key, value) { // 只有key等于name才修改 if (key === 'name') { return

162、Proxy 和 Reflect

来源 http://caibaojian.com/es6/proxy.html Proxy 同一个拦截器对象,可以设置拦截多个操作. 1.Proxy var obj = new Proxy({}, { get: function (target, key, receiver) { /* target:目标对象 property:属性名 receiver:操作行为所针对的对象,一般指proxy实例本身 */ if (key === 'prototype') { return Object.prot

Proxy/Reflect

Proxy:像拦截器,对目标对象修改等进行拦截,是一种元编程(meta programming),即修改JS语言本身. //生成proxy实例,两个参数都是对象,targetObj是要拦截的目标对象,handlerObj参数用来定制拦截行为 var proxy = new Proxy(targetObj, handlerObj) Reflect:将Object对象一些明显的语言内部的方法,放到Reflect对象上. 修改某些Object的方法使返回更合理 1.规范语言 2.是Proxy对象的修改