Js中Proxy

更新日期: 2019-07-06阅读: 3.4k标签: proxy

Proxy 用于修改某些操作的默认行为(基本操作有属性查找,赋值,枚举,函数调用等)。

/*
* target 目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)
* handler 一个对象,其属性是操作对应的自定义代理函数
*/
let p = new Proxy(target, handler);


基本操作

1、get(target, propKey, receiver):拦截对象属性的读取

/*
* target 目标对象
* propKey 对象属性名
* proxy 实例本身(严格地说,是操作行为所针对的对象)
*/
get(target, propKey, receiver)

var obj = {name : 'Lucy'}
var p = new Proxy(obj,{
    get : function(target,key,receive){
        return key === 'name' ? 'Hello '+target[key] : target[key]
    }
})
p.name  //Hello Lucy

需要注意的是,如果一个属性不可配置(configurable)且不可写(writable),则 Proxy 不能修改该属性。

var obj = Object.defineProperties({}, {
  name: {
    value: 'Lucy',
    writable: false,
    configurable: false
  },
});
var p = new Proxy(obj, {
    get : function(target,key){
        return key === 'name' ? 'Hello '+target[key] : target[key]
    }
});
p.name //报错

2、set: function(obj, prop, value,receive) : 拦截某个属性的赋值操作

/*
* target 目标对象
* key 属性名
* value 属性值
* receive 代理本身
*/
set: function(target, key, value,receive)
var obj = {age : 18}
var p = new Proxy(obj,{
    set : function(target,key,value){
      if(key === 'age'){
        target[key] = Math.min(value,100);    
      }else{
        target[key] = value;    
      }
    }
})
p.age = 101;
p.age // 100
obj.age // 100

3、has(target, key):拦截key in proxy的操作,返回一个布尔值。

4、deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。

5、ownKeys(target):ownKeys方法用来拦截对象自身属性的读取操作,返回一个数组。具体来说,拦截以下操作:

  • Object.getOwnPropertyNames() //返回所有属性
  • Object.getOwnPropertySymbols()
  • Object.keys(proxy) //返回可枚举属性
  • for...in循环
var obj = Object.create(null)
Object.defineProperties(obj, {
  '_id': {
    value: 1,
    configurable : true,
    writable : true,
    enumerable : true
  },
  'name': {
    value : 'Lucy',
    configurable : true,
    writable : true,
    enumerable : true
  }
});
Object.getOwnPropertyNames(obj) // ['_id','name']
for(let key in obj){
    console.log(key) //依次输出_id,name
}

var p = new Proxy(obj,{ 
    ownKeys : function(target){
        return Object.getOwnPropertyNames(target).filter(x => x[0] != '_')
    }
})
Object.getOwnPropertyNames(p) // ['name']
for(let key in p){
    console.log(key) //输出name
}

6、getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。

7、defineProperty(target, propKey, propDesc):返回一个布尔值,拦截以下操作

  • Object.defineProperty(proxy, propKey, propDesc)
  • Object.defineProperties(proxy, propDescs)

8、preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。

9、getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。

10、isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。

11、setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。

12、apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如

  • proxy(...args)
  • proxy.call(object, ...args)
  • proxy.apply(...)

13、construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)。


链接: https://www.fly63.com/article/detial/4041

Javascript Proxy对象 简介

ES6 中引入Proxies,让你可以自定义Object的基本操作。例如,get就是Object的基础操作方法。

js_es6中对象代理proxy用法实例浅析

ES6中提出了一个新的特性,就是proxy,用来拦截在一个对象上的指定操作。这个功能非常的有用。每当代理对象被赋值,处理器函数就会调用,这样就可以用来调试某些问题。

拿Proxy可以做哪些有意思的事儿

Proxy是什么意思?Proxy是ES6中提供的新的API,可以用来定义对象各种基本操作的自定义行为,在我们需要对一些对象的行为进行控制时将变得非常有效。

ES6 系列之 defineProperty 与 proxy

我们或多或少都听过数据绑定这个词,数据绑定”的关键在于监听数据的变化,可是对于这样一个对象:var obj = {value: 1},我们该怎么知道 obj 发生了改变呢?ES5 提供了 Object.defineProperty 方法,该方法可以在一个对象上定义一个新属性

Proxy 的巧用

使用Proxy,你可以将一只猫伪装成一只老虎。下面大约有6个例子,我希望它们能让你相信,Proxy 提供了强大的 Javascript 元编程。尽管它不像其他ES6功能用的普遍,但Proxy有许多用途

使用 Proxy 更好的封装 Storage API

这篇文章提到 Proxy 这种语法可以用来封装 sessionStorage、 localStorage 甚至是 IndexedDB。可以使用 Proxy 代理来使 API 更容易使用。首先介绍一下 Proxy 的基本用法:

Proxy及其优势

通常,当谈到JavaScript语言时,我们讨论的是ES6标准提供的新特性,本文也不例外。 我们将讨论JavaScript代理以及它们的作用,但在我们深入研究之前,我们先来看一下Proxy的定义是什么。

ES6中代理和反射(proxy)

通过调用new proxy()你可以创建一个代理来替代另一个对象(被称为目标),这个代理对目标对象进行了虚拟,因此该代理与该目标对象表面上可以被当做同一个对象来对待。

ES6之Proxy

Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种『元编程』即对编程语言进行编程。Proxy 是在目标对象之前架设一层『拦截』,外部对对象的访问,都需要经过该层拦截。因此在拦截中对外界的访问进行过滤和改写。

ES6的标准内置对象Proxy

Proxy是ES6规范定义的标准内置对象,可以对目标对象的读取、函数调用等操作进行拦截。一般来说,通过Proxy可以让目标对象“可控”,比如是否能调用对象的某个方法,能否往对象添加属性等等。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!