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 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
js实现菜单跳转效果
Dec 11 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python opencv之SURF算法示例
2018/02/24 Python
python机器学习之随机森林(七)
2018/03/26 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python处理“
2019/06/10 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
运动会100米解说词
2014/01/23 职场文书
简历自我评价模版
2014/01/31 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
先进班组材料范文
2014/12/25 职场文书
党员个人自我评价
2015/03/03 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
Python代码实现双链表
2022/05/25 Python
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python