JavaScript 面向对象完全掌握核心原理详解(3) js面向对象数据内存空间图分析

简介: JavaScript 面向对象数据内存空间图分析

🚀 个人主页 极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步!😄
🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注

标量类型的值 一般存储在栈区中!

标量指: 整型、浮点、字符串、布尔值、等..

对象类型分为: 对象引用 和 对象体!

对象引用存储在栈区中 、对象体存储在堆区中、

1. 内存空间基本数据存储分析图1

1.png

注意: 一旦new一个对象,就必然会在内存中生成新的的区域来存储对象数据

而且最重要的就是这个时候在内存中对象的地址是不一样的 , 因为 new 会生成一个新的地址在栈区中

2.对象引用类型地址传递分析图2

代码案例1:

var json={
   
   
    "username":"张三",
    "age":22,
    "fn1":function(){
   
   
        console.log('我的名字叫'+this.username);
    }
}

//通过对象引用修改属性值1
/*function fn2(obj){
     obj.username="李四";
}
fn2(json);*/

//通过对象引用修改属性值2
var a=json;
a.username='李四';

console.log(json.username);

分析图如下
2.png

3.对象引用类型地址传递分析图3

代码案例2:

function Person(name,age,salary) {
   
   
    this.name=name;
    this.age=age;
    this.salary=salary;
}

function fn1(obj) {
   
   
    obj.name='王武';
    obj=new Person('李四',24,8000);
    console.log(obj.name);
}

var obj=new Person('张三',33,6000);

console.log(obj.name);    //结果: 张三

fn1(obj);                //结果 李四

console.log(obj.name);  // 王武

分析图如下

3.png

对象引用 图分析小结:

  1. 在js中, 普通变量值作为函数的参数就是 值传递

  2. 在js中, 对象引用类型的变量作为函数的参数 就是 ==址传递==!

    ​ 所以 注意一下 这里的值传递址传递

  3. 一旦new一个对象 就一定会在堆区中创建一个空间,并赋予一个新地址 上面已经说过了!

4.对象数据的比较

在js中、基本数据类型数据的比较 是值的比较 值相同就可以了、

对象类型的比较 要满足两个要求、 第一是值要相同、第二引用地址也要相同才行

案例代码:

//--案例1
var a=[1,2,3];
var b=[1,2,3];

console.log(a==b);  //结果为false  虽然值一样,但地址是不同的!


var a=[1,2,3];
var b=a;
console.log(a==b);  //结果为true  因为b指向了a这个地址,并且值也能够得到!

原理图 如下:

4.png

相关文章
|
16天前
|
存储 JavaScript 前端开发
JS 中的内存管理
【10月更文挑战第17天】了解和掌握 JavaScript 中的内存管理是非常重要的。通过合理的内存分配、及时的垃圾回收以及避免内存泄漏等措施,可以确保代码的高效运行和稳定性。同时,不断关注内存管理的最新发展动态,以便更好地应对各种挑战。在实际开发中要时刻关注内存使用情况,以提升应用的性能和质量。
24 1
|
8天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
75 9
|
13天前
|
监控 算法 应用服务中间件
“四两拨千斤” —— 1.2MB 数据如何吃掉 10GB 内存
一个特殊请求引发服务器内存用量暴涨进而导致进程 OOM 的惨案。
|
7天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
11天前
|
存储 JavaScript 前端开发
js 中有哪几种内存泄露的情况
JavaScript 中常见的内存泄漏情况包括:1) 全局变量未被释放;2) 意外的全局变量引用;3) 被遗忘的计时器或回调函数;4) 事件监听器未被移除;5) 子元素存在时删除父元素;6) 循环引用。
|
13天前
|
存储 C语言
数据在内存中的存储方式
本文介绍了计算机中整数和浮点数的存储方式,包括整数的原码、反码、补码,以及浮点数的IEEE754标准存储格式。同时,探讨了大小端字节序的概念及其判断方法,通过实例代码展示了这些概念的实际应用。
25 1
|
17天前
|
存储
共用体在内存中如何存储数据
共用体(Union)在内存中为所有成员分配同一段内存空间,大小等于最大成员所需的空间。这意味着所有成员共享同一块内存,但同一时间只能存储其中一个成员的数据,无法同时保存多个成员的值。
|
19天前
|
监控 Java easyexcel
面试官:POI大量数据读取内存溢出?如何解决?
【10月更文挑战第14天】 在处理大量数据时,使用Apache POI库读取Excel文件可能会导致内存溢出的问题。这是因为POI在读取Excel文件时,会将整个文档加载到内存中,如果文件过大,就会消耗大量内存。以下是一些解决这一问题的策略:
50 1
|
22天前
|
缓存 安全 Java
使用 Java 内存模型解决多线程中的数据竞争问题
【10月更文挑战第11天】在 Java 多线程编程中,数据竞争是一个常见问题。通过使用 `synchronized` 关键字、`volatile` 关键字、原子类、显式锁、避免共享可变数据、合理设计数据结构、遵循线程安全原则和使用线程池等方法,可以有效解决数据竞争问题,确保程序的正确性和稳定性。
33 2
|
21天前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具