浅谈变量中的数据类型

变量的值

ECMAScript 变量可能包含两种不同数据类型的值:

  • 基本类型值:string , number , boolean , undefined , null
  • 引用类型值:object

堆和栈

在理解它们之间的差异之前,我们先需要来了解一下关于堆和栈的概念

  • 基本类型的变量的存储只利用栈区
    可以看看这个例子
    var name = 'Sumi';
    var age = '22';
    var city = 'ShangHai';
    
    可以看一下下图方便理解
    基本类型的变量存放在栈区

    栈区包括了变量的标识符
  • 引用类型的变量的存储要同时利用到栈区堆区

这里是一个简单例子

var person1 = new Object();
var person2 = new Object();
var person3 = new Object();
 ```
![对象赋值的变量同时要用到堆区和栈区](http://upload-images.jianshu.io/upload_images/2964515-2a1dc8421490bad7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
每次`new`一个对象的时候,都会在堆区中新建一个对象,所以这里是三个不同的对象,分别赋值给了person1、person2、person3这三个变量

 -   **栈区**保存的是对对象的**引用**(变量的标识符(名字)、指针(即该对象在堆内存的地址))
 -   **堆区**保存的是对象的**值**(属性、方法) 

####分析和总结

>   JavaScript 不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。在操作对象时,实际上是在操作对象的引用而不是实际的对象(这句话不太严谨,当复制保存着对象的某个变量时,操作的是对象的引用。但在为对象添加属性时,操作的是实际的对象)

先贴上高程里面对于对象的总结,这里的指针可能对于很多人来说不太好理解,我们采用一种较为形象的方式来便于理解
-   对于基本数据变量:可以理解为一个`p`标签,标签里面是它的内容,即变量的值,它的值是显而易见的显示在网页上面的,你可以直接在这个网页看到`p`的内容
-   对于引用数据变量:可以理解为一个`a`标签,`a`标签有一个`href`属性包含了一个链接,只有当你通过这个链接访问到另外一个网页的时候,才能看到另外网页的真正内容,在当前页是无法查看到的。这里的栈区保存的指针可以理解为`a`标签的`href`的属性,另外一个网页的内容可以理解为堆区的对象
 >   对于`a`标签来说,只有通过`href`里面的链接访问进另外一个网页,才能看到另外一个网页真正的内容
 >   对于对象复制的变量来说,只有通过栈区的指针访问进堆区的对象,才能获取到对象的值


##基本类型变量特性
1.   基本类型的值是**不可变**的,也不能给基本类型添加属性和方法
 -   任何方法都无法改变一个基本类型的值,比如这里有一个字符串:
     ```javascript
     var name = 'Sumi';
     name.toUpperCase();
     console.log(name);      //'Sumi'
     ```
     最后输出时会发现原始的name并未发生改变,这里调用了toUpperCase()方法后,返回的是一个新的字符串

 -   **不能**给基本类型添加属性和方法,再次说明基本类型不可变
     ```javascript
     var person = 'Sumi';
     person.age = 22;
     console.log(person.age);        //undefined
     person.method = function(){};
     console.log(person.method);     //undefined
     ```
2.   基本类型的变量的存储只利用**栈区**

3.   基本类型的比较是**值**和**数据类型**比较,只有在值和数据类型都相等的时候它们才全等(`===`)
 不过有个例子很容易让人混淆
 ```javascript
 var a = 1;
 var b = true;
 console.log( a == b );          //true
 ```
 这里涉及到了数据类型转换和`==`运算符的知识,它们等于不代表全等

##引用类型变量特性
1.   引用类型的值是**可变**的
 我们可为为引用类型动态地添加属性和方法,也可以动态地删除其属性和方法
 ```javascript
 var person = new Object();
 person.name = 'Sumi';           //给变量动态添加属性name
 person.sayName = function(){    //给变量动态添加方法sayName
     console.log(person.name);
 };
 person.sayName();               //'Sumi'

 delete person.name;             //动态删除变量的属性name
 console.log(person.name);       //undefined
 ```

2.   引用类型的变量的存储要同时利用到**栈区**和**堆区**

3.   引用类型的比较是**栈区存储的指针**和**堆区存储的对象的值**的比较,只有在这两者相等时,它们才全等(`===`)
```javascript
var person1 = new Object();
var person2 = new Object();
console.log( person1 == person2 );    //false

就像上文中说到的,每次new一个对象时,都会在堆区新建一个对象,那么person1和person2的指向是不同的,它们分别指向了两个对象,所以结果为false

变量的复制原理以及访问类型

其实复制原理可以算作是特性里面的内容,由于这里需要设计到访问类型,特意拿出来做一个比较明显的对比

对于基本类型变量来说(按值访问)

从一个变量向另一个变量复制基本类型的值,会在变量对象上创建一个新值,然后把该值复制到为新变量分配的位置上,两个变量的值相互独立,互不影响

来看一个例子:

var num1 = 5;
var num2 = num1;
num2 = 4;
console.log(num1);    //5
基本类型变量复制:前后栈区对比

在这里,将num1复制给了num2,会在num1上新建一个变量num2,当我修改num2的时,num1的是不会受到影响的

对于引用类型变量来说(按引用访问)

当从一个变量向另一个变量复制引用类型的值时,同样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。不同的是,这个值的副本实际上是一个指针(堆内存地址),而这个指针指向存储在堆中的一个对象。复制操作结束后,两个变量实际上将引用堆区的同一个对象,而对象的值都保存在这里,因此,改变其中一个变量的值,就会影响另一个变量的值

来看一个例子:

var obj1 = new Object();
var obj2 = obj1;
obj1.name = 'Sumi';
alert(obj2.name);    //'Sumi'

引用类型变量复制

在这里,obj1栈区存储的指针指向 Object,然后将 obj1 复制给变量 obj2,会使得 obj2 也同时指向 ObjectObject 才是真正的对象,而 obj1obj2 都是对于 Object引用,它们在修改值(属性、方法)的时候都会修改堆区Object 从而使得 obj1 的修改反应到 ob2 身上

对于函数传参(按值访问)

函数传参在也是属于变量的复制

原理就是把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。参数不管是基本类型还是引用类型,都属于按值访问

基本类型变量于上面说过的复制方式相同,这里着重说一下参数为引用类型的情况:
当参数为引用类型时,并不会将对象本身传进函数内,而是会在函数内新建一个局部变量,并将对象的指针复制给函数内的局部变量。此时,局部变量和外部的变量都指向堆区的同一个对象,导致的结果就是内部对于对象的修改会影响到外部变量,外部对于对象的修改也会反应到内部,在函数内的局部变量被重新赋值之前,这种现象都会一直存在。如果函数内的变量被重新赋值,那么外部变量和局部变量的指向将不同,这种现象也会消失

注意:在《高级程序设计》里提出了一个例子来对按引用访问和按值访问进行了区分,如果对例子的描述进行分析会发现,实际上会发现例子并不能证明按引用访问和按值访问的区别,笔者暂时也无法总结出关于按引用访问和按值访问的差别和特性,这里只推荐大家记住相关结论,如果进行深究会很容易把自己绕进去。

小结

关于概念的深抠和总结不太适合初学者,JS作为一门弱类型语言还是会存在很多概念不清楚的地方,咱的目标是清楚原理(变量的值在堆、栈中的存储方式等),知道结论(访问方式是按值访问还是按引用访问)。这也是我这篇文章想表达的意思,你说是不?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容