微信小程序学习记录遇到的问题:普通变量与用{}定义的变量区别(也就是各变量在内存存储的区别)

问题描述:

第一种情况

.js中

var position=20

function changevalue(){
    var p=position
    p+=2
    console.log(p)
    console.log(position)
}



.wxml中

<button bindtap="changevalue">改变值<button>

输出时,当不断点击按钮,p的值一直是22,position的值一直是20

第二种情况

.js

var position={
    x:20,
    vx:2
}

changevale(){
    var p=position
    p.x+=p.vx
    console.log(p.x)
    console.log(position.x)
}





.wxml

<button bindtap="changevale">改变值</button>

输出时,当不断点击按钮,p.x的值为22,24,26.....不断增加,position.x的值为22,24,26....也一直不断增加。

 

原因分析:

首先理解栈区和堆区

栈区:是由编译器自动分配内存与释放内存的区域,用于存放函数的参数值,局部变量,随着函数动态调用与返回,栈区的数据将动态变化

堆区:可由主动开发人员自己调用函数向计算机申请的一块内存区域,使用完之后可由程序调用函数自主释放

全局区(static):这部分保存全局变量与静态变量,在进入程序的时候就会分配这块内存,在整个程序运行期间将一直存在。

具体参考https://www.cnblogs.com/angel648/p/11090504.html  JavaScript中的变量在内存中的具体存储形式

结合代码与图理解:

let a1 = 0; // 栈内存
let a2 = "this is string" // 栈内存
let a3 = null; // 栈内存
let b = { x: 10 }; // 变量b存在于栈中,{ x: 10 }作为对象存在于堆中
let c = [1, 2, 3]; // 变量c存在于栈中,[1, 2, 3]作为对象存在于堆中

当我们要访问堆内存中引用数据类型时:

1,从栈中获取该对象的地址引用

2,再从堆内存中获取我们需要的数据

第一种情况解释

let a = 20;
let b = a;
b = 30;
console.log(a); // 20

结合下面图进行理解:

在栈内存中的数据发生复制行为时,系统会自动为新的变量分配一个新值,最后这些变量都是相互独立互不影响的

第二种情况解释

let a = { x: 10, y: 20 }
let b = a;
b.x = 5;
console.log(a.x); // 5

下图理解:

1,复制时,同样为新的变量b分配了一个新的值,保存在栈内存中,不同的是,这个值仅仅是引用类型的一个地址指针。

2,他们指向同一个值,也就是地址指针相同,在堆内存中访问到的具体对象实际上是同一个

3,因此改变b.x时,a.x也发生变化,这就是引用类型的特性

 

 

 

 

发布了141 篇原创文章 · 获赞 22 · 访问量 6万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览