精华内容
下载资源
问答
  • Proxy

    2019-03-08 11:14:18
    Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。 Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都...

    一.概述

    Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。

    Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

    ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。

    var proxy = new Proxy(target, handler);

    Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。其中,

    • new Proxy()表示生成一个Proxy实例
    • target参数表示所要拦截的目标对象
    • handler参数也是一个对象,用来定制拦截行为。 

    下面是另一个拦截读取属性行为的例子。

    var proxy = new Proxy({}, {
      get: function(target, property) {
        return 35;
      }
    });
    
    proxy.time // 35
    proxy.name // 35
    proxy.title // 35
    

    上面代码中,作为构造函数,Proxy接受两个参数。第一个参数是所要代理的目标对象(上例是一个空对象),即如果没有Proxy的介入,操作原来要访问的就是这个对象;第二个参数是一个配置对象,对于每一个被代理的操作,需要提供一个对应的处理函数,该函数将拦截对应的操作。比如,上面代码中,配置对象有一个get方法,用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到,由于拦截函数总是返回35,所以访问任何属性都得到35

    注意,要使得Proxy起作用,必须针对Proxy实例(上例是proxy对象)进行操作,而不是针对目标对象(上例是空对象)进行操作。

    如果handler没有设置任何拦截,那就等同于直接通向原对象。

    var target = {};
    var handler = {};
    var proxy = new Proxy(target, handler);
    proxy.a = 'b';
    target.a // "b"

    Proxy 实例也可以作为其他对象的原型对象。

    var proxy = new Proxy({}, {
      get: function(target, property) {
        return 35;
      }
    });
    
    let obj = Object.create(proxy);
    obj.time // 35
    

    上面代码中,proxy对象是obj对象的原型,obj对象本身并没有time属性,所以根据原型链,会在proxy对象上读取该属性,导致被拦截。

    同一个拦截器函数,可以设置拦截多个操作。

    var handler = {
      get: function(target, name) {
        if (name === 'prototype') {
          return Object.prototype;
        }
        return 'Hello, ' + name;
      },
    
      apply: function(target, thisBinding, args) {
        return args[0];
      },
    
      construct: function(target, args) {
        return {value: args[1]};
      }
    };
    
    var fproxy = new Proxy(function(x, y) {
      return x + y;
    }, handler);
    
    fproxy(1, 2) // 1
    new fproxy(1, 2) // {value: 2}
    fproxy.prototype === Object.prototype // true
    fproxy.foo === "Hello, foo" // true
    

    对于可以设置、但没有设置拦截的操作,则直接落在目标对象上,按照原先的方式产生结果。

    下面是 Proxy 支持的拦截操作一览,一共 13 种。

    • get(target, propKey, receiver):拦截对象属性的读取,比如proxy.fooproxy['foo']
    • set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = vproxy['foo'] = v,返回一个布尔值。
    • has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。
    • deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。
    • ownKeys(target):拦截Object.getOwnPropertyNames(proxy)Object.getOwnPropertySymbols(proxy)Object.keys(proxy)for...in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
    • getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
    • defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)Object.defineProperties(proxy, propDescs),返回一个布尔值。
    • preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。
    • getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。
    • isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。
    • setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
    • apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)proxy.call(object, ...args)proxy.apply(...)
    • construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)
    展开全文
  • ES6个人笔记记录——Proxy5

    万次阅读 2020-05-08 14:29:15
    虽然Proxy可以代理针对目标对象的访问,但他不是目标对象的透明代理,即不做任何拦截的情况下也无法保证与目标对象的行为一致。主要原因就是在Proxy代理的情况下,目标对象内部的this关键字会指向Proxy代理 const ...

    this问题

    虽然Proxy可以代理针对目标对象的访问,但他不是目标对象的透明代理,即不做任何拦截的情况下也无法保证与目标对象的行为一致。主要原因就是在Proxy代理的情况下,目标对象内部的this关键字会指向Proxy代理

    const target = {
    	m : function(){
    		console.log(this === proxy);
    	}
    };
    
    const handler = {};
    
    const proxy = new Proxy(target,handler);
    
    target.m();
    proxy.m();
    

    由于this指向的变化导致Proxy无法代理目标对象

    console.log('----------------------eg2------------------------');
    const _name = new WeakMap();
    
    class person{
    	constructor(name){
    		_name.set(this,name);
    	}
    	get name(){
    		return _name.get(this);
    	}
    }
    
    const jane = new person('jane');
    console.log(jane.name);
    const proxy1 = new Proxy({},jane);
    console.log(proxy.name);
    

    目标对象jane的name属性实际保存在外部Weakmap对象_name上面,通过this键区分。

    由于通过proxy.name访问时,this指向proxy,导致无法取值,所以返回undefined

    某些原生对象的内部属性只有通过正确this才能获取,所以Proxy也无法代理原生对象属性

    Error
    const target = new Date();
    const handler = {};
    const proxy = new Proxy(target,handler);
    proxy.getDate(); 
    
    const target2 = new Date();
    const handler1 = {
    	get(target,prop){
    		if(prop === 'getDate'){
    			return target.getDate.bind(target);
    		}
    		return Reflect.get(target,prop);
    	}
    };
    
    const proxy2 = new Proxy(target2,handler1);
    console.log(proxy2.getDate());
    

    适合做Web服务的客户端,也可以来实现数据库的ORM层

    展开全文
  • ES6个人笔记记录——Proxy2

    万次阅读 2020-05-08 14:14:43
    Proxy实例的方法 1.get let person = { name: "wjy" }; let proxy1 = new Proxy(person, { get: function(target, property) { if (property in target) { return target[property]; } else { // throw...

    Proxy实例的方法

    1.get

    let person = {
    	name: "wjy"
    };
    
    let proxy1 = new Proxy(person, {
    	get: function(target, property) {
    		if (property in target) {
    			return target[property];
    		} else {
    			// throw new ReferenceError("Property " + property +" does not exist.");
    			console.log("Property " + property + " does not exist.");
    		}
    	}
    })
    
    console.log(proxy1.name, proxy1.age);
    

    get方法可以被继承

    let proto = new Proxy({}, {
    	get(target, propertyKey, receiver) {
    		console.log("GET", propertyKey);
    		return target[propertyKey]
    	}
    });
    
    const {
    	create
    } = Object;
    const {
    	get
    } = Reflect;
    let obj1 = create(proto);
    obj1.xxx;
    

    使用get拦截实现数组读取负数索引

    function createArray(...elements) {
    	let handler = {
    		get(target, propKey, receiver) {
    			let index = Number(propKey);
    			if (index < 0) {
    				propKey = String(target.length + index);
    			}
    			return get(target, propKey, receiver);
    		}
    	};
    
    	let target = [];
    	target.push(...elements);
    	return new Proxy(target, handler);
    };
    
    let arr1 = createArray('a', 'b', 'c');
    let arr2 = ['a', 'b', 'c'];
    console.log(arr1[-1], arr2[-1]);
    

    利用Proxy,可以将读取属性的操作(get)转变为执行某个函数,从而实现属性的链式操作

    let pipe = (function() {
    	return function(value) {
    		let funcStack = [];
    		let oproxy = new Proxy({}, {
    			get: function(pipeObject, fnName) {
    				try {
    					funcStack.push(window[fnName]);
    					return oproxy;
    
    				} catch {
    					if (fnName === 'get') {
    						return funcStack.reduce(function(val, fn) {
    							return fn(val);
    						}, value);
    					}
    				}
    			}
    		});
    
    		return oproxy;
    	}
    }());
    
    let double = n => n * 2;
    let pow = n => n * n;
    let reverseInt = n => n.toString().split("").reverse().join("") | 0;
    // pipe(3).double.pow.reverseInt.get;
    

    set()方法用来拦截某个属性的赋值操作

    const {	isInteger } = Number;
    let validator = {
    	set: function(obj, prop, value) {
    		if (prop === 'age') {
    			if (isInteger(value)) {
    				throw new Error("The age is not a integer");
    			}
    			if (value > 200) {
    				throw new Error("The age invalid");
    			}
    			// 对于age以外的属性,直接保存
    			obj[prop] = value;
    		}
    	}
    };
    
    let person1 = new Proxy({}, validator);
    console.log(person1.age = 100);
    // console.log(person1.age = 'young')
    
    展开全文
  • ES6个人笔记记录——Proxy1

    万次阅读 2020-05-08 14:10:48
    Proxy用于修改某些操作的默认行为,等同于在语言层面作做出修改, 所以属于一种元编程,即对编程语言进行编程 Proxy可以理解成在目标对象前架设一个"拦截"层, 外界对该对象的访问都必须先通过这层拦截, 因此提供了...

    Proxy用于修改某些操作的默认行为,等同于在语言层面作做出修改,
    所以属于一种元编程,即对编程语言进行编程

    Proxy可以理解成在目标对象前架设一个"拦截"层,
    外界对该对象的访问都必须先通过这层拦截,
    因此提供了一种机制可以对外界的访问进行过滤和改写。
    
    Proxy这个词原意是代理,在这里表示"代理"某些操作,可以译为"代理器"
    
    const { get , set } = Reflect;
    
    let obj = new Proxy({},{
    	get : function(target,key,receiver){
    		console.log(`getting ${key}!`);
    		return get(target,key,receiver);
    	},
    	set : function(target,key,value,receiver){
    		console.log(`setting ${key}!`);
    		return set(target,key,value,receiver);
    	}
    });
    
    
    obj.count = 1;
    ++obj.count;
    

    Proxy实际上重载了点运算符,即用自己的定义覆盖了语言的原始定义

    ES6原生提供Proxy构造函数,用于生成Proxy实例

    let proxy = new Proxy(target,handler);
    

    target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为

    一个例子:

    let proxy2 = new Proxy({},{
    	get : function(target,property){
    		return 35;
    	}
    })
    
    console.log(proxy2.time);
    console.log(proxy2.name);
    

    将Proxy对象设置到object.proxy属性,从而可以在object对象上调用

    let [target , handler] = [{},{}];
    let object = { proxy: new Proxy(target,handler) };
    let { create , prototype } = Object;
    

    Proxy也可以作为其他对象的原型对象

    let proxy3 = new Proxy({},{
    	get : function(target,handler){
    		return 45;
    	}
    })
    
    let obj2 =create(proxy3);
    console.log(obj2.time);
    

    这段代码中,proxy3对象是obj对象的原型

    obj对象本身没有time属性,所以根据原型链会在proxy3对象上读取该属性,导致被拦截

    同一个拦截器函数可以设置拦截多个操作:

    let handler2 = {
    	get : function(target,name){
    		if(name === 'prototype'){
    			return prototype;
    		}
    		return 'hello, ' + name;
    	},
    
    	apply : function(target,thisBinding,args){
    		return args[0];
    	},
    
    	construct : function(target,args){
    		return {
    			value : args[1]
    		};
    	}
    };
    
    let fproxy = new Proxy(function(x,y) {
    	return x + y;
    },handler2);
    
    console.log(fproxy(1,2));
    // console.log(new fproxy(1,2));
    console.log(fproxy.foo);
    // console.log(fproxy.prototype === prototype);
    

    Proxy支持的拦截操作

    1.get(target,propKey,receiver)	拦截对象属性的获取
    2.set(target,propKey,value,receiver)	拦截对象属性的设置
    3.has(target,propKey)	拦截propKey in proxy操作
    4.deleteProxy(target,propKey)	拦截delete proxy[propKey]操作
    5.ownKey(target)	PS:Object.key()返回结果仅包括对象自身可遍历属性
    6.getOwnPropertyDescriptor(target,propKey)
    7.defineProperty(target,propKey,propDesc)
    8.preventExtensions(target)
    9.getPrototypeOf(target)
    10.isExtensible(target)
    11.setPrototype(target,proto)
    12.apply(target,object,args)	拦截proxy实例,并将其作为函数调用的操作
    13.construct(target,args)	拦截Proxy实例作为构造函数调用的操作
    
    展开全文
  • ES6个人笔记记录——Proxy4

    万次阅读 2020-05-08 14:26:37
    construct construct用于拦截new命令 两个参数,target:目标对象,args:构造函数的参数对象 let handler = { construct(target,args,newTargets){ ...let p = new Proxy(function(){},{ const...
  • Proxy error:couldnot proxy request

    万次阅读 2019-10-18 08:50:21
    proxy error问题是因为端口号被占。前端出现了500问题,说明后端服务器有问题,并不是前端vue.config中的proxy出现了问题。那么就去检查后端的端口号是否和前端一致。 后端: 这里调用的是测试环境。但前端启动的...
  • Design Pattern - Proxy(C#)

    万次阅读 多人点赞 2019-02-11 11:48:37
    code demonstrates the Proxy pattern which provides a representative object (proxy) that controls access to another similar object. /* * Structural Proxy Design Pattern. */ namespace Proxy....
  • mtproxy

    千次阅读 2020-04-12 21:45:32
    mkdir /home/mtproxy && cd /home/mtproxy curl -s -o mtproxy.sh https://raw.githubusercontent.com/ellermister/mtproxy/master/mtproxy.sh && chmod +x mtproxy.sh && bash mtproxy.....
  • proxy error: could not proxy request... 代理出了问题,但是我之前已经修改过了,因为没发到测试环境,所以把地址改到本地。 具体做法: 找到vue.config.js文件 devServer: { proxy: { '/api': { // target: '...
  • nginx 之 proxy_pass详解

    万次阅读 多人点赞 2019-08-21 11:05:41
    在nginx中配置proxy_pass代理转发时,如果在proxy_pass后面的url加/,表示绝对根路径;如果没有/,表示相对路径,把匹配的路径部分也给代理走。 假设下面四种情况分别用 http://192.168.1.1/proxy/test.html 进行...
  • Proxy error: Could not proxy request

    千次阅读 2020-10-16 17:45:34
    Proxy error: Could not proxy request /user/login from localhost:8089 to http://***。**。**:8081/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ENOTFOUND). ...
  • Proxy settings

    千次阅读 2019-05-08 14:42:35
    git config --global http.proxy 'socks5://127.0.0.1:1080' git config --global https.proxy 'socks5://127.0.0.1:1080 unset: git config --global --unset http.proxy git config --global -...
  • ARP Proxy

    千次阅读 2018-03-16 17:07:07
    ARP Proxy原理:当主机没有配置网关,发一个请求目的MAC地址,ARP Proxy会使用自己的MAC地址作为该ARP请求的的回应。分类路由式ARP Proxy:实现同一网段(请求的是目的MAC地址)不同物理位置(中间有三层设备)的...
  • Http-proxy-middleware安装报错:proxy is not a function

    万次阅读 多人点赞 2020-02-24 16:31:05
    Create-react-app建的项目,需要访问多个跨域接口,按照CRA的官方文档安装了http-proxy-middleware后,进行了下面的配置: const proxy = require('http-proxy-middleware'); module.exports = ... proxy({ ...
  • 问题描述:因为node服务运行在localhost:3000端口,vue运行在localhost:8080端口,不同端口存在跨域问题。...proxy:{ '/api2':{ target:'http://localhost:3000', changeOrigin:true, } } 我...
  • proxyTable讲解

    千次阅读 2020-04-13 21:34:45
    proxyTable讲解
  • ES6之Proxy代理

    万次阅读 2019-12-20 23:17:43
    什么是Proxy代理 ES6 让开发者能进一步接近 JS 引擎的能力,这些能力原先只存在于内置对象上。语言通过代 理( proxy )暴露了在对象上的内部工作,代理是一种封装,能够拦截并改变 JS 引擎的底 层操作。 人话是:把...
  • We've talked about reverse proxy servers and how they can really be good at protecting the servers in your internal network. Lately, however, we've realized that some people actually think w
  • GOPROXY配置

    千次阅读 2020-03-13 19:25:47
    阿里云 export GOPROXY=https://mirrors.aliyun.com/goproxy/ nexus社区提供的 ... goproxy.io 的 export GOPROXY=https://goproxy.io/ 基于athens的公共服务 export GOPROXY=https://athe...
  • ice proxy

    千次阅读 2015-07-14 16:10:46
    Proxy Proxy是ICE客户端里的概念。客户端通过Proxy访问服务器端上的Object,通过Proxy调用服务器端Object上提供的接口。在客户端上一般有类似以下代码: Ice::ObjectPrx base = ic->stringToProxy(...
  • 10258:20190701:092427.050 cannot parse proxy data from active proxy at "172.20.32.29": proxy "Zabbix-proxy" not found 10250:20190701:100422.653 cannot send list of active checks to "172.20.32.15": ho...
  • CC-Proxy配置网络代理服务器

    万次阅读 2020-07-13 19:27:44
    CC-Proxy配置网络代理服务器 本文是基于Windows 10系统环境,通过CC-Proxy配置网络代理服务器,Cent OS 7.3希望通过网络参数配置,可以实现通过网络代理服务器连接互联网: Windows 10 CentOS 7.3 一、配置CC-...
  • welcome to my blog 希望对大家有帮助 给win10的ubuntu1804安装anaconda, 执行conda create -n daily python=3.7创建虚拟环境时报错 Collecting package metadata ...ProxyError: Conda cannot proceed due t...
  • create-react-app设置proxy反向代理不起作用 用http-proxy-middleware插件设置proxy反向代理 1. npm install http-proxy-middleware 2. src文件夹根目录下创建 setupProxy.js 文件 在setupProxy.js写入下列代码 ...
  • java动态代理Proxy.newProxyInstance

    万次阅读 多人点赞 2018-07-30 22:28:53
    动态代理(dynamic proxy) 利用Java的反射技术(Java Reflection),在运行时创建一个实现某些给定接口的新类(也称“动态代理类”)及其实例(对象),代理的是接口(Interfaces),不是类(Class),也不是抽象类。在...
  • switch proxy ——>Proxy SwitchyOmega

    千次阅读 2017-04-15 14:25:47
    switch proxy 还是非常好用的,作者发布了新一版,叫做Proxy SwitchyOmega,添加了自动切换等功能,变得强大了 正好chrome 安全变严格了,用着正好 [地址]:https://github.com/FelisCatus/SwitchyOmega/releases
  • proxy行为

    千次阅读 2015-11-29 22:24:25
    一个请求可能通过多个proxy到达UAS。每一个都会做出路由决定,在发送给下一个节点前对请求做一点修改。应答会通过和请求相同的proxy路径,只是顺序是逆序的。 proxy是一个SIP逻辑上的概念。当接收到一个请求,在做...
  • 项目开发中,代理转发的场景比较多,简单介绍下用中间件http-proxy-middleware实现的proxy()代理。 1、http-proxy-middleware的安装: npm install --save-dev http-proxy-middleware 2、proxy()的常规用法: ...
  • Proxy CONNECT aborted

    千次阅读 2020-10-13 11:15:41
    export http_proxy=http://127.0.0.1:1087 export https_proxy=socks://127.0.0.1:1080 此处的IP和端口需要根据具体你代理的实际信息填写,可查看VPN客户端的config.json: "inbounds": [ { "listen": ...
  • mysql-proxy

    千次阅读 2018-12-05 11:05:52
    一、mysql-proxy简介 mysql-proxy是mysql官方提供的mysql中间件服务,上游可接入若干个mysql-client,后端可连接若干个mysql-server。 它使用mysql协议,任何使用mysql-client的上游无需修改任何代码,即可迁移至...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 153,664
精华内容 61,465
关键字:

proxy