首页  >  文章  >  web前端  >  javascript变量作用域、内存、DOM泄露等问题实例详解

javascript变量作用域、内存、DOM泄露等问题实例详解

伊谢尔伦
伊谢尔伦原创
2017-07-18 10:31:521462浏览

作用域

变量没有在函数内声明或者声明的时候没有带var就是全局变量,拥有全局作用域,window对象的所有属性拥有全局作用域;在代码任何地方都可以访问,函数内部声明并且以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。

闭包

在闭包中引入闭包外部的变量时,当闭包结束时此对象无法被垃圾回收(GC)。


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

DOM泄露

当原有的COM被移除时,子结点引用没有被移除则无法回收。


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

Timers计(定)时器泄露

定时器也是常见产生内存泄露的地方:


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变量作用域、内存、DOM泄露等问题实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn