origin
Today is Ghost Festival, the editor has a whim and thinks that the article should be updated! So at the request of the majority of children's shoes, let's talk about proxy handwriting ideas today. After reading this article, your thoughts will flow like a fountain, and you can't wait to try it! This article is just an idea and a small amount of code, specific practice, interested children's shoes can try it! At the end of the article, I will give you a Naruto Easter egg (bug), hahaha, let’s get to the point!
how to get started
According to the definition of proxy, everyone may at most just think that proxy is a proxy, an object, and there is no way to do the rest, right? This article analyzes the following aspects:
- proxy theme
- Proxy internal methods and functions, etc.
proxy principal
Let's look at the proxy syntax first
const p = new Proxy(target, handler)
What do you think of the new keyword above? That's right, it is a constructor, of course it can also be a class, which is essentially syntactic sugar, hahaha!
Don't be wordy, let's go to the code:
function Proxy1 (target, handler) {
const _target = JSON.parse(JSON.stringify(target))
return _target
}
After reading the above code, do you feel that the main body is very simple, let's look at the internal methods and functions of the proxy.
Proxy internal methods and functions, etc.
First look at the simple set and get methods
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
}
Is it easy, then let's take a look at 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
}
Is it also very simple, the same reason, other apis are the same, of course, the above apply must be compatible with call, apply and other calls, so do some compatibility processing!
insufficient
In fact, there is no way to intercept construct here. The editor once tried to use class processing, but because of the directivity of this after new, it will cause some code built-in methods to be called repeatedly. In short, it is impossible to achieve perfect bottom-level compatibility, so this Let me add it when I find a way later!
end
The good time is always short. After reading this article, don’t you feel enlightened! Today’s easter egg is announced below. One of Naruto’s bugs is that as long as the illusion is used on the Uchiha people, the subject’s emotions will fluctuate violently, and the kaleidoscope can be used for nothing. Hahahaha, that is to say, the Uchiha clan follows this method. Kaleidoscope per capita, but most kaleidoscopes are still ok!
At the end of the article, everyone go to bed early today and take care of your health, hahaha!