web前端学习702-705（JavaScript 简单类型与复杂类型---简单类型与复杂类型，堆和栈，简单类型的内存分配，复杂类型的内存分配，简单类型传参，复杂类型传参）

最新推荐文章于 2024-08-23 20:55:13 发布

香甜的甲基橙

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量172

点赞数

分类专栏： web前端基础学习笔记 JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_51249285/article/details/124211415

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

JavaScript

41 篇文章 3 订阅

订阅专栏

本文详细介绍了JavaScript中的简单类型（值类型）与复杂类型（引用类型）的区别，包括它们的内存分配和参数传递机制。简单类型如string、number、boolean、undefined和null直接存储在栈中，而复杂类型如对象实例存储在堆中，变量仅保存指向堆中对象的引用。在函数传参时，简单类型会复制值给形参，而复杂类型则复制引用，导致形参和实参共享同一对象。

摘要由CSDN通过智能技术生成

文章目录

JavaScript 简单类型与复杂类型

JavaScript 简单类型与复杂类型

能够说出简单数据类型的内存分配
能够说出复杂数据类型的内存分配
能够说出简单类型如何传参
能够说出复杂类型如何传参

1 简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型︰简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型

string , number , boolean , undefined , null
引用类型∶复杂数据类型，在存储时变量中存储的仅仅是地址(引用)，因此叫做引用数据类型
通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等

2 堆和栈

堆栈空间分配区别:

栈(操作系统）︰由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈; 简单数据类型存放到栈里面
堆(操作系统）∶存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面

在这里插入图片描述

注意: JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言

3 简单类型的内存分配

值类型(简单数据类型) : string , number , boolean , undefined , null
值类型变量的数据直接存放在变量(栈空间)中

在这里插入图片描述

4 复杂类型的内存分配

引用类型(复杂数据类型)∶通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
引用类型变量(栈空间)里存放的是地址，真正的对象实例存放在堆空间中

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //简单数据类型 null返回的是一个空的对象object
    var timer = null;
    console.log(typeof timer);
    //如果有个变量我们以后打算存储为对象，暂时没想好放啥，这个时候就给null
    // 1．简单数据类型是存放在栈里面里面直接开辟一个空间存放的是值
    // 2．复杂数据类型首先在栈里面存放地址十六进制表示 然后这个地址指向堆里面的数据


  </script>
</body>
</html>

在这里插入图片描述

5 简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

function fn(a) {
  a++;
  console.log(a) ;
}
var x = 10 ;
fn(x);
console.log(x);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function fn(a) {
	    a++;
	    console.log(a) ;
    }
    var x = 10 ;
    fn(x);
    console.log(x);
  </script>
</body>
</html>

在这里插入图片描述

作图分析

在这里插入图片描述

6 复杂类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //复杂数据类型传参
    function Person(name) {
      this.name = name;
    }
    function f1(x) { // x =p
      console.log(x.name); // 2．这个输出什么?  刘德华
      x.name ="张学友";
      console.log(x.name);  // 3．这个输出什么?  张学友
    }
    var p = new Person("刘德华");
    console.log(p.name);   // 1．这个输出什么?  刘德华
    f1(p);
    console.log(p.name);    // 4．这个输出什么?   张学友

  </script>
</body>
</html>

在这里插入图片描述

作图分析

在这里插入图片描述

作图软件：之前说到过—Diagram Designer

香甜的甲基橙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端学习702-705（JavaScript 简单类型与复杂类型---简单类型与复杂类型，堆和栈，简单类型的内存分配，复杂类型的内存分配，简单类型传参，复杂类型传参）

文章目录JavaScript 简单类型与复杂类型1 简单类型与复杂类型2 堆和栈3 简单类型的内存分配4 复杂类型的内存分配5 简单类型传参6 复杂类型传参JavaScript 简单类型与复杂类型能够说出简单数据类型的内存分配能够说出复杂数据类型的内存分配能够说出简单类型如何传参能够说出复杂类型如何传参1 简单类型与复杂类型简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。值类型︰简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string ,
复制链接

扫一扫

专栏目录