鬼节聊聊手写proxy思路

缘起

今天是鬼节，小编心血来潮，觉得应该更新文章了！于是应广大童鞋们要求，今天来聊聊proxy手写思路。看了这篇文章后，你会思如泉涌，会迫不及待的想试一试！本篇文章只是思路和少量代码，具体实践，有兴趣的童鞋可以去试试！篇末尾再给大家一个火影的彩蛋（bug），哈哈哈，进入正题！

如何入手

大家按照proxy定义，可能最多只是认为，proxy是一个代理，一个对象，剩下的无从下手是吗！本文通过以下几个方面来解析：

proxy主题
proxy内部方法和函数等

proxy主体

我们先来看proxy语法

const p = new Proxy(target, handler)

上面那个new关键词，你会想到啥？没错，就是构造函数，当然也可以是class，本质上还是语法糖，哈哈哈！

不罗嗦了，上代码：

function Proxy1 (target, handler) {
	const _target = JSON.parse(JSON.stringify(target))
	return _target
}

看了以上代码，是不是感觉主体很简单，下面我们看proxy内部方法和函数等。

proxy内部方法和函数等

先来看看简单的set和get方法

function Proxy1 (target, handler) {
	const _target = JSON.parse(JSON.stringify(target))
	for (let key in _target ) {
	Object.defineProperty(_target , key, {
		get: function() {
			handler.get && handler.get(target, key)
		},
		set: function(value) {
			handler.set && handler.set(target, key, value)
		},
	})
    }
	return _target
}

是不是很容易，接着我们来看看apply

function Proxy1 (target, handler) {
   let applyFunc = (target,  handler) => (...args) => {
			return handler.apply && handler.apply(target, this, args )
   }
	const _target =typeof target === 'function' ? applyFunc(target, handler)  : JSON.parse(JSON.stringify(target))
	for (let key in _target ) {
	Object.defineProperty(_target , key, {
		get: function() {
			handler.get && handler.get(target, key)
		},
		set: function(value) {
			handler.set && handler.set(target, key, value)
		},
	})
    }
	return _target
}

是不是也很简单，同样道理，其他api也一样，当然上面的apply要兼容call，apply 等调用，所以还要做点兼容处理！

不足

这里其实没法拦截construct，小编曾经试图使用class处理，但是因为new后，this指向性的原因，会导致某些代码内置的方法反复调用，总之，没法完美的做到底层兼容，所以这个等以后小编找到方法，再补充吧！

尾声

美好的时间总是短暂的，大家看完这篇文章是不是豁然开朗！下面公布今天的彩蛋，火影的一个bug是只要对着宇智波的人使用幻术，受术者情绪激烈起伏，就可以白嫖万花筒了，哈哈哈哈，也就是说宇智波一族按照这个方式，不说人均万花筒，但是大多数万花筒还是可以的！
文章的最后，大家今天早点睡觉，保重身体啊，哈哈哈！