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 相关文章推荐
js之onload事件的一点使用心得
Aug 14 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 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
PHP游戏编程25个脚本代码
2011/02/08 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
javascript 常用方法总结
2009/06/03 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python File readlines() 使用方法
2018/03/19 Python
python机器学习之KNN分类算法
2018/08/29 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
会计岗位职责
2013/11/08 职场文书
教师业务学习制度
2014/01/25 职场文书
教师工作态度自我评价
2015/03/05 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
检讨书之工作不认真
2019/08/14 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
python入门学习关于for else的特殊特性讲解
2021/11/20 Python
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript