详解JavaScript基本类型和引用类型

一、值的类型

早在介绍JS的数据类型的时候就提到过基本类型和引用类型，不过在说两种类型之前，我们先来了解一下变量的值的类型。在ECMAScript中，变量可以存在两种类型的值，即原始值和引用值。

(1)原始值

存储在栈中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。

(2)引用值

存储在堆中的对象，也就是说，存储在变量处的值是一个指针，指向存储对象的内存处。

为变量赋值时，ECMAScript的解释程序必须判断该值是原始类型，还是引用类型。要实现这一点，解释程序则需尝试判断该值是否为ECMAScript的基本类型之一，即Undefined类型、Null类型、Boolean类型、Number类型和String类型。由于这些基本类型占据的空间是固定的，所以可将他们存储在较小的内存区域 - 栈中。这样存储便于迅速查寻变量的值。

在许多语言中，字符串都被看作引用类型，而非基本类型，因为字符串的长度是可变的。ECMAScript打破了这一

传统。

如果一个值是引用类型的，那么它的存储空间将从堆中分配。由于引用值的大小会改变，所以不能把它放在栈中，否则会降低变量查寻的速度。相反，放在变量的栈空间中的值是该对象存储在堆中的地址。地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响。如下图所示：



二、基本类型

ECMAScript有5种基本类型，即Undefined类型、Null类型、Boolean类型、Number类型和String类型。ECMA-262把术语类型定义为值的一个集合，每种基本类型定义了它包含的值的范围及其字面量表示形式。

ECMAScript提供了typeof运算符来判断一个值是否在某种类型的范围内。可以用这种运算符判断一个值是否表示一种基本类型：如果它是基本类型，还可以判断它表示哪种基本类型。

基本数据类型和操作符typeof我们在前面的博文中也经常使用到。详细了解的话可以参考这篇文章：详解JavaScript的变量和数据类型。

三、类型转换

所有程序设计语言最重要的特征之一是具有进行类型转换的能力。ECMAScript给开发者提供了大量简单的类型转换方法。大部分类型具有进行简单转换的方法，还有几个全局方法可以用于更复杂的转换。无论哪种情况，在ECMAScript中，类型转换都是简短的一步操作。

(1)转换成字符串

ECMAScript的Boolean值、数字和字符串的原始值的有趣之处在于它们是伪对象，这意味着它们实际上具有属性和方法。

例如，要获得字符串的长度，可以采用下面的代码：

var sbox = "red"; 
document.write(sbox.length);//输出3

尽管 "red" 是基本类型的字符串，它仍然具有属性length，用于存放字符串的大小。总而言之，3 种主要的原始类型Boolean 值、数字和字符串都有 toString() 方法，可以把它们的值转换成字符串。您也许会问，“字符串还有toString()方法吗，这不是多余吗？”是的，的确如此，不过ECMAScript定义所有对象都有toString()方法，无论它是伪对象，还是真对象。因为String类型属于伪对象，所以它一定有toString()方法。

1)Boolean 类型的toString()方法只是输出 "true" 或 "false"，结果由变量的值决定：

var bage=false; 
document.write(bage.toString());//输出"false"

2)Number类型的toString()方法比较特殊，它有两种模式，即默认模式和基模式。采用默认模式，toString()方法只是用相应的字符串输出数字值（无论是整数、浮点数还是科学计数法），在默认模式中，无论最初采用什么表示法声明数字，Number 类型的 toString() 方法返回的都是数字的十进制表示。因此，以八进制或十六进制字面量形式声明的数字输出的都是十进制形式的。如下所示：

var iNum1 = 10; 
var iNum2 = 10.0; 
document.write(iNum1.toString());//输出 "10" 
document.write(iNum2.toString());//输出 "10"

采用Number类型的 toString()方法的基模式，可以用不同的基输出数字，例如二进制的基是2，八进制的基是8，十六进制的基是16。

基只是要转换成的基数的另一种加法而已，它是 toString() 方法的参数：

var iNum = 10; 
document.write(iNum.toString(2));//输出 "1010" 
document.write(iNum.toString(8));//输出 "12" 
document.write(iNum.toString(16));//输出 "a"

(2)转换成数字

ECMAScript提供了两种把非数字的原始值转换成数字的方法，即parseInt()和parseFloat()。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，它们才能正确运行；对其他类型返回的都是NaN。

1)parseInt()

在判断字符串是否是数字值前，parseInt()和 parseFloat()都会仔细分析该字符串。parseInt()方法首先查看位置0处的字符，判断它是否是个有效数字；如果不是，该方法将返回NaN，不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置1处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时parseInt()将把该字符之前的字符串转换成数字。

例如，如果要把字符串 "12345red" 转换成整数，那么parseInt()将返回12345，因为当它检查到字符r 时，就会停止检测过程。

字符串中包含的数字字面量会被正确转换为数字，比如 "0xA" 会被正确转换为数字10。不过，字符串 "22.5" 将被转换成22，因为对于整数来说，小数点是无效字符。

var iNum1 = parseInt("12345red"); 
var iNum2 = parseInt("0xA"); 
var iNum3 = parseInt("56.9"); 
var iNum4 = parseInt("red"); 
document.write("iNum1="+iNum1);//返回12345 
document.write("iNum2="+iNum2);//返回10 
document.write("iNum3="+iNum3);//返回56 
document.write("iNum3="+iNum4);//返回NaN

parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的。

var iNum1 = parseInt("AF", 16); 
var iNum2 = parseInt("10", 2); 
var iNum3 = parseInt("10", 8); 
var iNum4 = parseInt("10", 10); 
document.write("iNum1="+iNum1);//返回175 
document.write("iNum2="+iNum2);//返回2 
document.write("iNum3="+iNum3);//返回8 
document.write("iNum4="+iNum4);//返回10

2)parseFloat()方法

parseFloat()方法与parseInt()方法的处理方式相似，从位置0开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成整数。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的。parseFloat()会把这个小数点之前的字符转换成数字。这意味着字符串"11.22.33"将被解析成11.22。

使用parseFloat()方法的另一不同之处在于，字符串必须以十进制形式表示浮点数，而不是用八进制或十六进制。该方法会忽略前导0，所以八进制数0102 将被解析为102。对于十六进制数0xA，该方法将返回 NaN，因为在浮点数中，x不是有效字符。此外，parseFloat() 方法也没有基模式。

下面是使用 parseFloat() 方法的一些示例：

var fNum1 = parseFloat("12345red"); 
var fNum2 = parseFloat("0xA"); 
var fNum3 = parseFloat("11.2"); 
var fNum4 = parseFloat("11.22.33"); 
var fNum5 = parseFloat("0102"); 
var fNum6 = parseFloat("red"); 
document.write("iNum1="+iNum1);//返回12345 
document.write("iNum2="+iNum2);//返回NaN 
document.write("iNum3="+iNum3);//返回11.2 
document.write("iNum4="+iNum4);//返回11.22 
document.write("iNum5="+iNum5);//返回102 
document.write("iNum6="+iNum6);//返回NaN

(3)强制类型转换

使用强制类型转换来处理转换值的类型。使用强制类型转换可以访问特定的值，即使它是另一种类型的。ECMAScript 中可用的3种强制类型转换如下：

1)Boolean(value) - 把给定的值转换成 Boolean 型；

2)Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；

3)String(value) - 把给定的值转换成字符串；



这些应该很好理解，在学习那些高级程序设计语言的时候经常会能使用到这些。

四、引用类型

引用类型通常叫做类，也就是说，遇到引用值，所处理的就是对象。从传统意义上来说，ECMAScript并不真正具有类。事实上，除了说明不存在类，在ECMA-262中根本没有出现“类”这个词。ECMAScript定义了“对象定义”，逻辑上等价于其他程序设计语言中的类。

对于JS对象的详细解释在前面的博文中也有，参考：轻松学习JavaScript九：JavaScript对象和数组。

我们再来了解一个判断引用类型的操作符instanceof，在使用typeof运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。ECMAScript引入了另一个Java运算符 instanceof 来解决这个问题。instanceof运算符与typeof运算符相似，用于识别正在处理的对象的类型。与typeof方法不同的是，instanceof方

法要求开发者明确地确认对象为某特定类型。

例如：

var oStringObject = new String("hello world"); 
document.write(oStringObject instanceof String);//输出 "true"

这段代码问的是“变量oStringObject是否为 String 对象的实例？”oStringObject的确是 String对象的实例，因此结果是 "true"。尽管不像typeof方法那样灵活，但是在typeof方法返回 "object" 的情况下，instanceof方法还是很有用的。

此外，ECMAScript还有伪对象一说，也就是其他的基本类型，使用new创建时也是可以作为对象的，比如：String对象，Boolean对象和Number对象。它们是基本类型的引用类型。详细了解参考：ECMAScript引用类型。ECMAScript还包含了许多对象，本地对象，内置对象和宿主对象。这些我们会在后面的面向对象的时候具体了解。

五、复制变量值

在变量复制方面，基本类型和引用类型有所不同，基本类型是复制的是值本身，而引用类型复制的是地址。

我们来看具体的实例：

var box="Lee"; 
var box2=box; 
box2="Amy";//重新赋值后，两个基本类型变量操作时互不影响，还是保持各自的独立性 
document.write("box2="+box2+"<br/>"); 
document.write("box="+box);

输出的结果为：Amy

Lee

var box=new Object(); 
box.name="Lee"; 
var box2=box;//把引用地址值复制给box2 
box2.name="Amy";//重新赋值后，两个引用类型都指向同一个对象。name属性只要发生改变都会更改原值。 
document.write(" box2.name="+box2.name+"<br/>"); 
document.write("box.name="+box.name);

输出的结果为：Amy

Amy



以上就是关于JavaScript基本类型和引用类型的详细介绍，希望对大家的学习有所帮助。

您可能感兴趣的文章:

浅析JavaScript基本类型与引用类型
JavaScript数据类型之基本类型和引用类型的值
javascript中基本类型和引用类型的区别分析
跟我学习javascript的基本类型和引用类型
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
JavaScript引用类型和基本类型详解