JavaScript 변수 범위, 메모리, DOM 누출 및 기타 문제의 예에 대한 자세한 설명

Scope

변수가 함수 내에서 선언되지 않거나 var 없이 선언되면 전역 변수입니다. 창 개체의 모든 속성은 전역 범위를 갖습니다. 코드이며 함수 내부에서 선언됩니다. 그리고 var로 수정된 변수는 지역 변수이며 함수 본문 내에서만 사용할 수 있습니다. 함수의 매개변수는 var를 사용하지 않지만 여전히 지역 변수입니다.

블록 수준 범위 없음

// if语句：

<script type="text/javascript">
if(true){            //if语句的花括号没有作用域的功能。

var box = "trigkit4";
}
alert(box);//弹出 trigkit4
</script>

for 루프 문에도 동일하게 적용됩니다.

변수 쿼리

변수 쿼리에서는 전역 변수보다 지역 변수에 접근하는 속도가 빠르므로 범위 체인을 검색할 필요가 없습니다.
다음 예:

<script type="text/javascript">
   var name = "Jack";
   function setName(){
      var name = "trigkit4";
      return name; //从底层向上搜索变量
  }
  alert(setName());   
</script>

메모리 문제

javascript에는 자동 가비지 수집 메커니즘이 있습니다. 데이터가 더 이상 사용되지 않으면 "null"로 설정하여 참조를 해제할 수 있습니다

순환 참조

매우 간단한 예: DOM 개체는 Javascript 개체에 의해 참조되고 동시에 동일하거나 다른 Javascript 개체를 참조하는 경우 이 DOM 개체는 메모리 누수를 일으킬 수 있습니다. 이 DOM 개체에 대한 참조는 스크립트가 중지될 때 가비지 수집기에 의해 회수되지 않습니다. 참조 순환을 끊으려면 DOM 요소를 참조하는 객체나 DOM 객체에 대한 참조를 null로 할당해야 합니다.

Closure

클로저 외부의 변수가 클로저에 도입되면 클로저가 종료될 때 객체를 가비지 수집(GC)할 수 없습니다.

var a = function() {
 var largeStr = new Array(1000000).join('x');
 return function() {
  return largeStr;
 }
}();

DOM 누출

원본 COM이 제거되면 제거되지 않는 한 하위 노드 참조를 재활용할 수 없습니다.

var select = document.querySelector;
var treeRef = select('#tree');
//在COM树中leafRef是treeFre的一个子结点
var leafRef = select('#leaf'); 
var body = select('body');
body.removeChild(treeRef);
//#tree不能被回收入，因为treeRef还在
//解决方法:
treeRef = null;
//tree还不能被回收，因为叶子结果leafRef还在
leafRef = null;
//现在#tree可以被释放了。

타이머 타이머 누수

타이머는 메모리 누수가 발생하는 일반적인 장소이기도 합니다.

for (var i = 0; i < 90000; i++) {
 var buggyObject = {
  callAgain: function() {
   var ref = this;
   var val = setTimeout(function() {
    ref.callAgain();
   }, 90000);
  }
 }
 buggyObject.callAgain();
 //虽然你想回收但是timer还在
 buggyObject = null;
}

메모리 디버깅

Chrome의 자체 메모리 디버깅 도구는 매우 편리할 수 있습니다. 메모리 사용량 및 메모리 확인 누출:
타임라인에서 기록 클릭 -> 메모리:

위 내용은 JavaScript 변수 범위, 메모리, DOM 누출 및 기타 문제의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!