美文网首页web前端基础
JS数据类型具体分析

JS数据类型具体分析

作者: 蜗牛_Cy | 来源:发表于2018-07-29 14:46 被阅读0次

在前面的一个章节中,我们讲了JavaScript数据类型有哪些以及他们之间的区别。在其中我提到过JS 数据类型有分为简单数据类型和引用数据类型。
今天,我就具体分析什么是简单数据 类型和引用数据类型。

回顾JS数据类型

js 数据类型一共有8种,分别是Undefined、null、number、boolean、string、arry、object、function。
其中

  • 简单数据类型有:Undefined、null、number、boolean、string;
  • 复杂数据类型:arry、object、function。

一个小例子

var a=1;
var b=a;
console.log(a+' '+b);   // 输出1 1
b=2
console.log(a+' '+b);  // 输出1 2
var  a=[1,2,3];
var b=a;
console.log(a+' '+b);  //输出 1,2,3 1,2,3
a[0]=['a']
console.log(a+' '+b);  // 输出 a,2,3 a,2,3
var  a=[1,2,3];
var b=a;
console.log(a+' '+b);  //输出 1,2,3 1,2,3
a=['a','b','c']
console.log(a+' '+b);  // 输出 a,b,c 1,2,3

观察上面小例子 ,发现了奇怪 的现象。
出现上面现象的主要原因是js对内存分配不同导致的。

数据类型

数据类型有:Number、String 、Boolean、Null和Undefined。基本数据类型是按值访问的,因为可以直接操作保存在变量中的实际值。

var a = 10;
var b = a;
b = 20;

上面例子中,var a=10 对a分配知道内存地址并赋值10。var b=a 给b分配一个内存并将a的值拷贝给b
b只是保存了a复制的一个副本。所以,b的改变,对a没有影响。

下面演示内存分配时,内存的变化。


image.png

引用类型

也就是对象类型Object type,比如:Object 、Array 、Function 、Data等。

var obj1 = new Object();
var obj2 = obj1;
obj2.name = "我有名字了";
console.log(obj1.name); // 我有名字了

说明这两个引用数据类型指向了同一个堆内存对象。obj1赋值给onj2,实际上这个堆内存对象在栈内存的引用地址复制了一份给了obj2,

但是实际上他们共同指向了同一个堆内存对象。实际上改变的是堆内存对象。

下面我们来演示这个引用数据类型赋值过程:

image.png

总结区别

声明变量时不同的内存分配:
  1. 原始值:存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。这是因为这些原始类型占据的空间是固定的,所以可将他们存储在较小的内存区域 – 栈中。这样存储便于迅速查寻变量的值。

  2. 引用值:存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存地址。这是因为:引用值的大小会改变,所以不能把它放在栈中,否则会降低变量查寻的速度。相反,放在变量的栈空间中的值是该对象存储在堆中的地址。地址的大小是固定的,所以把它存储在栈中对变量性能无任何负面影响。

不同的内存分配机制也带来了不同的访问机制
  1. 在javascript中是不允许直接访问保存在堆内存中的对象的,所以在访问一个对象时,首先得到的是这个对象在堆内存中的地址,然后再按照这个地址去获得这个对象中的值,这就是传说中的按引用访问。
  2. 而原始类型的值则是可以直接访问到的。
  3. 复制变量时的不同
  • 原始值:在将一个保存着原始值的变量复制给另一个变量时,会将原始值的副本赋值给新变量,此后这两个变量是完全独立的,他们只是拥有相同的value而已。
  • 引用值:在将一个保存着对象内存地址的变量复制给另一个变量时,会把这个内存地址赋值给新变量,也就是说这两个变量都指向了堆内存中的同一个对象,他们中任何一个作出的改变都会反映在另一个身上。(这里要理解的一点就是,复制对象时并不会在堆内存中新生成一个一模一样的对象,只是多了一个保存指向这个对象指针的变量罢了)。多了一个指针
  1. 参数传递的不同(把实参复制给形参的过程)
    首先我们应该明确一点:ECMAScript中所有函数的参数都是按值来传递的。
    但是为什么涉及到原始类型与引用类型的值时仍然有区别呢?还不就是因为内存分配时的差别。
  • 原始值:只是把变量里的值传递给参数,之后参数和这个变量互不影响。
  • 引用值:对象变量它里面的值是这个对象在堆内存中的内存地址,这一点你要时刻铭记在心!

因此它传递的值也就是这个内存地址,这也就是为什么函数内部对这个参数的修改会体现在外部的原因了,因为它们都指向同一个对象。

相关文章

  • JS数据类型具体分析

    在前面的一个章节中,我们讲了JavaScript数据类型有哪些以及他们之间的区别。在其中我提到过JS 数据类型有分...

  • JS的类型转换

    JS的数据类型: 首先, JS的数据类型分为基本数据类型和引用数据类型基本数据类型: string number ...

  • js对象数组的深拷贝方法以及其他方法

    js判断数据类型是否为对象 js判断数据类型是否为数组

  • 2022前端面试题汇总(附答案)更新中

    JS相关 1.JS中的数据类型 (1)数据类型分为基本数据类型和引用数据类型基本数据类型:number、null、...

  • js深拷贝

    在写深拷贝之前,有必要说一下js的数据类型 一.js数据类型 1.1 分类 js数据类型分为两类:原始数据类型、引...

  • js数据类型

    JS基本数据类型和引用数据类型(JS 基本数据类型和引用数据类型的区别及浅拷贝和深拷贝) 再讲 js 的基本数据类...

  • js入门知识点

    * 基础知识 * js的输出方式 * js的组成 * js的命名规范 * 数据类型 * number数据类型 * ...

  • js常见知识点

    一、 js基本数据类型和引用数据类型 js基本数据类型:Number、String、Boolean、Null、un...

  • JS数据类型判断

    js中可以通过typeof来判断基本的数据类型。 数据类型 js的数据类型分为基本数据类型和引用数据类型,基本数据...

  • JS 高频面试题汇总

    # 说一下JS 中的数据类型有哪些 JS 数据类型包括 基本 / 引用 / 特殊 数据类型: 基本数据类型:Str...

网友评论

    本文标题:JS数据类型具体分析

    本文链接:https://www.haomeiwen.com/subject/xnaamftx.html