ES6. proxy

最新推荐文章于 2022-03-10 08:43:38 发布

sharryling

最新推荐文章于 2022-03-10 08:43:38 发布

阅读量233

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_22703205/article/details/107315040

版权

js 专栏收录该内容

14 篇文章

订阅专栏

ES6的Proxy提供了强大的对象代理能力，能够拦截并控制对象的访问，包括但不限于读取、设置属性，以及实现私有变量。相较于defineProperty，Proxy可以重定义更多操作，如in、delete及函数调用等，极大地增强了对象行为的定制化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. proxy

参考文献：https://www.jianshu.com/p/c2a1aa2e2b14

1.1作用

proxy在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作，必须通过这层拦截

var target = {
   name: 'poetries'
 };
 var logHandler = {
   get: function(target, key) {
     console.log(`${key} 被读取`);
     return target[key];
   },
   set: function(target, key, value) {
     console.log(`${key} 被设置为 ${value}`);
     target[key] = value;
   }
 }
 var targetWithLog = new Proxy(target, logHandler);
 
 targetWithLog.name; // 控制台输出：name 被读取
 targetWithLog.name = 'others'; // 控制台输出：name 被设置为 others
 
 console.log(target.name); // 控制台输出: others

对于代理模式 Proxy 的作用主要体现在三个方面：

拦截和监视外部对对象的访问
降低函数或类的复杂度
在复杂操作前对操作进行校验或对所需资源进行管理

1.2 Proxy场景

实现私有变量

var target = {
   name: 'poetries',
   _age: 22
}

var logHandler = {
  get: function(target,key){
    if(key.startsWith('_')){
      console.log('私有变量age不能被访问')
      return false
    }
    return target[key];
  },
  set: function(target, key, value) {
     if(key.startsWith('_')){
      console.log('私有变量age不能被修改')
      return false
    }
     target[key] = value;
   }
} 
var targetWithLog = new Proxy(target, logHandler);
 
// 私有变量age不能被访问
targetWithLog.name; 
 
// 私有变量age不能被修改
targetWithLog.name = 'others';

1.3 proxy VS difineProporty

参考：https://blog.youkuaiyun.com/sinat_17775997/article/details/83989098

var value = 1;

Object.defineProperty({}, "num", {
	get : function(){
		return value;
    },
	set : function(newValue){
     	 value = newValue;
    },
	enumerable : true,
	configurable : true
});

使用 defineProperty 只能重定义属性的读取（get）和设置（set）行为，到了 ES6，提供了 Proxy，可以重定义更多的行为，比如 in、delete、函数调用等更多行为。
除了 get 和 set 之外，proxy 可以拦截多达 13 种操作，比如 has(target, propKey)，可以拦截 propKey in proxy 的操作，返回一个布尔值。

又比如说 apply 方法拦截函数的调用、call 和 apply 操作。

apply 方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组，不过这里我们简单演示一下：

var target = function () { return 'I am the target'; };
var handler = {
  apply: function () {
    return 'I am the proxy';
  }
};
 
var p = new Proxy(target, handler);
 
p();
// "I am the proxy"