JS 조작 부호 in 문제 에 대한 탐구

일 은 이렇다.모두 가 메모리 유출 이라는 것 을 알 고 있 겠 지.그것 은 몇 가지 흔히 볼 수 있 는 장면 이 있다.

패 킷 을 잘못 사용 하여 메모리 누 출

(성명 되 지 않 은)전역 변수

분 리 된 DOM 노드

(임의의)콘 솔 의 인쇄

잊 혀 진 타이머

순환 인용

메모리 누 출 을 중시 해 야 합 니 다.이렇게 심각 하면 페이지 가 멈 추고 사용자 체험 에 영향 을 줄 수 있 습 니 다!
그 중에서 세 번 째 점 은 나의 주 의 를 끌 었 다.나 는 당연히 그것 이 말 하 는 것 을 잘 알 고 있다.예 를 들 어'만약 에 네가 특정한 dom 노드 를 수 동 으로 제거 했다 고 가정 하면 이 dom 노드 가 차지 하 는 메모 리 를 방출 해 야 하 는데 소홀 해서 특정한 코드 가 제거 되 어야 할 노드 에 인용 되 고 결국은 이 노드 가 차지 하 는 메모리 가 방출 되 지 못 하 게 된다'는 상황 이다.

<div id="root">
    <div class="child">     </div>
    <button>  </button>
</div>
<script>
    let btn = document.querySelector('button')
    let child = document.querySelector('.child')
    let root = document.querySelector('#root')
    
    btn.addEventListener('click', function() {
        root.removeChild(child)
    })

</script>

이 코드 가 하 는 작업 은 단 추 를 누 른 후에.child 의 노드 를 제거 하 는 것 입 니 다.클릭 한 후에 이 노드 는 dom 에서 제거 되 었 지만 전역 변수 child 는 이 노드 에 인용 되 어 있어 서 이 노드 의 메모리 가 방출 되 지 않 습 니 다.
해결 방법:우 리 는.child 노드 에 대한 인용 을 click 이벤트 의 리 셋 함수 로 이동 할 수 있 습 니 다.그러면 노드 를 제거 하고 리 셋 함수 의 실행 을 종료 한 후에 이 노드 에 대한 인용 을 자동 으로 삭제 하고 메모리 누 출 이 존재 하지 않 습 니 다.(이것 은 실제 이벤트 에서 이 노드 가 존재 하 는 지 실시 간 으로 감지 하 는 것 입 니 다.존재 하지 않 으 면 브 라 우 저 는 reove 함수 의 실행 을 촉발 하지 않 습 니 다)

<div id="root">
    <div class="child">     </div>
    <button>  </button>
</div>
<script>
    let btn = document.querySelector('button')

    btn.addEventListener('click', function() {  
        let child = document.querySelector('.child')
        let root = document.querySelector('#root')

        root.removeChild(child)
    })

</script>

이 코드 는 완벽 합 니까?아니요.이벤트 가 실 행 될 때마다 child 와 루트 노드 에 대한 인용 을 만 들 었 기 때 문 입 니 다.메모리 가 소모 되 었 습 니 다.
버튼 을 누 른 경우...)
사실 또 하나의 방법 이 있 습 니 다.우 리 는 click 에서 현재 루트 노드 에 child 서브 노드 가 존재 하 는 지 판단 합 니 다.존재 하면 reove 함 수 를 실행 합 니 다.그렇지 않 으 면 아무것도 하지 않 습 니 다!
제목 에서 말 하 는 행동 을 불 러 일 으 켰 다.
어떻게 판단 합 니까?
두루아니오,너무 귀찮아 요!
왠 지 모 르 게 나 는 갑자기for...in중의 in 연산 자가 생각 났 다.이것 은 원형 체인 을 바탕 으로 대상 을 옮 겨 다 닐 수 있다!
GitHub 를 열 고 부모 노드 를 찾 아 가 져 오 는 장면 을 복원 합 니 다.

그림 에 빨간색 상 자 를 그 리 는 것 은 우리 가 취 할 부모 요소 이 고 주황색 상 자 는 존재 하 는 하위 요 소 를 판단 하 는 것 이다.

let parent=document.querySelector('.position-relative');
let child=document.querySelector('.progress-pjax-loader');

여기 서 주의 하 세 요.DOM 노드(클래스 배열 대상)를 얻 었 기 때문에 우 리 는 조작 하기 전에 반드시 먼저 처리 해 야 합 니 다.

let p_child=[...parent.children];

그리고

console.log(child in p_child);

！！！
왜 일 까요?이때 필 자 는 아직 일의 심각 성 을 의식 하지 못 했다)
무슨 문제 가 있 는 것 같 습 니 다.es6 의 includes API 로 검증 해 보 세 요.

console.log(p_child.includes(child));

맞 는데!
일반적인 배열 로 검증 합 니 다:

？？？
이때 필 자 는 MDN 에서 한 번 찾 아 본 것 을 생각 했다.

더 나 아가 나 는 in 연산 자 를 단독으로 사용 할 때 왼쪽 의 값(색인 으로)에 대응 하 는 값 이 오른쪽 대상 내부(속성&원형)에 있 는 지 확인 했다.
위의 코드 로 돌아 가면 우 리 는 다음 과 같은 것 을 발견 할 수 있 습 니 다.

이것 은 우리 의 결론 을 검증 했다.
분명히'서브 요소'는'원형 체인 에 존재 한다'는 것 과 같 지 않다.이것 은 또 하나의 지식 점 을 이 끌 어 냈 다.attribute 와 property 의 차이!
그래서'고생'을 통 해 소스 코드 는 직접 이렇게 써 야 합 니 다.

<div id="root">
    <div class="child">     </div>
    <button>  </button>
</div>
<script>
    let btn = document.querySelector('button')
    let child = document.querySelector('.child')
    let root = document.querySelector('#root')
    let r_child = [...root.children]
    
    btn.addEventListener('click', function() {
        if(r_child.includes(child)){   //          child   null   ... 
        	root.removeChild(child)
        }
    })

</script>

다소 촉박 한 결말 을 나타내다
그래서 책 을 읽 고 공부 할 때'깊이 파고 들 지 않 는 다'고 할 수 없습니다.
그리고 용감하게'괴롭히다','문서 검사'[/익살 스 러 운 얼굴]를 배 워 야 한다.
총결산
JS 연산 자 in 문제 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 JS 연산 자 in 문제 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!