JS基础——Proxy

luodongseu 发布于2019-08-23 18:31 / 1443人阅读

摘要：用于修改某些操作的默认行为基本操作有属性查找，赋值，枚举，函数调用等。报错拦截某个属性的赋值操作目标对象属性名属性值代理本身拦截的操作，返回一个布尔值。

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)。

参考资料：

Proxy MDN
ECMAScript 6入门

GPU云服务器云服务器 js基础 js的基础 js基础全套视频 js基础视频讲解

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

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

【重温基础】14.元编程

摘要：本文是重温基础系列文章的第十四篇。元，是指程序本身。有理解不到位，还请指点，具体详细的介绍，可以查看维基百科元编程。拦截，返回一个布尔值。本文是重温基础系列文章的第十四篇。这是第一个基础系列的最后一篇，后面会开始复习一些中级的知识了，欢迎持续关注呀！接下来会统一整理到我的【Cute-JavaScript】的JavaScript基础系列中。今日感受：独乐乐不如众乐乐...

cc17 2019-08-23 14:34 评论0 收藏0
写给前端小白看的linux部署基础知识

摘要：前端平时接触到的机会并不多，但是懂点对于前端来说还是有益无害的，起码还是要了解一下最基本的部署知识。特别注意的是，国内注册的域名要实名备案，否则无法域名解析。前端平时接触到linux的机会并不多，但是懂点linux对于前端来说还是有益无害的，起码还是要了解一下最基本的部署知识。博客地址购买服务器要部署项目，首先我们需要一台服务器。平时开发，项目是跑在我们本地电脑上的，现在我们想...

王岩威 2019-07-25 14:17 评论0 收藏0
Docker 私有注册中心身份认证

摘要：考虑到这一点，我们花费了一些时间审查了我们维护的多种系统，并在这星期，我给我们的私人注册中心设置了添加身份认证的目标。你也许知道，注册没有提供身份认证的方法。授权响应触发客户端回应一组使用基本身份验证的凭据。注：原文作者是 Alex Ianchici，原文地址是 Docker private registry authentication 安全已经融入了我们的生活。我们锁门...

klinson 2019-07-25 13:25 评论0 收藏0
Docker 私有注册中心身份认证

摘要：考虑到这一点，我们花费了一些时间审查了我们维护的多种系统，并在这星期，我给我们的私人注册中心设置了添加身份认证的目标。你也许知道，注册没有提供身份认证的方法。授权响应触发客户端回应一组使用基本身份验证的凭据。注：原文作者是 Alex Ianchici，原文地址是 Docker private registry authentication 安全已经融入了我们的生活。我们锁门...

Cc_2011 2019-06-28 14:49 评论0 收藏0