详解JS变量、作用域、内存

本文要点:

1.值类型和引用类型的区别

2.复制变量值

3.内存

4.传递参数

5.执行环境及作用域问题

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

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

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

两者区别如下:

  1. 基本类型值在内存中占据固定大小的空间,因此被保存在栈内存中;
  2. 从一个变量向另一个变量复制基本类型的值,会创建这个值的一个副本; 引用类型的值是对象,保存在堆内存中;
  3. 包含引用类型值的变量实际上包含的并不是对象本身,而是一个指向该对象的指针;
  4. 从一个变量向另一个变量复制引用类型的值,复制的其实是指针,因此两个变量最终都指向同一个对象;
  5. 确定一个值是哪种基本类型可以使用typeof操作符,而确定一个值是哪种引用类型可以使用instanceof操作符。
  6. 所有变量(包括基本类型和引用类型)都存在于一个执行环境(也称为作用域)当中,这个执行环境决定了变量的生命周期,以及哪一部分代码可以访问其中的变量。

基本类型和引用类型的值

动态的属性

var person = new Object();
person.name = "Nicholas";
alert(person.name); // Nicholas
var name = "Nicholas";
name.age = 27;
alert(name.age); // undefined

这说明只能给引用类型值动态添加属性。

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

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

2.复制变量值

再看下面这个例子:

例一:

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

例二:

var num1 = 5;
var num2 = num1;

num1中保存的值是5.当使用num1的值来初始化num2时,num2中也保存了值5.但num2中的5与num1中的5是完全独立的,该值只是num1中5的一个副本。

var obj1 = new Object();
var obj2 = obj1;
obj1.name = "Nicholas";
alert(obj2.name); // Nicholas

变量obj1保存了一个对象的新实例。然后,这个值被复制到了obj2中;换句话说,obj1和obj2都指向同一个对象。这样,当为obj1添加name属性后,可以通过obj2来访问这个属性。

由以上可以得出:在变量复制方面,基本类型和引用类型也有所不同,基本类型复制的是值本身,而引用类型复制的是地址。

3.内存问题

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

4.传递参数

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>

再看一个例子:
function addTen(num){
    num +=10;
    return num;
}

var count = 20;
var result = addTen(count);
alert(count); // 20, 没有变化
alert(result); //30
function setName(obj){
    obj.name = "Nicholas";
}

var person = new Object();
setName(person);
alert(person.name); // "Nicholas"
function setName(obj){
    obj.name = "Nicholas";
    obj = new Object();
    obj.name = "Greg";
}

var person = new Object();
setName(person);
alert(person.name); // "Nicholas"

如果person是按引用传递的,那么person就会自动被修改为指向其name属性值为"Greg"的新对象。

 

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

5.执行环境及作用域

执行环境是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>

每个环境都可以向上搜索作用域链,以查询变量和函数名;但任何环境都不能通过向下搜索作用域链而进入另一个执行环境。在这里,如果去掉var name = "trigkit4",那么将弹出“Jack”

闭包

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

var a = function() {
  var largeStr = new Array(1000000).join(‘x‘);
  return function() {
    return largeStr;
  }
}();
时间: 2024-11-09 08:12:38

详解JS变量、作用域、内存的相关文章

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

详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4 原文出处: trigkit4 基本类型值有:undefined,NUll,Boolean,Number和String,这些类型分别在内存中占有固定的大小空间,他们的值保存在栈空间,我们通过按值来访问的. JavaScript 1 2 (1)值类型:数值.布尔值.null.undefined. (2)引用类型:对象.数组.函数. 如果赋值的是引用类型的值,则必须在堆内存中为这个值分配空间.由于这种值的大小不固定(对象有很多属性和方

js变量作用域内存

基本数据类型: undefined;null;boolean;number;string这五种基本类型是按值访问的,因为可以操作保存在变量中的实际的值 引用数据类型:object引用数据类型是保存在内存中的对象,javascript不允许直接访问内存中的位置,也就是不能直接操作对象的内存空间,在操作对象时,实际操作的是对象的引用,而不是实际的对象(这种说法其实是不严谨的,当复制保存着对象的某个变量时,操作的是对象的引用.但是为对象添加属性时,操作的是实际的对象) 参数传递:javascript中

详解js和jquery里的this关键字

详解js和jquery里的this关键字 js中的this 我们要记住:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象.this对象是在运行时基于函数的执行环境绑定的,在全局环境中,this等于window 先来看个例子: <script> var fullname = "Trigkit4"; var person = { fullname : 'Jack', prop:{ fullname : 'Blizzard', getFullname : fun

详解js中typeof、instanceof与constructor

详解js中typeof.instanceof与constructor typeof返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,string,object,undefined,function.语法为typeof(data) 或 typeof data instanceof则为判断一个对象是否为某一数据类型,或一个变量是否为一个对象的实例;返回boolean类型 语法为 o instanceof A 以下为综合实例: 1<script type

详解js面向对象编程

转自:http://segmentfault.com/a/1190000000713346 基本概念 ECMA关于对象的定义是:”无序属性的集合,其属性可以包含基本值.对象或者函数.“对象的每个属性或方法都有一个名字,而每个名字都映射到一个值. 类 在现实生活中,相似的对象之间往往都有一些共同的组成特征.类,实际上是对象的设计蓝图或者制作配方.我们能基于相同的类创建出许多不同的对象,这些对象又会含有各自的属性和方法. 封装 封装主要用于阐述对象中所包含(或封装的内容),它通常由两部分组成: 相关

js变量作用域

? 1 2 3 4 5 6 7 8 9 10 for(var i =0;i<100;i++)   {        } alert(i);//100 if(true){     var i="91d";   } alert(i);//91d ? 1 2 3 4 5 6 function add(ad1,ad2){   sum=ad1+ad2;   return sum;//如果没有用var声明局部变量,会提升为全局的变量 } alert(add(3,5)); alert(&quo

Bitmap详解与Bitmap的内存优化

感觉这里的排版看着更舒服些 Bitmap详解与Bitmap的内存优化 一.Bitmap: Bitmap是Android系统中的图像处理的最重要类之一.用它可以获取图像文件信息,进行图像剪切.旋转.缩放等操作,并可以指定格式保存图像文件. 常用方法: + public void recycle() // 回收位图占用的内存空间,把位图标记为Dead + public final boolean isRecycled() //判断位图内存是否已释放 + public final int getWid

[刘阳Java]_步步窥探JS变量作用域

今天的这个文章题目名称甚是让人会突发异想.JS变量作用域是务必需要搞懂的,单从面试过程就会让面试者烧脑壳.所以,我们还是写一篇关于JS变量作用域的技术专题,让所有小伙伴能够借此文章去整理JS的基础学习.说不定很多人会比我理解这方面基础知识有更好地见解 黄金守则第一条: JS没有块级作用域(你可以自己闭包或其他方法实现),只有函数级作用域,函数外面的变量函数里面可以找到,函数里面的变量外面找不到 <!doctype html> <html lang="en"> &

详解js的bind、call、apply

详解js的bind.call.apply 说明 虽然bind.call.apply都是js很基础的一块知识,但是我从未认真总结过这三者的区别. 由于公司后端是用的微服务架构,又没有中间层对接,导致前端这边非常难于处理接口数据. 于是我在项目初期封装了一套薄弱的api方法充当中间层的作用,还有为了让后端接口字段命名统一,也单独封装了一套方法用来统一每个微服务字段返回名. 但是,随着业务的增加,代码出现强耦合现象,到最后薄弱的中间层已经撑不住了,连代码的审视都变得很麻烦. 最后不得以重新设计这套ap