js变量、作用域及内存详解


Posted in Javascript onSeptember 23, 2014

基本类型值有:undefined,NUll,Boolean,Number和String,这些类型分别在内存中占有固定的大小空间,他们的值保存在栈空间,我们通过按值来访问的。

(1)值类型:数值、布尔值、null、undefined。
(2)引用类型:对象、数组、函数。

如果赋值的是引用类型的值,则必须在堆内存中为这个值分配空间。由于这种值的大小不固定(对象有很多属性和方法),因此不能把他们保存到栈内存中。但内存地址大小是固定的,因此可以将内存地址保存在栈内存中。

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

简而言之,堆内存存放引用值,栈内存存放固定类型值。

js变量、作用域及内存详解

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

javascript没有按引用传递的,如果存在引用传递的话,那么函数内的变量将是全局变量,在外部也可以访问。但这明显是不可能的。

执行环境及作用域

执行环境是javascript中最为重要的概念之一,执行环境定义了变量或函数有权访问其他数据。

全局执行环境是最外围的执行环境,在web浏览器中,全局执行环境是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对象的所有属性拥有全局作用域;在代码任何地方都可以访问,函数内部声明并且以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('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可以被释放了。

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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
jQuery 选择器详解
Jan 19 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 #Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 #Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 #Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 #Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 #Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 #Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 #Javascript
You might like
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
jquery简单体验
2007/01/10 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
python计算最小优先级队列代码分享
2013/12/18 Python
python中实现定制类的特殊方法总结
2014/09/28 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
TensorFlow实现创建分类器
2018/02/06 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
1亿有多大教学反思
2014/05/01 职场文书
献爱心活动总结
2014/05/07 职场文书
家长学校培训材料
2014/08/20 职场文书
中学教师个人总结
2015/02/10 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技
java中如何截取字符串最后一位
2022/07/07 Java/Android