JavaScript 변수, 범위 및 메모리에 대한 자세한 설명

기본 유형 값은 undefined，NUll，Boolean，Number和String입니다. 이러한 유형은 메모리에서 고정된 크기 공간을 차지하며 해당 값은 스택 공간에 저장되며 값으로 액세스합니다.

(1) 값 유형: 숫자 값, 부울 값, null, 정의되지 않음.
(2) 참조 유형: 객체, 배열, 함수.

할당된 값이 참조 유형인 경우 힙 메모리에 이 값에 대한 공간을 할당해야 합니다. 이러한 값의 크기는 고정되어 있지 않기 때문에(객체에는 많은 속성과 메서드가 있음) 스택 메모리에 저장할 수 없습니다. 하지만 메모리 주소 크기는 고정되어 있으므로 메모리 주소를 스택 메모리에 저장할 수 있습니다.

<script type="text/javascript”>
var box = new Object();  //创建一个引用类型
var box = "trigkit4";   //基本类型值是字符串
box.age = 21;    //基本类型值添加属性很怪异，因为只有对象才可以添加属性。
alert(box.age);  //不是引用类型，无法输出；
</script>

간단히 말하면 힙 메모리는 참조 값을 저장하고, 스택 메모리는 고정형 값을 저장합니다. "참조"는 개체의 실제 위치에 대한 포인터입니다.

여기서 참조는 다른 참조가 아닌 특정 개체를 가리킨다는 점에 유의해야 합니다.

여기의 개체는 문자열 개체, 숫자 개체, 배열 개체 등이 될 수 있습니다.

<script type="text/javascript">
    var man = new Object();//man指向了栈内存的空间地址
    man.name = "Jack";
    var man2 = man;//man2获得了man的指向地址

    alert(man2.name);//两个都弹出Jack
    alert(man.name);
</script>

변수 값 복사

이것을 보세요 다시 예시:

<script type="text/javascript">
    var man = new Object();//man指向了栈内存的空间地址
    man.name = "Jack";
    var man2 = man;//man2获得了man的指向地址

    man2.name = "ming";//因为他们都指向同一个object，同一个name，不管修改谁，大家都修改了
    alert(man2.name);//两个都弹出ming
    alert(man.name);
</script>

위에서 보면 변수 복사 측면에서도 기본형과 참조형은 다르다는 것을 알 수 있다. 기본형은 값 자체를 복사하는 반면, 참조형은 주소를 복사한다.

패스 매개변수

ECMAScript에서는 모든 함수의 매개변수가 값으로 전달됩니다.

<script type="text/javascript">
     function box(num){      //按值传递
         num+=10;
         return num;
     }

     var num = 10;
     var result = box(num);
     alert(result);  //如果是按引用传递，那么函数里的num会成为类似全局变量，把外面的number替换掉
     alert(num);    //也就是说，最后应该输出20（这里输出10）
</script>

js는 참조 패스가 있는 경우에는 전달되지 않습니다. 그러면 함수 내의 변수는 전역 변수가 되며 외부에서도 액세스할 수 있습니다. 그러나 이것은 분명히 불가능하다.

실행 환경 및 범위

실행 환경은 javascript에서 가장 중요한 개념 중 하나입니다. 실행 환경은 변수나 함수가 다른 데이터에 접근할 수 있도록 정의합니다.

전역 실행 환경은 웹 브라우저에서 가장 주변적인 실행 환경입니다. 따라서 전역 변수 함수는 모두 window의 속성과 메서드로 생성됩니다. . window

<script type="text/javascript">
      var name = "Jack";           //定义全局变量
      function setName(){
          return "trigkit4";
      }

      alert(window.name);        //全局变量，最外围，属于window属性
      alert(window.setName());  //全局函数，最外围，属于window方法
</script>

실행환경의 코드가 실행되면 환경은 소멸되며, 그 안에 저장된 변수와 함수도 소멸됩니다. 글로벌 환경이라면 모든 프로그램이 소멸될 때까지 소멸되지 않습니다. 실행되었거나 웹페이지가 완료되었습니다.

var의 지역 변수 제거

<script type="text/javascript">
      var name = "Jack";
      function setName(){
          name = "trigkit4";   //去掉var变成了全局变量
      }

      setName();
      alert(name);//弹出trigkit4
</script>

매개변수를 전달하면 지역 변수이기도 합니다

<script type="text/javascript">
      var name = "Jack";
      function setName(name){    //通过传参，也是局部变量
          alert(name);
      }

      setName("trigkit4");//弹出trigkit4
      alert(name);//弹出Jack
</script>

함수 본문에도 이 함수만 접근할 수 있습니다. 함수

<script type="text/javascript">
     var name = "Jack";
      function setName(){
          function setYear(){    //setYear()方法的作用域在setName()内
              return 21;
          }
      }
      alert(setYear());//无法访问，出错 
</script>

의 내부 계층은 다음 방법을 통해 액세스할 수 있습니다.

<script type="text/javascript">
     var name = "Jack";
      function setName(){
          function setYear(){    //setYear()方法的作用域在setName()内
              return 21;
          }
          return setYear();
      }
      alert(setName()); //弹出21
</script>

또 다른 범위 예:

<script type="text/javascript">
     var name = "Jack";
      function setName(){
          function setYear(){    //setYear()方法的作用域在setName()内
              var b = "hi";     //变量b的作用域在setYear()内
              return 21;
          }
          alert(b);//无法访问 
      }
</script>

코드가 환경에서 실행될 때

, 그 목적은 실행 환경에서 접근 권한을 가진 변수와 함수에 대한 질서 있는 접근을 보장하는 것입니다(규칙 수준에 따른 접근을 의미합니다). 스코프 체인의 앞부분은 실행 환경의 변수 객체입니다. 作用域链

범위

변수가 함수 내에서 선언되지 않았거나 전역 변수이고 전역 범위를 갖는

없이 선언되었습니다. var객체의 모든 속성에는 전역이 있습니다. 범위; 함수 내에서 선언되고 window로 수정되는 변수는 지역 변수이며 함수 본문 내에서만 사용할 수 있습니다. 여전히 지역 변수입니다. varvar블록 수준 범위 없음

// 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>

각 환경은 범위 체인을 검색하여 변수 및 함수 이름을 쿼리할 수 있지만 어떤 환경도 범위 체인 실행 환경을 검색하여 다른 환경을 입력할 수 없습니다. 여기서

를 제거하면 "Jack"이 나타납니다.

var name = "trigkit4" 메모리 문제

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

javascript 순환 참조

매우 간단한 예: DOM 객체는

객체에 의해 참조되며 동시에 동일한 또는 다른

개체, 이 Javascript 개체는 메모리 누수를 일으킬 수 있습니다. 이 Javascript 개체에 대한 참조는 스크립트가 중지되면 가비지 수집기에 의해 수집되지 않습니다. 순환 참조를 중단하려면 DOM 요소를 참조하는 개체 또는 DOM 개체에 대한 참조에 DOM 값을 할당해야 합니다. DOMnull

클로저

클로저 외부의 변수가 클로저에 도입되면 클로저가 종료될 때 객체를 가비지 수집(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自带的内存调试工具可以很方便地查看内存使用情况和内存泄露，在 Timeline -> Memory 点击record即可。

以上就是JavaScript 变量、作用域及内存详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！