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

相关文章
|
18天前
|
Web App开发 存储 监控
Node.js中的内存泄漏
【8月更文挑战第31天】Node.js中的内存泄漏
36 1
|
17天前
|
Java 数据库连接 数据库
从零到精通:揭秘 Hibernate 构建持久层服务的全过程,你离数据持久化大师还有多远?
【8月更文挑战第31天】本文详细介绍了如何从零开始使用 Hibernate 构建一个持久层服务。首先,通过在 Maven 项目中添加必要的依赖,确保项目具备使用 Hibernate 的条件。接着,配置 `hibernate.cfg.xml` 文件以连接 MySQL 数据库,并设置了基本属性。然后定义了一个简单的 `User` 实体类及其映射关系。此外,还创建了一个 `HibernateUtil` 工具类来管理 `SessionFactory`。
28 0
|
17天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
41 0
|
19天前
|
缓存 JavaScript 前端开发
Vue.js与JavaScript性能优化终极揭秘:掌握这些技巧,让你的Web应用飞一般地流畅!
【8月更文挑战第30天】随着前端应用复杂度的增加,性能优化变得至关重要。本文深入探讨了如何利用Vue.js和JavaScript实现高效的应用性能。主要内容包括:优化组件设计以减少不必要的渲染,采用异步组件与懒加载技术加速应用启动,利用虚拟滚动和分页处理大数据集,改进Vuex使用方式以及合理运用浏览器缓存等策略。通过具体示例和最佳实践,帮助开发者充分挖掘Vue.js潜力,打造高性能的前端应用。
31 0
|
19天前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
13 0
|
19天前
|
JavaScript 前端开发 API
揭秘Vue.js与JavaScript融合的神秘力量:如何一键解锁高效响应式Web应用的终极秘籍?
【8月更文挑战第30天】随着前端技术的发展,Vue.js凭借其轻量级、易上手和高度响应式的特性,在前端开发领域迅速崛起,成为构建现代Web应用的首选框架之一。Vue.js与JavaScript深度融合,使开发者能高效灵活地打造美观且功能强大的应用。本文将作为实战指南,带您深入了解Vue.js与JavaScript结合的奥秘,揭示构建高效响应式Web应用的秘籍。从Vue.js的基础开始,逐步介绍如何利用其数据驱动视图的特点,结合JavaScript的高级特性,如定时器、Promise、async/await等,提升应用的交互性和用户体验。
10 0
|
19天前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
|
30天前
|
存储 编译器 C语言
【C语言篇】数据在内存中的存储(超详细)
浮点数就采⽤下⾯的规则表⽰,即指数E的真实值加上127(或1023),再将有效数字M去掉整数部分的1。
|
2月前
|
存储 分布式计算 Hadoop
HadoopCPU、内存、存储限制
【7月更文挑战第13天】
184 14
|
20天前
|
存储 监控 Docker
如何限制docker使用的cpu,内存,存储
如何限制docker使用的cpu,内存,存储

热门文章

最新文章