Proxy 基本方法使用介绍

写在前面

原本是准备写关于vue3的内容，但是发现vue3一个很大的改变就是关于数据响应式的原理实现上的区别，最新版本的实现原理是通过proxy进行代码的重新编写，那么如果proxy不进行一个基础知识总结的话，那么大概率看vue3的时候会很迷茫，所以这篇文章还是很有必要写的。

基础语法

const p = new Proxy(target, handler)
1

总结：大概率是学习handler的方法使用

开始学习

常见方法

• handler.apply

• 方法用于拦截函数的调用

//进行除法操作 aim:使用proxy进行拦截，处理不管谁大还是谁小，都用大的取余小的即可
let division = (x, y) => {
	return x / y
}
const filterDivision = {
	/**
	 * @function apply 拦截函数使用
	 * @param {Object} target 目标函数 必须是一个函数 
	 * @param {Object} arg 上下文
	 * @param {Object} paramsList 参数数组 
	 * @description 可以返回任意值
	 */
	apply: function(target, arg, paramsList) {
		let newX, newY
		newX = paramsList[0]
		newY = paramsList[1]
		return newX > newY ? newX % newY : newY % newX
	}
}

const fp = new Proxy(division, filterDivision)
console.log(division(4, 2)) // 2
console.log(fp(5, 3)) //2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• hanlder.construct

• 用于拦截 new 操作符。为了使 new 操作符在生成的 Proxy 对象上生效，用于初始化代理的目标对象自身必须具有 [[Construct]] 内部方法（即 new target 必须是有效的）

//对new进行拦截，因为new的时候，默认是执行contructor的，那么就可以直接进行拦截处理得到的参数
class Animal {
	constructor(name) {
		this.name = name
	}
}
const handlerClass = {
	/**
	 * @param {Object} target 目标函数或者是具有construct内部方法的
	 * @param {Object} args 参数值 传递进来的是数组，返回的一定是一个对象
	 */
	construct(target, args) {
		return new target(...args)
	}
}
let d = new Animal('mary')
console.log(d.name) // mary

const cp = new Proxy(Animal, handlerClass)
let arrParams = ['jim', 'kim', 'tom']
console.log(new cp(arrParams).name) //['jim', 'kim', 'tom']
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• handler.deleteProperty

• 用于拦截对对象属性的 delete 操作

let targetObj = {
	name: 'jim',
	age: 20,
	height: '180cm'
}

const dp = new Proxy(targetObj, {
	/**
	 * @function deleteProperty 拦截对象的删除属性
	 * @param {Object} target //当前需要被拦截的对象
	 * @param {Object} prop 当前操作的属性
	 */
	deleteProperty: function(target, prop) {
		if (prop === 'height') {
			//设置该属性才可以真正意义的删除，否则仅仅是进行一个拦截处理，不进行真正的删除操作
			delete target[prop]
			return true
		} else {
			throw new TypeError('必要信息不可以被删除哦')
		}
	}
})
delete dp['height']
console.log(dp) //{ name: 'jim', age: 20 }
console.log(targetObj) //{ name: 'jim', age: 20 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

如果该对象被设置了不可以被删除的话，那么是不可以进行删除该属性的，比如：

Object.defineProperty(targetObj, 'height', {
	configurable: false
});
//TypeError: Cannot delete property 'height' of #