Js学习笔记 对全局变量与局部变量的理解

 //局部变量

  function myFunction(){
      var local ="121";
      console.log(local,"查看局部变量，函数体内");
  }
  myFunction();

//   console.log(local,"查看局部变量");
  /* 
    在函数体内var声明一个局部变量，在函数体内有用，在函数体外调用为not definde;局部变量在函数开始执行的时候创建，函数执行完之后局部变量自动销毁
    局部变量自动销毁是js内部的垃圾回收机制销毁的
    在函数体内没有使用var声明一个var变量，则默认为全局变量
  */

  //var overall
  
  //全局变量

```javascript

```javascript
   var a = 0;
   function b(){
       ++a;
       console.log("这是全局变量a",a);
       return a;
   }

   console.log("这是未改变的全局变量a",a,"这是函数b():",b(),b(),b(),"这是改变后的全局变量a",a);

   //打印结果：
   /*
     这是全局变量a:1,
     这是全局变量a:2,
     这是全局变量a:3,
     这是未改变的全局变量a:0 , 这是函数b(): 1 2 3 这是改变后的全局变量a:3 ;
     注：开始函数未调用，所以a=0，后面函数b被调用了3次，所以a变为3
   */

  /*
   在函数外声明的变量是全局变量，网页上所有脚本和函数都能访问，全局变量会在页面关闭之后被删除
  */

  // 闭包
  /* 
    闭包就是一个内嵌函数引用顶层函数的变量，而顶层函数是一个立即执行函数,(闭包可以简单理解为:定义在一个函数内部的函数)因为他会自动调用，所以局部变量不会被删除，但是这会增加内存消耗
     闭包的作用: 1：可以读取函数内部的变量
                2: 让这些变量的值始终保持在内存中
  */

  //eg:

  function fn1(){
      var b = 0;
     return function fn2(){
         return ++b;
      }
  }

  var closure = fn1();
  console.log("闭包",closure(),closure(),closure()); //结果为：1 ,2 ,3

  /*
   因为闭包的特殊机制，使得局部变量在函数执行之后不会被销毁;
   fn1内部的局部变量在fn2中是可以访问到的，但是在fn2内部的局部变量在fn1函数内是不能访问到的，这是因为js的链式作用域，子对象会一级一级的向上寻找所有父对象的变量，所以，父对象的所有变量对子对象都是可见的，反之不成立
  */

  function f1(){
      var n = 999;
      nAdd = function(){n+=1}; //没有使用var声明，是一个全局变量，匿名函数，匿名函数本身也是一个闭包
      function f2(){
          console.log("闭包n的值：",n);
      }
      return f2;
  }

  var result = f1();
  result();  // 999
  nAdd();
  result();  // 1000

 //闭包引起的内存泄漏，解决方法
 // 1: 基本方法就是清除这种循环 

```powershell
  function outer(){
      var one = document.getElementById("one");
      one.onclick = function(){}
  }

  window.onunload = function(){
      var one = document.getElementById("one");
      one.onclick = null;
  }

      // 2: 遍历某一元素节点极其所有后代元素 ,node:所有要清除的节点 func:进行处理的函数
```javascript
  function walkTheDOM(node,func){
      func(node);
      node = node.firstChild;
      while (node){
          walkTheDOM(node,func);
          node = node.nextSibling;
      }
  }

  //3: 清除dom节点的所有引用，防止内存泄漏, node:所要清除的元素节点
  function purgeEventHandlers(node){
      walkTheDOM(node,function(e){
          for(var n in e){
              if(typeof e[n] ==='function'){
                  e[n] = null;
              }
          }
      })
  }
  
  function purgeEventHandlers(node){
      walkTheDOM(node,function(e){
          for(var n in e){
              if(typeof e[n] ==="function"){
                  e[n] = null
              }
          }
      })
  }