您的位置:首页> 前端教程> JS教程
文章导航

JavaScript值类型和引用类型

2018-8-28 01:39| 作者: admin| 查看: 1329| 评论: 0|来自: 蚂蚁部落

JavaScript中对值类型和引用类型最为重要的知识点之一。

如果对它没有良好的掌握,那么JavaScript很多代码运行现象将无法解释,当然也就无法顺畅进行开发。

首先看一段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let obj={
    webName:"蚂蚁部落",
    address:"青岛市南区"
}
let newObj=obj;
newObj.webName="antzone";
console.log(obj.webName);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/28/014010w6idsi4m3ws4ggkz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码中,我们修改的是newObj对象的webName属性值,为何obj对象的相应属性值也发生了改变。

如果掌握了值类型和引用类型,那么就很容易理解出现上述结果的原因。

下面就通过通俗易通的语言介绍一下值类型数据与引用类型数据的各自特征。

一.值类型数据:

值类型数据通俗的讲就是简单的数据段,JavaScript存在六种基本类型:

(1).string

(2).number

(3).boolean

(4).symbol(ES2015

(5).null

(6).undefined值类型数据存储在栈内存中,值类型数据直接存储在变量中。

代码如下:

[JavaScript] 纯文本查看 复制代码
let webName="蚂蚁部落";

字符串是一个值类型数据,在内存中的存储图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/28/014100tzjhb5haqljnd2dt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

值类型数据直接存储在变量中。

下面我们再来进行如下操作,代码如下:

[JavaScript] 纯文本查看 复制代码
let webName="蚂蚁部落";
let str=webName;

代码将变量webName赋值给变量str,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/28/014252qbz96axybub9696w.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

值类型数据赋值,是将实际值复制一份给对应的变量。

上面的代码中,会将变量webName的值"蚂蚁部落"复制一份,然后赋值给变量str。

两个值类型数据是完全独立的,操作其中的一个数据不会影响到另一个。

二.引用类型数据:

引用类型数据通常是由多个值构成,比如一个对象多个方法或者多个属性。

引用类型数据与值类型数据在内存中的存储方式有很大区别。

值类型数据存储在栈内存中,而引用类型数据在栈内存中存储的是一个地址。

此地址指向堆内存中数据的实际存储的内存地址。

代码实例如下:

[JavaScript] 纯文本查看 复制代码
let obj={
    webName:"蚂蚁部落",
    address:"青岛市南区"
}

在内存中的存储图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/28/014334oyc2j79wycnnjn7o.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

也就是说变量obj中存储的不是数据本身,而是指向实际数据的内存地址。

继续进行操作,代码如下:

[JavaScript] 纯文本查看 复制代码
let obj={
    webName:"蚂蚁部落",
    address:"青岛市南区"
}
let newObj=obj;

在内存中的存储图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/28/014415p9dkgzsqqwikihiz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

newObj=obj其实是将实际数据的内存地址赋值给变量newObj。

也就是说这两个变量指向同一个实际数据,那么文章开头举得例子就非常好理解了。

因为是指向同一个对象,所以修改就等同于修改obj。

三.包装对象:

前面说过,值类型数据是一个简单的数据段,引用类型的数据是由多值构成,比如具有方法或者属性。

但是为什么如下代码可以正常运行呢:

[JavaScript] 纯文本查看 复制代码运行代码
let webName="蚂蚁部落";
console.log(webName.length);

可以正常输出字符串的长度。

为什么值类型数据也具有属性呢,这是因为字符串会临时包装成一个对象。

当代码执行完毕后,此对象就会释放。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部