About new, let's start with a BUG-JS Tutorial-php.cn

About new, let's start with a BUG

一个新手

Release： 2017-09-26 10:30:25

Original

1367 people have browsed it

Preface

Today in a front-end group, I saw someone posting a question:

var o = new Object();function foo(obj){
    var obj = o;
    obj.name = &#39;123&#39;;
    obj = new Object();
    obj.name = &#39;456&#39;;
}
foo(o);
console.log(o.name)

Copy after login

As shown in the above code, without changing anything In the case of conditions and data, is it possible to output "456"?

It didn’t take long for people in the group to start drawing conclusions, which they couldn’t do under normal circumstances.
The reason? Anyone who knows a little about how to use reference types knows that new Object() changes the point of obj and can never get 456.

Here comes the problem

It is impossible to output 456 under normal circumstances, so under what error conditions can it be output## Where is #456? After all, programmers are good at writing bugs. They should be able to cause abnormal situations.

Then, my handicapped self suddenly thought of the Proxy I just learned two days ago. We now have a problem when assigning values, so can we solve the problem from metadata? Try it:

//demo_01var o = new Object();
o = new Proxy(o,{    
    set(target, key, value,receiver){        
    if(Object.is(&#39;name&#39;,key))            
    return Reflect.set(target, key, `456`,receiver);        
    return Reflect.set(target, key, value , receiver);
    }
})function foo(obj){
    var obj = o;
    obj.name = &#39;123&#39;;
    obj = new Object();
    obj.name = &#39;456&#39;;
}
foo(o);
console.log(o.name)

Copy after login

Perfect, successfully outputs

456.

What? Don't you know what a Proxy is? Click here –> ES6 Interceptor, Proxy

So, now is the time to show off the results, and prepare to send them to the group to show off. Let’s look through the chat history first. Hehe, someone has already given an answer faster than me. Okay, let’s take a look at other people’s answers first:

//demo_02var o = new Object();Object.defineProperty(o,&#39;name&#39;,{
    set(val){        this.value = &#39;456&#39;;
    },
    get(){        return this.value;
    }
})function foo(obj){
    var obj = o;
    obj.name = &#39;123&#39;;
    obj = new Object();
    obj.name = &#39;456&#39;;
}
foo(o);
console.log(o.name)

Copy after login

Awesome young man, I thought of going together. They are all working on getters and setters, and they are all processing data at the meta level.

This classmate posted an article at the same time, saying that he got inspiration from here. Click here and enjoy it together. It is indeed very well written-> Impeccable hook

Next, I will also post my answer and join in the fun at the time. Wait, some people expressed dissatisfaction and said that he was opportunistic. The demo_02 code is completely equivalent to the demo_03 code:

//demo_03var o = new Object();function foo(obj){
    var obj = o;
    obj.name = &#39;123&#39;;
    obj = new Object();
    obj.name = &#39;456&#39;;
}
foo(o);
o.name = &#39;456&#39;;
console.log(o.name);

Copy after login

When the last line of code "obj.name = '456';" in the demo_02 method is modified, "this.value = '456" in the demo_02 code ';" must also be modified accordingly.

That makes sense. We are indeed taking advantage of opportunities. I wrote demo_01 with the same problem. Fortunately, I didn’t click the Enter key, otherwise I would have been embarrassed.

So is there any way to solve this problem and achieve real output?
456

What does the new operator do?

What is our problem now? The problem is that it is on new Object(), which modifies the this pointer of obj. So is there any way we can avoid it?

What? If you ask me why this pointer has changed, I can only say that you really need to learn JS hard. Take a look at this article. The author's writing style is so interesting. He starts from a soldier and talks about what New has done.

I remember that there is a construct method in the Proxy handler. If I can modify its this in the Object constructor. The idea was good, but it failed and didn't come to fruition. If anyone can continue with this idea, please let me know the answer>_<

Checking the chat history, the classmate gave another solution:

var o = new Object();var _Object = Object;Object = function(){
    return o;
}function foo(obj){
    var obj = o;
    obj.name = &#39;123&#39;;
    obj = new Object();
    obj.name = &#39;456&#39;;
}

foo(o);
console.log(o.name)Object = _Object;

Copy after login

This time this time The classmate first rewrote the Object object so that it returns the object o. This avoids the change of this point. You are so talented, I admire you. Silently collect<_<

Work hard, there will always be someone who can teach you something

The above is the detailed content of About new, let's start with a BUG. For more information, please follow other related articles on the PHP Chinese website!