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

转载 2016年08月30日 10:51:32

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

本文主要详细分析了JS变量,作用域以及内存问题,同时附上非常多的实例,方便大家理解这3个概念,是篇不可多得的文章,希望对大家有所帮助

javascript一共有七种数据类型:Object,function,undefined,NUll,Boolean,Number和String,(后来在ES6中又加入了两种数据类型:set,map),这些类型分别在内存中占有固定的大小空间,他们的值保存在栈空间,我们通过按值来访问的。

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

1. Undefined

Undefined类型只有一个值undefined,在使用了声明但未初始化的变量的时候,这个变量值就是undefined

var hi;
alert(hi);//undefined

2. Null

Null类型也只有一个值null,可以把null理解为一个空指针。

3. Boolean

Boolean只有两个字面值true和false。

4. Number

就是其他语言里的整数和浮点数。

5.String

字符序列,可以用单引号或双引号表示 

var a =’hi’;
var b = “hi”;

以上5种类型在内存中占有固定大小的空间,它们的值保存在栈内存中。

6. Object

Object类型是其他所有实例的基础。

对于引用类型的值,是在堆内存中分配空间。但由于内存地址大小是固定的,因此内存地址保存在栈内存中,所以查询的时候先从栈内存中取到地址,然后在通过地址找到堆内存中的实际值。

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

这里写图片描述

<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中最为重要的概念之一,执行环境定义了变量或函数有权访问其他数据。

全局执行环境是最外围的执行环境,在web浏览器中,全局执行环境是window对象,因此,所有的全局变量的函数都是作为window的属性和方法创建的。

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

<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即可:

JS中的变量、作用域和内存问题

变量的分类:基本类型值和引用类型值 基本类型值指的是简单的数据段,包括Undefined, Null, Bollean, Number和String。这5中基本数据类型是按照值访问的,可以操作保存在...

《js高级程序设计》学习笔记--4.变量、作用域和内存问题

4.1基本类型和引用类型的值 /*

JS高级程序设计4-变量、作用域、和内存的问题

基本类型和引用类型(P68) 基本类型指的是简单的数据段,而引用类型指那些可能有多个值构成的对象(P68); 不能给基本类型的值添加属性,虽然这样做不会导致任何错误(P69); 从一个...

js变量、作用域和内存问题的复习**

基本类型和引用类型 基本类型指的是简单的数据段,引用类型指那些可能由多个值构成的对象。引用类型的值是保存在内存中的对象。在实际操作中,实际上是在操作对象的引用而不是实际的对象,因此引用类型的值是按...

javascript高级程序设计(变量、作用域和内存问题)

4.1基本类型和引用类型 ECMAScript变量可能包含两种不同数据类型的值:基本类型和引用类型。基本类型是指简单的数据段,引用类型是指那些可能由多个值构成的对象。第三章讨论了5种基本数据类型:u...

史上最全的变量、作用域和内存问题

javascript基础知识大全

JavaScript高级程序设计2--变量、作用域和内存问题

一、基本类型与引用类型的值 JavaScript可以保存两种类型的变量: 基本类型值:指简单的数据段; 引用类型值:指那些由多个值构成的对象; 两者具有以下特点: 1.基本类型值是按值访问的,而引用类...
  • zl_best
  • zl_best
  • 2016年12月04日 15:56
  • 112

JavaScript-变量、作用域、内存 小抄

JavaScript松散类型的本质决定了它 变量的值和数据类型可以在脚本的生命周期里改变。 这一特性有趣又强大,同时又是容易出问题的特性。但JavaScript的变量实际复杂程度远不止如此。 变量 E...

JavaScript高级程序设计笔记-变量、作用域和内存问题

1.数据类型        基本类型值:简单的数据段,Undefined、Null、Boolean、Number和String,这五种基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值...

《JavaScript高级编程设计》之变量、作用域和内存的问题

声明:以下是阅读《JavaScript高级编程设计》一书做的笔记与理解,对于我已经理解或者记住的,在下面只会简略的略过,可能有很多疏漏的地方,只适合我自己学习、记忆。对于各位而言不推荐细读。 总结 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js变量、作用域及内存详解
举报原因:
原因补充:

(最多只允许输入30个字)