새로운 것에 대해, BUG부터 시작합시다

머리말

오늘 프론트엔드 그룹에서 누군가가 질문을 올리는 것을 보았습니다.

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

위 코드에서 보듯이, 조건과 데이터를 변경하지 않고 "456"을 출력하는 것이 가능한가요?

그룹에 속한 사람들이 일반적인 상황에서는 불가능한 결론에 성급히 도달하기까지는 오랜 시간이 걸리지 않았습니다.

이유는? 참조 유형을 사용하는 방법에 대해 조금 아는 사람은 new Object()가 obj의 포인터를 변경하고 결코 얻을 수 없다는 것을 알고 있습니다 456.

---

문제는

정상적인 상황에서는 456을 출력할 수 없다는 것입니다. 그러면 어떤 오류 조건에서 456이 출력될 수 있습니까? 결국 프로그래머는 버그 작성에 능숙하기 때문에 비정상적인 상황을 일으킬 수 있어야 합니다.

그러다가 문득 이틀 전에 배운 Proxy가 생각났습니다. 이제 값을 할당할 때 문제가 생겼는데, 메타데이터에서 문제를 해결할 수 있을까요? 시도해 보세요:

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

완벽하게, 456이 성공적으로 출력됩니다.

뭐? 프록시가 무엇인지 모르시나요? 여기를 클릭하세요 –> ES6 Interceptor, Proxy

이제 결과를 그룹에 보내서 자랑할 시간입니다. 먼저 채팅 내역을 살펴보겠습니다. ㅎㅎ 이미 저보다 빨리 답변을 해주신 분이 계시네요. 좋아요, 먼저 다른 사람들의 답변을 살펴보겠습니다.

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

멋진 젊은이님, 함께 가볼까 생각했는데, 그들은 모두 getter와 setter에 대해 작업하고 있고 모두 메타 수준에서 데이터를 처리하고 있습니다.

동창생이 여기에서 영감을 얻었다며 글을 올렸어요. 정말 잘 쓰여 있어요. -> 흠잡을 데 없는 훅

다음에는 제 답변도 올리겠습니다. 그 때 그 즐거움에 함께 참여하세요. 잠깐, 어떤 사람들은 그가 기회주의자라고 불만을 표시했습니다. 데모_02 코드는 데모_03 코드와 완전히 동일합니다:

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

demo_02 메소드의 "obj.name = '456';" 코드의 마지막 줄이 수정되면 데모_02 코드도 그에 맞게 수정해야 합니다.

저희는 실제로 이 상황을 이용하고 있습니다. 제가 작성한 데모_01에도 동일한 문제가 있습니다. 다행히 Enter 키를 누르지 않았습니다. 그렇지 않으면 당황스러울 것입니다.
그렇다면 이 문제를 해결하고 실제 출력을 얻을 수 있는 방법은 없을까요?456

---

새 연산자는 무엇을 하나요?

그런데 지금 우리의 문제는 무엇입니까? 문제는 이것이 obj의 this 포인터를 수정하는 new Object()에 있다는 것입니다. 그렇다면 이를 피할 수 있는 방법이 있을까요?

뭐? 이 포인터가 왜 바뀌었는지 물어보면 정말 JS를 잘 배워야 한다고밖에 할 수 없습니다. 이 글을 한번 보세요. 군인 때부터 시작해서 뉴는 무엇을 했는지 기억나네요. 프록시 핸들러에 생성 메소드가 있는지 확인합니다. 객체 생성자에서 this를 수정할 수 있습니다. 아이디어는 좋았지만 실패했고 결실을 맺지 못했다. 이 아이디어를 계속할 수 있는 사람이 있으면 답을 알려주세요>_<

채팅 기록을 보면 동급생이 또 다른 해결책을 제시했습니다.

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

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

이번에는 동급생이 Object를 먼저 다시 작성하여 Object o를 반환하도록 하세요. 이 점의 변화를 피합니다. 당신은 정말 재능이 있고 존경합니다. 조용히 모아보세요<_<

---

열심히 일하세요. 뭔가 가르쳐줄 사람이 늘 있을 거예요

위 내용은 새로운 것에 대해, BUG부터 시작합시다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!