JavaScript中的原始值和复杂值


Posted in Javascript onJanuary 07, 2016

 前面的话

javascript的数据类型可以分为两种:原始类型和引用类型。原始类型也称为基本类型或简单类型,javascript基本数据类型包括Undefined、Null、Boolean、Number和String五种,而引用类型也称为复杂类型,在Javascript中是Object。与此相对应,它们的值也分别被称为原始值和复杂值

特性

原始值(primitive value)

简单的说:原始值是固定而简单的值,是存放在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置.

原始值是表示Javascript中可用的数据或信息的最底层形式或最简单形式。原始类型的值被称为原始值,是因为它们是不可细化的。也就是说,数字是数字,字符是字符,布尔值则是true或false,null和undefined就是null和undefined。这些值本身很简单,不能表示由其他值组成的值

有哪些类型是原始类型呢?

原始类型(primitive type)有以下五种类型:Undefined,Null,Boolean,Number,String

我们可以使用typeof来判断一个是否在某个类型的范围内.

typeof运算符

对变量或值使用typeof运算符将会返回下列值之一:

JavaScript中的原始值和复杂值

注意:

1.返回值为字符串类型.

2.和原始类型比,还差了个null,这个比较特殊,使用typeof(null),返回的是"object",我们将null理解成是object的占位符.

复杂值

复杂值可以由很多不同类型的javascript对象组成。复杂对象其在内存中的大小是未知的,因为复杂对象可以包含任何值,而不是一个特定的已知值

存储方式

栈存储

因为原始值占据空间固定,是简单的数据段,为了便于提升变量查询速度,将其存储在栈(stack)中

堆存储

由于复杂值的大小会改变,所以不能将其存放在栈中,否则会降低变量查询速度,因此其存储在堆(heap)中,存储在变量处的值是一个指针,指向存储对象的内存处

JavaScript中的原始值和复杂值

访问方式

按值访问

原始值是作为不可细化的值进行存储和操作的,引用它们会转移其值

var myString = 'foo';
var myStringCopy = myString;
var myString = null;
console.log(myString,myStringCopy);//null,'foo'

引用访问

复杂值是通过引用进行存储和操作的,而不是实际的值。创建一个包含复杂对象的变量时,其值是内存中的一个引用地址。引用一个复杂对象时,使用它的名称(即变量或对象属性)通过内存中的引用地址获取该对象值

var myObject = {};
var copyOfMyObject = myObject;//没有复制值,而是复制了引用
myObject.foo = 'bar';//操作myObject中的值
//现在如果输出myObject和copyOfMyObject,则都会输出foo属性,因为它们引用的是同一个对象
console.log(myObject,copyOfMyObject);//Object{foo="bar"}

比较方式

原始值采用值比较,而复杂值采用引用比较。复杂值只有在引用相同的对象(即有相同的地址)时才相等。即使是包含相同对象的两个变量也彼此不相等,因为它们并不指向同一个对象

var price1 = 10;
var price2 = 10;
var price3 = new Number('10');
var price4 = price3;
console.log(price1 == price2);//true
console.log(price1 == price3);//false
price4 = 10;
console.log(price4 == price3);//true
console.log(price4 === price3);//false 
var objectFoo = {same:'same'};
var objectBar = {same:'same'};
console.log(objectFoo == objectBar);//false
var objectA = {foo: 'bar'};
var objectB = objectA;
console.log(objectA == objectB);//true

动态属性

对于复杂值,可以为其添加属性和方法,也可以改变和删除其属性和方法;但简单值不可以添加属性和方法

复杂值支持动态对象属性,因为我们可以定义对象,然后创建引用,再更新对象,并且所有指向该对象的变量都会获得更新。一个新变量指向现有的复杂对象,并没有复制该对象。这就是复杂值有时被称为引用值的原因。复杂值可以根据需求有任意多个引用,即使对象改变,它们也总是指向同一个对象

var str = 'test';
str.property = true;
console.log(str.property);//undefined  
var objA = {property: 'value'};
var pointer1 = objA;
var pointer2 = pointer1;
objA.property = null;
console.log(objA.property,pointer1.property,pointer2.property);//null null null

包装类型

原始值被当作构造函数创建的一个对象来使用时,Javascript会将其转换成一个对象,以便可以使用对象的特性和方法,而后抛弃对象性质,并将它变回到原始值

Javascript 相关文章推荐
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
javascript闭包的理解
Apr 01 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
理解JS事件循环
Jan 07 #Javascript
angularjs创建弹出框实现拖动效果
Aug 25 #Javascript
JavaScript中定义类的方式详解
Jan 07 #Javascript
javascript类型系统 Window对象学习笔记
Jan 07 #Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 #Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 #Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 #Javascript
You might like
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
基于Python解密仿射密码
2019/10/21 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
GMP办公室主任岗位职责
2014/03/14 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
爱牙日活动总结
2014/08/29 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
导游词之西安骊山
2019/12/03 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
MySQL 全文检索的使用示例
2021/06/07 MySQL
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
Python使用永中文档转换服务
2022/05/06 Python