Proxy使用详解

更新日期: 2020-09-10阅读量: 1076标签: Proxy

基本使用就不赘述,看文档即可


通用

1.Proxy可以包装任何形式的对象:包括原生数组,函数,甚至另一个代理
2.代理实例中没有指定的handler,实际就是操作原对象target:实例:打开控制台查看

let target = function(){return 'ddd'}
let proxy = new Proxy(target, {});
proxy.prototype.age = 12
console.log(proxy.prototype === target.prototype) // true

3.代理实例只是返回对象target的一个代理包装(只有在触发handler时,handler中可以操作target),target的更改不会触发代理实例的handler:实例:打开控制台查看

来看一下具体的运用
MDN上有一个实例比较特别【拓展构造函数】,来看一下:在线例子

function extend(sup, base) {
  var descriptor = Object.getOwnPropertyDescriptor(
    base.prototype, 'constructor'
  );
  base.prototype = Object.create(sup.prototype);
  var handler = {
    construct: function(target, args) {
      var obj = Object.create(base.prototype);
      this.apply(target, obj, args);
      return obj;
    },
    apply: function(target, that, args) {
      sup.apply(that, args);
      base.apply(that, args);
    }
  };
  var proxy = new Proxy(base, handler);
  descriptor.value = proxy;
  Object.defineProperty(base.prototype, 'constructor', descriptor);
  return proxy;
}

var Person = function(name) {
  this.name = name;
};

var Boy = extend(Person, function(name, age) {
  this.age = age;
});

Boy.prototype.gender = 'M';

var Peter = new Boy('Peter', 13);

console.log(Peter.gender);  // "M"
console.log(Peter.name);    // "Peter"
console.log(Peter.age);     // 13

执行完Boy.prototype.gender = 'M'后,数据结构是下面这个样子的

执行 var Peter = new Boy('Peter', 13);
new操作进入到handler.construct,里面的上下文环境this绑定在handler(可以查看MDN文档描述)。直接调用this.apply进入handler.apply执行。new操作执行完毕之后的数据结构

巧妙利用原型链和代理


handler形参中的receiver

receiver是代理或继承代理的对象。通俗来讲,就是触发了handler的源头对象。一般receiver即是target的代理实例。
但是如果对象继承了代理对象的情况,如下:

"use strict"
const proxy = new Proxy({}, {
    get: function(target, prop, receiver) {
        if(proxy === receiver){
            console.log('receiver为proxy')
        }
        else if(obj === receiver){
            console.log('receiver为obj')
        }else{
            console.log('receiver不为proxy也不为obj')
        }
        return 'chua';
    }
});
proxy.dd // receiver为proxy
let obj = Object.create(proxy);
obj.msg // receiver为obj

proxy对象是obj对象的原型,obj对象本身并没有msg属性,所以根据原型链,会在proxy对象上读取该属性,导致被拦截。
obj是obj.msg触发handler的原始调用(源头)


handler.set

set必须返回一个boolean类型

必须返回一个boolean类型,true表示设置成功,返回false表示失败,严格模式下会抛错(下面的例子全部在严格模式下执行)
注意:返回的数据如果不是boolean类型,会转换成布尔类型,假值包括:undefined,null,false, +0, -0, NaN, "" 实例

const target = {
  msg: "hello"
};

const handler = {
    set: function(target, prop, value, receiver){
        target[prop] = value
        // return true
    }
};

const proxy = new Proxy(target, handler);
proxy.msg = 'wow' // Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'msg'

handler.set在以下情况会抛错
1.如果相应的目标对象属性是不可写的数据属性,则无法将属性的值更改为与相应目标对象属性的值不同的值。实例:严格模式

var obj = {}
Object.defineProperty(obj, 'year', { 
    // configurable: false, 默认false
    // writable: false, 默认false
    value: 2
})
Object.defineProperty(obj, 'class', { 
    configurable: true, 
    // writable: false, 默认false
    value: 'chua'
})
var proxy = new Proxy(obj, {
    set(target, prop, val){
        target[prop] = val
        return true
    }
})
proxy.card = 'sdf' // 设置成功
proxy.year = 10 // Uncaught TypeError: Cannot assign to read only property 'year' of object 
proxy.class = 'dd' // Uncaught TypeError: Cannot assign to read only property 'class' of object

2.如果相应的目标对象属性配置了[[Set]]为undefined,实例

var obj = {}
const definereactive =  function(data, key, val) {
    Object.defineProperty(data, key, {
        get: function(){
            return val
        },
        set: undefined // 应该设置成下面这个正确的函数
        // function(newVal) {
        //     val = newVal;
        // }
    });
}
definereactive(obj, 'year', obj.year)
var proxy = new Proxy(obj, {
    set(target, prop, val){
        target[prop] = val
        return true
    }
})
obj.year = 20 // Uncaught TypeError: Cannot set property year of #<Object> which has only a getter
proxy.year = 30 // Uncaught TypeError: Cannot set property year of #<Object> which has only a getter

3.在严格模式下,handler.set错误返回值(转换为boolean后为false)将引发TypeError异常。


复杂对象

Proxy只对其根属性(原型链上的也算)的值的更改做监听,如果某个属性key对应的值为一个引用类型,引用地址没有发生改变则不会进入到handler.set

const target = {
    info: {
        name: 'chua',
        age: 18
    }
};

const handler = {
    set: function(target, prop, value, receiver){
        console.log('in handler.set', target, prop, value, receiver)
        target[prop] = value
        return true
    }
};

const proxy = new Proxy(target, handler);
proxy.info.name = 'chua1989' // 没有进入handler.set, 需要直接更改info属性才行
console.log(proxy.info.name) // chua1989


handler.has

报错的情况
1.target的某属性为不可配置,则该属性不能被代理隐藏(即handle.has不能返回false): 在线运行

var obj = {}
Object.defineProperty(obj, 'year', {
    configurable: false,
    value: 2
})
var proxy = new Proxy(obj, {
    has: function(target, prop) {
        console.log('called: ' + prop);
        return false;
    }
})
console.log('year' in proxy); // Uncaught TypeError: 'has' on proxy: trap returned falsish for property 'year' which exists in the proxy target as non-configurable

2.target对象不可拓展,则已经存在的属性不能被代理隐藏:在线运行

var obj = { year: 2}
Object.preventExtensions(obj);

var proxy = new Proxy(obj, {
    has: function(target, prop) {
        console.log('called: ' + prop);
        return false;
    }
})
console.log('a' in proxy); // 不存在的属性没有问题
console.log('year' in proxy); // Uncaught TypeError: 'has' on proxy: trap returned falsish for property 'year' but the proxy target is not extensible


handler.construct

只有当target能使用new方法该配置才能起作用。即target必须是函数

const p = new Proxy({}, {
    construct: function(target, argumentsList, newTarget) {
        return function(){};
    }
});

new p(); // proxy.html:16 Uncaught TypeError: p is not a constructor

而且handler.construct必须返回一个Object引用类型就行

const p = new Proxy(function() {}, {
  construct: function(target, argumentsList, newTarget) {
    return 1;
  }
});

new p(); // TypeError is thrown

下面这个就不会报错

const p = new Proxy(function() {}, {
    construct: function(target, argumentsList, newTarget) {
        return function(){};
    }
});

new p();

handler.construct中的this指向的是handler


handler.deleteProperty

deleteProperty 必须返回一个 Boolean 类型的值,表示了该属性是否被成功删除。严格模式下false会报错

var p = new Proxy({}, {
    deleteProperty: function(target, prop) {
        console.log('called: ' + prop);
        return false;
    }
});

delete p.a; // "called: a"

如果目标对象的属性是不可配置的,那么该属性不能被删除

var obj = {}
Object.defineProperty(obj, 'a', {
    configurable: false
})
var p = new Proxy(obj, {
    deleteProperty: function(target, prop) {
        console.log('called: ' + prop);
        return true;
    }
});

delete p.a; // "called: a" // Uncaught TypeError: 'deleteProperty' on proxy: trap returned truish for property 'a' which is non-configurable in the proxy target


handler.defineProperty

如果目标对象不可扩展(non-extensible),则defineProperty()不能增加目标对象上不存在的属性,否则会报错。
如果目标对象的某个属性不可写(writable)或不可配置(configurable),则defineProperty()方法不得改变这两个设置(这是Object.defineProperty的特性)。


handler.getPrototypeOf

如果遇到了下面两种情况,js 引擎会抛出 TypeError 异常:
getPrototypeOf() 方法返回的不是对象也不是 null。
目标对象是不可扩展的,且 getPrototypeOf() 方法返回的原型不是目标对象本身的原型。


handler.isExtensible

isExtensible方法必须返回一个 Boolean值或可转换成Boolean的值。
Object.isExtensible(proxy) 必须同Object.isExtensible(target)返回相同值。也就是必须返回true或者为true的值,返回false和为false的值都会报错。


handler.ownKeys

有三类属性会被ownKeys()方法自动过滤,不会返回。
1.目标对象上不存在的属性
2.属性名为 Symbol 值
3.不可遍历(enumerable)的属性

如果违反了下面的约束,proxy将抛出错误 TypeError:
1.ownKeys 的结果必须是一个数组.
2.数组的元素类型要么是一个 String ,要么是一个 Symbol.
3.结果列表必须包含目标对象的所有不可配置(non-configurable )、自有(own)属性的key.
4.如果目标对象不可扩展,那么结果列表必须包含目标对象的所有自有(own)属性的key,不能有其它值.


handler.preventExtensions

如果目标对象是可扩展的,那么只能返回 false。否则抛错


handler.setPrototypeOf

如果 target 不可扩展, 原型参数必须与Object.getPrototypeOf(target) 的值相同. 否则抛错
如果你不想为你的对象设置一个新的原型,你的handler's的setPrototypeOf方法可以返回false,也可以抛出异常。

var handlerReturnsFalse = {
    setPrototypeOf(target, newProto) {
        return false;
    }
};

var newProto = {}, target = {};

var p1 = new Proxy(target, handlerReturnsFalse);
Object.setPrototypeOf(p1, newProto); // throws a TypeError
Reflect.setPrototypeOf(p1, newProto); // returns false

为什么Object和Reflect调用setPrototypeOf结果会不同。这便是Reflect被例入标准的一个原因之一:操作对象时出现报错返回false。这样可以直接使用如下的方式

if(Reflect.setPrototypeOf(p1, newProto)){
 ...
}


handler的属性方法中的this

正常情况,handler的属性方法中this指向的是proxy实例,而不是target,要特别注意

const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);

proxy.getDate();
// TypeError: this is not a Date object.

由于getDate必须要是Date实例才能有作用,所以此处报错

handler.construct中的this指向的是handler

原文来自:https://www.cnblogs.com/chuaWeb/p/13676000.html


站长推荐

1.云服务推荐: 国内主流云服务商/虚拟空间,各类云产品的最新活动,优惠券领取。领取地址:阿里云腾讯云硅云

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

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 方法,该方法可以在一个对象上定义一个新属性

Js中Proxy

Proxy 用于修改某些操作的默认行为(基本操作有属性查找,赋值,枚举,函数调用等)。get(target, propKey, receiver):拦截对象属性的读取;set: function(obj, prop, value,receive) : 拦截某个属性的赋值操作

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 是在目标对象之前架设一层『拦截』,外部对对象的访问,都需要经过该层拦截。因此在拦截中对外界的访问进行过滤和改写。

点击更多...

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