《JavaScript高级程序设计》读书笔记 ---基本类型和引用类型的值

变量、作用域和内存问题

基本类型和引用类型的值
ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值。基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象
在将一个值赋给变量时,解析器必须确定这个值是基本类型值还是引用类型值。第3 章讨论了5 种基本数据类型:Undefined、Null、Boolean、Number 和String。这5 种基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值。
引用类型的值是保存在内存中的对象。与其他语言不同,JavaScript 不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。在操作对象时,实际上是在操作对象的引用而不是实际的对象。
为此,引用类型的值是按引用访问的①。

注:在很多语言中,字符串以对象的形式来表示,因此被认为是引用类型的。ECMAScript 放弃了这一传统。

动态的属性
定义基本类型值和引用类型值的方式是类似的:创建一个变量并为该变量赋值。但是,当这个值保存到变量中以后,对不同类型值可以执行的操作则大相径庭。对于引用类型的值,我们可以为其添加属性和方法,也可以改变和删除其属性和方法。请看下面的例子:

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

以上代码创建了一个对象并将其保存在了变量person 中。然后,我们为该对象添加了一个名为name 的属性,并将字符串值"Nicholas"赋给了这个属性。紧接着,又通过alert()函数访问了这个新属性。如果对象不被销毁或者这个属性不被删除,则这个属性将一直存在。
但是,我们不能给基本类型的值添加属性,尽管这样做不会导致任何错误。比如:
var name = "Nicholas";
name.age = 27;
alert(name.age); //undefined

在这个例子中,我们为字符串name 定义了一个名为age 的属性,并为该属性赋值27。但在下一行访问这个属性时,发现该属性不见了。这说明只能给引用类型值动态地添加属性,以便将来使用。

复制变量值
除了保存的方式不同之外,在从一个变量向另一个变量复制基本类型值和引用类型值时,也存在不同。如果从一个变量向另一个变量复制基本类型的值,会在变量对象上创建一个新值,然后把该值复制到为新变量分配的位置上。来看一个例子:
var num1 = 5;
var num2 = num1;
在此,num1 中保存的值是5。当使用num1 的值来初始化num2 时,num2 中也保存了值5。但num2中的5 与num1 中的5 是完全独立的,该值只是num1 中5 的一个副本。此后,这两个变量可以参与任何操作而不会相互影响。图4-1 形象地展示了复制基本类型值的过程。

当从一个变量向另一个变量复制引用类型的值时,同样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。不同的是,这个值的副本实际上是一个指针,而这个指针指向存储在堆中的一个对象。复制操作结束后,两个变量实际上将引用同一个对象。因此,改变其中一个变量,就会影响另一个变量,如下面的例子所示:
var obj1 = new Object();
var obj2 = obj1;
obj1.name = "Nicholas";
alert(obj2.name); //"Nicholas"
首先,变量obj1 保存了一个对象的新实例。然后,这个值被复制到了obj2 中;换句话说,obj1和obj2 都指向同一个对象。这样,当为obj1 添加name 属性后,可以通过obj2 来访问这个属性,因为这两个变量引用的都是同一个对象。图4-2 展示了保存在变量对象中的变量和保存在堆中的对象之间的这种关系。

传递参数
ECMAScript 中所有函数的参数都是按值传递的。也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。基本类型值的传递如同基本类型变量的复制一样,而引用类型值的传递,则如同引用类型变量的复制一样。有不少开发人员在这一点上可能会感到困惑,因为访问变量有按值和按引用两种方式,而参数只能按值传递
在向参数传递基本类型的值时,被传递的值会被复制给一个局部变量(即命名参数,或者用ECMAScript 的概念来说,就是arguments 对象中的一个元素)。在向参数传递引用类型的值时,会把这个值在内存中的地址复制给一个局部变量,因此这个局部变量的变化会反映在函数的外部。请看下面
这个例子:
function addTen(num) {
num += 10;
return num;
}

var count = 20;
var result = addTen(count);
alert(count); //20,没有变化
alert(result); //30

这里的函数addTen()有一个参数num,而参数实际上是函数的局部变量。在调用这个函数时,变量count 作为参数被传递给函数,这个变量的值是20。于是,数值20 被复制给参数num 以便在addTen()中使用。在函数内部,参数num 的值被加上了10,但这一变化不会影响函数外部的count 变量。参数num 与变量count 互不相识,它们仅仅是具有相同的值。假如num 是按引用传递的话,那么变量count的值也将变成30,从而反映函数内部的修改。当然,使用数值等基本类型值来说明按值传递参数比较简单,但如果使用对象,那问题就不怎么好理解了。再举一个例子:
function setName(obj) {
obj.name = "Nicholas";
}
var person = new Object();
setName(person);
alert(person.name); //"Nicholas"

以上代码中创建一个对象,并将其保存在了变量person 中。然后,这个变量被传递到setName()函数中之后就被复制给了obj。在这个函数内部,obj 和person 引用的是同一个对象。换句话说,即使这个变量是按值传递的,obj 也会按引用来访问同一个对象。于是,当在函数内部为obj 添加name属性后,函数外部的person 也将有所反映;因为person 指向的对象在堆内存中只有一个,而且是全局对象。有很多开发人员错误地认为:在局部作用域中修改的对象会在全局作用域中反映出来,就说明参数是按引用传递的。为了证明对象是按值传递的,我们再看一看下面这个经过修改的例子:
function setName(obj) {
obj.name = "Nicholas";
obj = new Object();
obj.name = "Greg";
}
var person = new Object();
setName(person);
alert(person.name); //"Nicholas"
这个例子与前一个例子的唯一区别,就是在setName()函数中添加了两行代码:一行代码为obj重新定义了一个对象,另一行代码为该对象定义了一个带有不同值的name 属性。在把person 传递给setName()后,其name 属性被设置为"Nicholas"。然后,又将一个新对象赋给变量obj,同时将其name属性设置为"Greg"。如果person 是按引用传递的,那么person 就会自动被修改为指向其name 属性值为"Greg"的新对象。但是,当接下来再访问person.name 时,显示的值仍然是"Nicholas"。这说明即使在函数内部修改了参数的值,但原始的引用仍然保持未变。实际上,当在函数内部重写obj 时,这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后立即被销毁。

时间: 2024-10-11 01:37:45

《JavaScript高级程序设计》读书笔记 ---基本类型和引用类型的值的相关文章

javascript高级程序设计读书笔记2

<!DOCTYPE HTML>//这个网页的文档类型,这个是html5的写法Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype.因此这一文档类型必须出现在项目的每个页面的开始部分 <html lang="en">//这里的lang="en"可以删除,如果不删除的,用谷歌之类打开,它会认为是英文的,会自动给翻译(如果设置了自动翻译的话) 有两个版本的 jQuery 可供下载:Production ver

javascript高级程序设计 读书笔记1

第二章  在HTML中使用JS 加载JS有三种:行内,head头部和外部链接JS   最好使用外部链接<script src="example.js" ></script>(推荐),在script标签中不需要放任何代码,放了也会被忽略.也可以使用<script src="example.js" /> 但是语法不符合HTML规范  所以不要这样写. 在传统做法中,script放在head中,但是会等到加载完JS再执行DOM,页面会延

Javascript高级程序设计读书笔记(第六章)

第6章  面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新对象. 构造函数的问题:每个方法都要在每个实例上重新创建一遍: 理解原型对象: 无论何时,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象.默认情况下,所有原型对象都会自动获得一个constructor属性,这个属性包含一个指向proto

JavaScript高级程序设计-读书笔记(2)

第6章 面向对象的程序设计 创建对象 1.最简单方式创建Object的实例,如 var person = new Object(); person.name = “Greg”; person.age = 27; person.job = ”Doctor”; person.sayName = function() { alert(this.name); }; person. sayName(): 缺点:会产生大量重复代码 2.工厂模式:用函数来封装以特定接口创建对象的细节,如 function c

JavaScript高级程序设计-读书笔记(6)

第20章 JSON JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量 JSON的语法可以表示一下三种类型的值 l        简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串.数值.布尔值和null.但JSON不支持JavaScript中的特殊数值undefined. “Hello world!” l        对象(属性的值可以是简单值,也可以是复杂类型值,如下这样在对象嵌入对象) { “name” : ”Nicholas”, “age” : 29

JavaScript高级程序设计读书笔记之OOP

关于JavaScript创建对象的方式: 1.工厂模式 1 function createPerson(name, age, job){ 2 var o = new Object(); 3 o.name = name; 4 o.age = age; 5 o.job = job; 6 o.sayName = function(){ 7 alert(this.name); 8 }; 9 return o; 10 } 11 var person1 = createPerson("Nicholas&qu

javascript高级程序设计 读书笔记2

第五章 引用类型 对象是引用类型的实例,引用类型是一种数据结构,将数据和功能组织在一起.描述的是一类对象所具有的属性和方法.对象是某个特定引用类型的实例,新对象是使用new操作符后跟一个构造函数俩创建的,构造函数本身就是一个函数,只不过该函数试处于创建新对象的目的而定义的.  eg:    var person = new Object(); 1.创建Object实例的方式有两种   一:new+Object 二:对象字面量 var person = new Object(); var pers

JavaScript高级程序设计-读书笔记(4)

第11章 DOM扩展 1.选择符API Selector API Level 1 的核心是两个方法:querySelector()和querySelectorAll().在兼容的浏览器中,可以通过Document及Element类型的实例调用它们.目前完全支持Selector API Level 1的浏览器有IE 8+. Firefox 3.5+. Safari 3.1+. Chrome和Opera 10+. querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,

JavaScript高级程序设计-读书笔记(3)

第8章 BOM 1.window对象 (1)全局作用域 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象. 所有在全局作用域中声明的变量.函数都会变成window对象的属性和方法. (2)窗口关系及框架 如果界面中包含框架,这每个框架都拥有自己的window对象,并且保存在frames集合中,可以通过数值的索引(从0开始,从左至右,从上到下)或者框架名称来访问相