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

基本类型值和引用类型的值

关键词:引用类型的值(对象),基本类型的值(原始值),按值访问,按引用访问

ECMAScript变量可能包含两种不同数据类型的值:基本类型值和引用类型值。

  • 基本类型值,指的是简单的数据段。
  • 引用类型的值,指那些可能有多个值构成的对象。

将值赋给一个变量时,解析器必须确定这个值是基本类型的值还是引用类型值。5种基本数据类型(Undefined,Null,Boolean,Number,String)是按值访问的,因此,可以操作保存在变量中的实际值。而引用类型的值是保存在内存中的对象。与其他语言不同,JavaScript不允许直接访问内存中的位置的,也就是说不能直接操作对象的内存空间。在操作对象时,实际上是在操作对象的引用而不是实际的对象。为此,引用类型的值是按引用访问的(当复制保存着对象的某个变量时,操作的是对象的引用。但是在为对象添加属性的时候,操作的是实际的对象)。

动态的属性

  • 只能给引用类型之动态添加属性。
var person = new Object();
person.name = "Nicholas";
alert(person.name); // Nicholas

//我们不能给基本类型的值添加属性,尽管不会导致任何错误。
var name = "Nicholas";
name.age = 27;
alert(name.age); // undefined

根本的一个原因在于:原始值是不可更改的:任何方法无法更改(或“突变”)一个原始值。字符串作为基本数据类型之一,同样是如此:JavaScript禁止通过索引修改字符串的字符。字符串中所有的方法看上去返回了一个修改后的字符串,实际上返回的是一个新的字符串的值。总之,原始值不可变,对象引用可变。

var o = {x:1};
o.x = 2;
o.y = 2;
var a = [1,2,3];
a[0] = 0;
a[3] = 4;

var s = "hello";
s.toUpperCase();   //返回"HELLO",没改变s的值
s                             //  => "hello"

复制变量值

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来访问这个属性。

传递参数

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"的新对象。
这说明,即使在函数内部修改了参数的值,但原始的引用仍然保持未变。实际上,当函数内部重写obj时,这个变量引用的就是一个局部对象了。这个局部对象在函数执行完毕后立即被销毁。

执行环境及作用域

关键词:变量对象、全局执行环境、作用域链、活动对象

每个函数都有自己的执行环境。每个执行环境都有与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。

在Web浏览器中,全局执行环境被认为是window对象,因此所有全局变量和函数都是作为window对象的属性和方法创建。某个执行环境的所有代码执行完毕后,该环境被销毁,保存在其中的所有变量的属性和函数定义也随之销毁(全局执行环境直到应用程序退出——关闭网页或浏览器——时才会被销毁)。

当代码在一个环境中执行时,会创建变量对象的一个作用域链。用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链前端,始终都是当前执行的代码所在环境的变量对象。

环境是函数,则将其活动对象作为变量对象。活动对象最开始时只包含一个变量,即arguments对象(这个对象在全局环境中是不存在的)。

函数参数也被当作变量来对待,访问规则与执行环境中其他变量相同。

延长作用域链

  • try-catch语句的catch
  • with语句

没有块级作用域

注意变量提升、缺乏声明时造成全局变量。

垃圾收集

垃圾回收

垃圾回收
javascript具有垃圾回收的机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。其余的不多说,我们来分析一下函数中局部变量的正常生命周期。局部变量只在函数执行过程中存在。而在这个过程中,会为局部变量在栈(或堆)内存上分配相应的空间,以便存储他们的值。然后在函数中使用这些变量,直到函数结束。此时,局部变量就没有存在的必要了,因此可以释放他们所占的内存以供他们使用。现在各大浏览器通常用采用的垃圾回收有两种方法:标记清除、引用计数。

标记清除

这是javascript中最常用的垃圾回收方式。当变量进入执行环境是,就标记这个变量为“进入环境”。从逻辑上讲,永远不能释放进入环境的变量所占用的内存,因为只要执行流进入相应的环境,就可能会用到他们。当变量离开环境时,则将其标记为“离开环境”。

垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后,它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作,销毁那些带标记的值,并回收他们所占用的内存空间。

引用计数

另一种不太常见的垃圾回收策略是引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时,则这个值的引用次数就是1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数就减1。当这个引用次数变成0时,则说明没有办法再访问这个值了,因而就可以将其所占的内存空间给收回来。这样,垃圾收集器下次再运行时,它就会释放那些引用次数为0的值所占的内存。

但是用这种方法存在着一个问题,下面来看看代码:

function problem(){
     var objA = new Object();
     var objB = new Object();
     objA.someOtherObject  = objB;
     objB.anotherObject = objA;
}

在这个例子中,objA和objB通过各自的属性相互引用;也就是说这两个对象的引用次数都是2。在采用引用计数的策略中,由于函数执行之后,这两个对象都离开了作用域,函数执行完成之后,objA和objB还将会继续存在,因为他们的引用次数永远不会是0。这样的相互引用如果说很大量的存在就会导致大量的内存泄露。

我们知道,IE中有一部分对象并不是原生JavaScript对象。例如,其BOM和DOM中的对象就是使用C++以COM(Component Object Model,组件对象)对象的形式实现的,而COM对象的垃圾回收器就是采用的引用计数的策略。因此,即使IE的Javascript引擎使用标记清除的策略来实现的,但JavaScript访问的COM对象依然是基于引用计数的策略的。说白了,只要IE中涉及COM对象,就会存在循环引用的问题。看看下面的这个简单的例子:

var element = document.getElementById("some_element");
var myObj = new Object();
myObj.element = element;
element.someObject = myObj;

我们知道,IE中有一部分对象并不是原生JavaScript对象。例如,其BOM和DOM中的对象就是使用C++以COM(Component Object Model,组件对象)对象的形式实现的,而COM对象的垃圾回收器就是采用的引用计数的策略。因此,即使IE的Javascript引擎使用标记清除的策略来实现的,但JavaScript访问的COM对象依然是基于引用计数的策略的。说白了,只要IE中涉及COM对象,就会存在循环引用的问题。看看下面的这个简单的例子:

var element = document.getElementById("some_element");
var myObj = new Object();
myObj.element = element;
element.someObject = myObj;

上面这个例子中,在一个DOM元素(element)与一个原生JavaScript对象(myObj)之间建立了循环引用。其中,变量myObj有一个名为element的属性指向element;而变量element有一个名为someObject的属性回指到myObj。由于循环引用,即使将例子中的DOM从页面中移除,内存也永远不会回收。

不过上面的问题也不是不能解决,我们可以手动切断他们的循环引用

myObj.element = null;
element.someObject = null;

内存管理

使用JavaScript编程,我们一般都不需要管内存回收的问题,如果说想要写出高水平的代码还是有点问题值得注意。一个主要问题就是分配给WEB浏览器的可用内存通常比分配给桌面应用程序要少。这样做的目的主要是出自于安全方面的考虑,目的是防止运行JavaScript的网页耗尽全部系统内存导致系统崩溃。内存限制问题不仅会影响给变量分配内存,同时还会影响调用栈以及在一个线程中能够同时执行的语句的数量。

因此,确保占用最少的内存可以让页面获得更好的性能。而优化内存占用的最佳方式,就是执行中的代码只保存必要的数据。一旦数据不在有用,最好通过将其值设置为null来释放其引用——这个做法叫解除引用。这一做法适合于大多数全局变量和局部变量的属性。局部变量会在他们离开执行环境的时候自动被解除引用,下面来看看代码:

 function createPerson(name){
       var localPerson = new Object();
       localPerson.name = name;
       return localPerson;
}
var globalPerson = createPerson("Tracy");
globalPerson = null; //手工解除引用

在这个例子中,变量globalPerson取得了createPerson()函数的返回值。在createPerson()函数内部,我们创建了一个对象并将其值赋给局部变量localPerson,然后又为局部变量添加了一个名为name 的属性。最后,当调用这个函数的时候,localPerson以函数值的形式返回并赋值给globalPerson。由于localPerson在createPerson()函数执行完毕后就离开了执行环境,因此无需我们显示地去为他们解除引用。但是对于globalPerson而言,则需要我们不使用它的时候手动为他解除引用。

不过,解除一个值的引用并不意味着自动回收该值所占的内存。解除引用的真正作用是让值脱离执行环境,以便垃圾收集器下次运行时将其回收。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容