继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript基本类型与引用类型的区别

为爱心太软
关注TA
已关注
手记 151
粉丝 1.4万
获赞 860

基本概念
截至到ES6,JavaScript 共有七种内置数据类型:

1、空值(null)
2、未定义(undefined)
3、布尔值( boolean)
4、数字(number)
5、字符串(string)
6、对象(object)
7、符号(symbol)

这里面除对象之外,其他统称为“基本类型”,基本类型用于表示简单的数据段。

对象,即“引用类型”,主要包括以下几种“子类型”:Object、Array、Data、RegExp、Function、Boolean、Number、String等,用于表示那些可能由多个值构成的复杂数据结构。

JavaScript 中的变量是没有类型的,只有值才有。变量可以随时持有任何类型的值。

基本类型和引用类型的区别

创建一个变量并为该变量赋值,当这个值保存到变量中以后,对于不同类型值可执行的操作则大相径庭:基本类型可以操作保存在变量中的实际的值;引用类型的值是保存在内存中的对象,JavaScript不允许直接操作对象的内存空间。在操作对象时,实际上是在操作对象的引用而不是实际的对象。具体区别可以分为下面几种情况:

1、添加属性

给基本类型的值添加属性没有任何意义,但也不会导致任何错误。

例子:

var name = "Tom";
name.age = 12;
alert(name.age);
//输出:undefined

可以为引用类型的值添加属性和方法,也可以改变和删除其属性和方法。

例子:

var person={};
person.age=12;
alert(person.age); 
//输出:12

2、复制变量值

从一个变量向另一个变量复制基本类型的值时,实际上是创建一个新值,然后把该值复制给新变量,这两个变量可以参与任何操作而不会相互影响。

例子:

var str1="love";
var str2=str1;
str2=str2.slice(0,2)
alert(str1);
alert(str2);
//输出:love、lo

从一个变量向另一个变量复制引用类型的值时,实际上是为新变量添加一个指针,两个变量的指针指向堆中的同一个对象,改变其中一个变量,就会影响另一个变量。

例子:

var obj1={};
var obj2=obj1;
obj1.name="Tom";
alert(obj2.name);
//输出:Tom

3、传递参数

当向参数传递基本类型的值时,被传递的值会被复制给函数内部的局部变量(即函数的命名参数),因此这个局部变量的变化不会影响函数外部的值。

例子:

var num=1;    
function addOne(n){
    return n+1
}
var result=addOne(num);
alert(result);
alert(num);
//输出:2、1

当向参数传递引用类型的值时,会把这个值在内存中的地址复制给函数内部的局部变量,因此这个局部变量的变化会反映在函数的外部。

例子:

var person={};   
function addName(obj){
    obj.name="Tom";
}
addName(person);
alert(person.name);
//输出:Tom

值复制与值引用的相互转换

通过上面基本类型与引用类型的比较学习,可以得出这样的结论:基本类型值总是通过值复制的方式来赋值 / 传递;引用类型值则总是通过值引用的方式来赋值 / 传递;我们无法自行决定使用值复制还是值引用来赋值/传递,一切由值的类型来决定。

1、如果想通过值复制的方式来传递引用类型值,可以先为引用类型值创建一个复本,这样所有的操作就不会再影响原始值。

例子:

var nums = [1, 2, 3];

function addNum(arr) {
    _nums = arr.slice(0); //创建复本
    _nums.push(4);
    return _nums.length;
}
alert(addNum(nums)); //输出:4
alert(nums.length); //输出:3

2、相反,如果要将基本类型值传递到函数内并进行更改,就需要将该值封装到一个引用类型值(对象、数组等)中,然后通过值引用的方式传递。

例子:

var obj = {
    num: 1
};

function addOne(n) {
    return obj.num += 1;
}
alert(addOne(obj)); //输出:2
alert(obj.num); //输出:2

文中的代码部分,带有“例子”和“测试代码”字样的,只是用来学习或测试某一功能用的代码,不可以直接用于项目的开发中。带有“代码如下”字样的,都是经过本人测试,简单修改即可用于项目开发中的代码,如有错误,欢迎指出。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP