JavaScript数据类型之基本类型和引用类型的值


Posted in Javascript onApril 01, 2015

ECMAScript变量包含两种不同数据类型的值:基本类型值和引用类型值。基本类型值是简单的数据段,而引用类型值指那些可能由多个值构成的对象。

在将一个值赋给变量时,解析器必须确定这个值是基本类型还是引用类型。基本类型包括如Undefined、Null、Boolean、Number和String,这5种基本类型数据类型是按值访问的,因此可以操作保存在变量中的实际的值;引用类型类型的值是保存在内存中的对象。与其他语言不同,JavaScript不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。在操作对象时,实际上实在操作对象的引用而不是实际的对象,因此,引用类型的值是按引用访问的。

1、动态的属性
    定义基本类型和定义引用类型的方法大相近庭。对于引用类型的值,我们可以为其添加属性和方法,也可以改变和删除其属性和方法,如下:

var person = new Object();

person.name = "zxj";

alert(person.name); //"zxj"    

2、复制变量值

如果从一个变量向另一个变量复制基本类型的值,会在变量对象上创建一个新值,然后将该值复制到为新变量分配的位置上。

var num1 = 5;

var num2 = num1; //5

JavaScript数据类型之基本类型和引用类型的值

 当从一个变量向另一个变量复制引用类型的值时,同样也会将存储在变量对象中的值复制一份放到为新变量分配的内存空间里。不同的是,这个值实际上是一个指针,而这个指针执行存储在堆中的一个对象。复制结束后,两个变量实际上将引用同一个对象。因此,改变其中一个变量,就会影响到另一个变量,如下所示:

var obj1 = new Object();

var obj2 = obj1;

obj1.name = "zxj";

alert(obj2.name); //"zxj"

JavaScript数据类型之基本类型和引用类型的值

3、传递参数

ESMAScript中所有函数的参数都是按值传递的。也就是说,把函数外部的值复制给函数内部的参数,就是把值从一个变量复制到另一个变量一样。基本类型值的传递如同基本类型变量的复制一样。引用类型值的传递,则如同引用类型变量的复制一样。有不少开发者在这一点上可能感到困惑,因为访问变量有按值和按引用两种方式,而参数只能按值传递。

在向参数传递基本类型的值时,被传递的值会被复制给一个局部变量(即命名参数)。如下代码所示:

function addTen(num) {

    num += 10;

    return num;

}

var count = 20;

var result = addTen(count);

alert(count); // 20,没有变化

alert(result); // 30

参数实际上是函数的局部变量。参数num和变量count互不认识,它们仅仅具有相同的值。假如num是按引用传递的,那么变量count的值也将变成30,从而反映函数内部的变化。

在向参数传递引用类型的值时,会把这个值在内存中的地址复制一个给局部变量,因此这个局部变量的变化会反映在函数的外部。在这里我们使用引用类型来看一下:

function setName(obj) {

    obj.name = "zxj";

}

var person = new Object();

setName(person);

alert(person.name); //"zxj"

在这个函数内部,obj和person引用的是同一个对象。换句话说,即使这个对象是按值传递的,obj也会按引用来访问同一个对象。于是,当在函数内部为obj添加name属性后,函数外部的person也会有所反映,因为person指向的对象在堆内存中只有一个,而且是全局对象。很多开发者错误的认为:在局部作用域中修改的对象会在全局作用域中反映出来,就说明参数是按引用传递的。为了证明对象是按值传递的,我们在看看下面这个进过修改的例子:

function setName(obj) {

    obj.name = "zxj";

    obj = new Object();

    obj.name = "sdf";

}

var person = new Object();

setName(person);

alert(person.name);

上面这个例子可以看出,如过person是按引用传递的,那么person就会自动被修改为指向其name属性值为"sdf"的新对象。但是,当接下来再访问person.name时,显示的仍然是"zxj"。这说明即使在函数内部修改了参数的值,但原始的引用仍然保存不变。实际上,当在函数内部重写obj时,这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕时立即销毁。

可以将ECMAScript函数的参数想象成局部变量。

4、检测类型

    虽然在检测基本数据类型时typeof是一个得力助手,但是在检测引用类型时,这个操作符用处却不大。通常,我们并不想知道某个值是对象,而是想知道他是什么类型的对象。为此ECMAScript提供了instanceof操作符,其语法如下:

result = varible instanceof constructor

    如果变量是给定引用类型的实例,那么instanceof操作符会返回true:
alert(person instanceof Object);
Javascript 相关文章推荐
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
JavaScript之Object类型介绍
Apr 01 #Javascript
JS修改iframe页面背景颜色的方法
Apr 01 #Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 #Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 #Javascript
jQuery scrollFix滚动定位插件
Apr 01 #Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 #Javascript
JS获取iframe中longdesc属性的方法
Apr 01 #Javascript
You might like
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
JavaScript 学习技巧
2010/02/17 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
angularjs实现table增加tr的方法
2018/02/27 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
深入探究Django中的Session与Cookie
2017/07/30 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
《在大海中永生》教学反思
2014/02/24 职场文书
创建文明城市倡议书
2015/04/28 职场文书
仙境之桥观后感
2015/06/16 职场文书
《我是什么》教学反思
2016/02/16 职场文书
python基础之类方法和静态方法
2021/10/24 Python
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技