深度揭秘ES6代理Proxy

ES6学习心得 专栏收录该内容
12 篇文章 0 订阅

最近在博客上看到关于ES6代理的文章都是一些关于如何使用Proxy的例子,很少有说明Proxy原理的文章,要知道只有真正掌握了一项技术的原理,才能够写出精妙绝伦的代码,所以我觉得有必要写一篇关于深刻揭露ES6 Proxy的文章。

看完这篇文章你不会学到一些大型的使用Proxy的例子,但是你可以了解以下几方面的内容:

  • 你将知道代理是个什么东西
  • 你将知道所有代理对象可覆盖的方法
  • 一些代理对象使用的小场景
什么是代理?刚开始入行的同学可能就会问了。我觉得回答这个问题之前我们应该先弄清楚另一个问题:什么是对象?有人会回答:对象是属性的集合。好吧,这种回答的确找不出什么bug,但是却太抽象了,ES委员会为对象定义了一个由14种方法组成的集合,它是适用于所有对象的通用接口, 你可以调用、删除或覆写普通方法,但是无法操作内部方法。 下面让我们来看一下这14个方法,[[]]代表内部方法,在一般代码中不可见。
  • [[GetPrototypeOf]] ( )
    获取对象的原型时调用,在执行obj[__proto__]或Object.getPrototypeOf(obj)时调用。
  • [[SetPrototypeOf]] (V)
    设置一个对象的原型时调用,在执行obj.prototype=otherObj或则Object.SetPrototypeOf(v)的时候调用
  • [[IsExtensible]] ( )
    获取对象的可扩展性时调用,执行Object.isExtensible(object)时被调用。
  • [[GetOwnProperty]] (P)
    获取自有属性时调用
  
  • [[PreventExtensions]]()

扩展一个不可扩展的对象时调用

  • [[DefineOwnProperty]] (P, Desc)
    定义自有属性时调用
  • [[HasProperty]](P)
    检测对象是否存在某个属性时调用,如key in obj
  • [[Get]] (P, Receiver)
    获取属性时调用,如obj.key,obj[key]。
  • [[Set]] ( P, V, Receiver)
    为对象的属性赋值时调用,如obj.key=value或obj[key]=value。
  • [[Delete]] (P)
    删除某个属性时调用
  • [[Enumerate]] ()
    列举对象的可枚举属性时调用,如for (var key in obj)。
  • [[OwnPropertyKeys]] ( )
    列举对象的自有属性时调用
  
  • functionObj.[[Call]](thisValue, arguments)
调用一个函数时被调用,functionObj()或者x.method()。
 
  • constructorObj.[[Construct]](arguments, newTarget)
使用new操作的时候调用,如new Date()。

在整个 ES6 标准中,只要有可能,任何语法或对象相关的内建函数都是基于这 14 种内部方法构建的 。但是我们不必记住这些对象的内建属性,我们更应关注是handler与之相对应的方法。

现在我们已经清楚了对象的14个内建方法,那么我们再回到第一个问题:什么是代理?我们可以这样说,代理Proxy是一个构造函数, 它可以接受两个参数:目标对象( target ) 与句柄对象( handler  ,返回一个代理对象Proxy,主要用于从外部控制对对象内部的访问。
var target = {}, handler = {};
var proxy = new Proxy(target, handler);
那么Proxy、target、handler这三者之间有什么关系呢?Proxy的行为很简单: 将Proxy的所有内部方法转发至target 。即调用Proxy的方法就会调用target上对应的方法。那么handler又是用来干嘛的? handler的方法可以覆写任意代理的内部方法。 外界每次通过Proxy访问 target 对象的属性时,就会经过 handler 对象,因此,我们可以通过重写handler对象中的一些方法来做一些拦截的操作。以下是一个简单的代理使用例子。
var person = {
	name: "Jhon",
	age: 23
};
var p = new Proxy(person,{
	get: function(target, prop, receiver){
		console.log("你访问了person的属性");
		return target["name"];
	}
});
console.log(p.age);
// 你访问了person的属性 
// Jhon
你看,我们虽然访问了age属性,它却输出了额外的字符串和属性name的值,这就是拦截器的作用。

对应对象内建的14个方法,handler也有14个方法可以覆盖,下面我们将会一一讲解。

1、 handler.get()  方法用于拦截对象的读取属性操作。
var p = new Proxy(target, {
  get: function(target, property, receiver) {
  }
});
  • target,目标对象
  • property,被获取的属性名
  • receiver,Proxy或者继承Proxy的对象
  • 可以返回任何值
  • this绑定到handler对象上
约束条件,proxy会抛出 TypeError
  • 如果要访问的目标属性是不可写以及不可配置的,则返回的值必须与该目标属性的值相同。
  • 如果要访问的目标属性没有配置访问方法,即get方法是undefined的,则返回值必须为undefined。
2、handler.set() 方法用于拦截设置属性值的操作
var p = new Proxy(target, {
  set: function(target, property, value, receiver) {
  }
});
  • target,目标对象
  • property,被设置的属性名
  • value,被设置的新值
  • receiver,最初被调用的对象。通常是proxy本身,但handler的set方法也有可能在原型链上或以其他方式被间接地调用(因此不一定是proxy本身)
  • this绑定到handler对象上
  • 返回一个布尔值,返回true代表此次设置属性成功了,如果返回false且设置属性操作发生在严格模式下,那么会抛出一个TypeError
约束,违背proxy会抛出一个TypeError:
  • 若目标属性是不可写及不可配置的,则不能改变它的值
  • 如果目标属性没有配置存储方法,即set方法是undefined的,则不能设置它的值
  • 在严格模式下,若set方法返回false,则会抛出一个 TypeError 异常
3、 handler.has() 方法可以看作是针对 in 操作的钩子
var p = new Proxy(target, {
  has: function(target, prop) {
  }
});
  • targe,t目标对象
  • prop,需要检查是否存在的属性
  • this绑定到handler对象上
  • 返回一个boolean值
约束:
  • 如果目标对象的某一属性本身不可被配置,则该属性不能够被代理隐藏
  • 如果目标对象为不可扩展对象,则该对象的属性不能够被代理隐藏
4、handler.getPrototypeOf() 是一个代理方法,当读取代理对象的原型时,该方法就会被调用
var p = new Proxy(obj, {
  getPrototypeOf(target) {
  ...
  }
});
  • target,被代理的目标对象
  • this 指向的是它所属的处理器对象
  • 必须返回一个对象值或者返回 null
约束:
  • getPrototypeOf() 方法返回的不是对象也不是 null
  • 目标对象是不可扩展的,且 getPrototypeOf() 方法返回的原型不是目标对象本身的原型
5、handler.defineProperty() 用于拦截对对象的 Object.defineProperty() 操作
var p = new Proxy(target, {
  defineProperty: function(target, property, descriptor) {
  }
});
  • target,目标对象
  • property,待检索其描述的属性名
  • descriptor,待定义或修改的属性的描述符
  • this 绑定在 handler 对象上
  • 返回一个boolean值
约束:
  • 如果目标对象不可扩展, 将不能添加属性、
  • 不能添加或者修改一个属性为不可配置的,如果它不作为一个目标对象的不可配置的属性存在的话
  • 如果目标对象存在一个对应的可配置属性,这个属性可能不会是不可配置的
  • 如果一个属性在目标对象中存在对应的属性,那么 Object.defineProperty(target, prop, descriptor) 将不会抛出异常
  • 在严格模式下, false 作为 handler.defineProperty 方法的返回值的话将会抛出 TypeError 异
6、handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作
var p = new Proxy(target, {
  deleteProperty: function(target, property) {
  }
});
  • target,目标对象
  • property,待删除的属性名
  • this 被绑定在 handler上
  • 返回一个boolean值
约束:
  • 如果目标对象的属性是不可配置的,那么该属性不能被删除
7、handler.setPrototypeOf() 用于拦截对对象的 Object.setPrototypeOf() 操作
var p = new Proxy(target, {
  setPrototypeOf: function(target, prototype) {
  }
});
  • target,目标对象
  • prototype,待设置的属性名或者null
  • this 被绑定在 handler上
  • 返回一个boolean值
约束:
  • 如果目标对象是不可扩展的,则原型的参数必须和Object.getPrototypeOf(target)相同
8、handler.getOwnPropertyDescriptor() 用于拦截对对象的 Object.getOwnPropertyDescriptor() 操作
var p = new Proxy(target, {
  getOwnPropertyDescriptor: function(target, prop) {
  }
});
  • target,目标对象
  • prop,返回属性名的描述符
  • this绑定到处理函数
  • 必须返回一个 对象 或 undefined
约束:
  • getOwnPropertyDescriptor 必须返回一个 object 或 undefined
  • 如果属性作为目标对象的不可配置的属性存在,则该属性无法报告为不存在
  • 如果属性作为目标对象的属性存在,并且目标对象不可扩展,则该属性无法报告为不存在
  • 如果属性不存在作为目标对象的属性,并且目标对象不可扩展,则不能将其报告为存在
  • 属性不能被报告为不可配置,如果它不作为目标对象的自身属性存在,或者作为目标对象的可配置的属性存在
  • Object.getOwnPropertyDescriptor(target)的结果可以使用 Object.defineProperty 应用于目标对象,也不会抛出异常
9、handler.keys() 用于拦截对对象的  Object.keys() 操作
var p = new Proxy(target, {
  ownKeys: function(target) {
  }
});
  • target,目标对象
  • this绑定到处理函数
  • 返回一个数组
约束:
  • 返回值必须是一个数组
  • 数组的每一个元素必须是字符串或者Symbol
  • 数组必须包含目标对象的所有非可配置属性的键
  • 如果目标对象不可扩展,则数组必须包含目标对象自身属性的所有键,并且没有其他值
10、handler.isExtensible() 用于拦截对对象的 Object.isExtensible()操作
var p = new Proxy(target, {
  isExtensible: function(target) {
  }
});
  • target,目标对象
  • this绑定到处理函数
  • 返回一个boolean值
约束:
  • Object.isExtensible(proxy) 必须返回和Object.isExtensible(target)相同的值
11、handler.apply() 方法用于拦截函数的调用
var p = new Proxy(target, {
  apply: function(target, thisArg, argumentsList) {
  }
});
  • target,目标对象(函数)
  • thisArg,被调用时的上下文对象
  • argumentsList,被调用时的参数列表
  • this绑定到handler对象
  • 可以返回任何值
约束
12、 handler.construct()用于来接new操作
var p = new Proxy(target, {
  construct: function(target, argumentsList, newTarget) {
  }
});
  • target,目标对象
  • argumensList,构造器参数列表
  • newTarget,最初调用的构造函数
  • this绑定到handler
  • 返回一个对象
约束:
  • 返回值必须是一个对象
13、handler.preventExtensions()) 用于拦截对对象的handler.preventExtensions()操作
var p = new Proxy(target, {
  preventExtensions: function(target) {
  }
});
  • target,目标对象
  • this绑定到handler对象
  • 返回一个boolean值
约束:
  • Object.isExtensible(proxy)为假,则Object.preventExtensions(proxy)只能返回true
14、headler.enumerate()

以上我们列举了所有可选择覆盖的14个headler方法,所有代理的操作都是基于这14个方法进行的,如果你打算进阶的话,那么现在可以去看一些大神的库了。


















  • 6
    点赞
  • 4
    评论
  • 13
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值