JavaScript的引用数据类型-Object类型

朴灿烈づ我的快乐病毒、 2022-05-15 14:36 268阅读 0赞

什么是引用数据类型？它和基本数据类型有什么区别？  
　　我们知道JavaScript有Number，Boolean，String，undefined，null这几种基本数据类型，但是，其实呢在这几种基本数据类型之外还有几个引用数据类型，这些引用类型我们一般把它们称为对象定义，因为他们描述的是一类对象所具有的属性和方法。（引用类型与类很相似，但是它并不是传统意义的类，所以本文不用类来称呼它。）  
　　基本数据类型和引用数据类型的区别：  
　　　1.基本数据类型是按值访问的，因为可以直接操作保存在变量中的实际值。  
　　　2.基本类型的数据是存放在栈内存中的，而引用类型的数据是存放在堆内存中的。  
　　我们先说第一点：

//基本数据类型
    var a=10;
    var b=a;
    b=20;
    conso.log(a);//10
    conso.log(b);//20
    //引用数据类型
    var obj1=new Object();
    obj.name="小明";
    var obj2=obj1;
    obj2.name="小红";
    console.log(obj.name);//小红
    console.log(obj1.name);//小红
    }

从上面我们可以看出来，基本数据类型只是a和b就只是简单的赋值关系，b变成什么值和a没有半毛钱关系，但是下面的就不一样，obj2把它的name属性给改了，obj1的也跟着改，这是因为obj和obj2指向了同一个堆内存对象，obj1赋值给onj2，实际上这个堆内存对象在栈内存的引用地址复制了一份给了obj2，但是实际上他们共同指向了同一个堆内存对象。实际上改变的是堆内存对象。  
基本数据类型内存表示类似这种：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQ5MzM2_size_16_color_FFFFFF_t_70]  
引用数据类型内存表示类似这种：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQ5MzM2_size_16_color_FFFFFF_t_70 1]  
说完了这两种数据类型的区别，下面我们来分别介绍这几种引用类型。  
**1.Object类型**  
Object类型使我们在JavaScript之中用到的最多的类型，虽然它的实例  
1.创建Object实例的方式：  
第一种：使用new操作符后跟Object构造函数。上面的例子就是用的这种方法。  
第二种：使用字面量的方式表示。例如：

var obj1={
    name:"小明"
    }

他们两者使用起来是完全一样的，但是需要知道的是通过对象字面量创建对象时不会调用Object构造函数的.  
2.访问对象属性的方法：  
第一种：点表示法。  
第二种：方括号表示法。

alert(obj1.name);//点表示法
    alert(obj1['name']);//方括号表示法

他们两者在功能上没有任何区别，但是方括号有一个优点就是可以通过变量来访问属性。  
还有就是方括号表示法应该将访问的属性以字符串的形式放在方括号中。

var myname= 'name';
    alert(obj1[myname]); //小明
    person['first name'] = '王';

由于’first name’中包含一个空格，所以不能使用点表示法来访问它。然而，属性名中时可以包含非字母非数字点，这时候就可以使用方括号来访问它们，除非必要使用变量来访问属性，否则我还是建议使用点表示法，方便，简单，快捷。

下一篇：[JavaScript的引用数据类型-Array类型 ][JavaScript_-Array_]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQ5MzM2_size_16_color_FFFFFF_t_70]: /images/20220503/80fc77ea3ec849ae8811cd69f1dd1fa3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQ5MzM2_size_16_color_FFFFFF_t_70 1]: /images/20220503/19a1e8b80a734e58a3a8873fac736d9c.png
[JavaScript_-Array_]: https://blog.csdn.net/qq_38349336/article/details/83573698