Javascript 赋值机制详解


Posted in Javascript onNovember 23, 2014

今天回答了一个关于 Javascript 的问题,涉及到了赋值问题,因此想把这个问题好好总结下。

var a = 'test';

var b = function() {};

b.a = 'test';

function change(m, n) {

    m = 'change';

    n.a = 'change';

}

change(a, b);

执行上述代码后,变量 a 和 b 的值会发生改变吗?

原始值和引用值

在 之前的文章中介绍过原始值和引用值,原始值指的 Undefined, Null, Boolean, Number, String 等,它们存放在栈中,而引用值则集成自 Object,它被存放在堆中。
这里要把两者区分清楚:

var a = 'test';

var b = new String('test');

var A = 'true';

var B = new Boolean('true');

以上四个变量,a 和 A 为原始值,而 b 和 B 则为引用值。

赋值机制

清楚了原始值和引用值的区别后,就可以具体介绍 Javascript 的赋值机制:

在 Javascript 中,对于原始值类型的变量,每次赋值都将生成一份拷贝,而对于引用值,则正如其名,是通过引用赋值,指向同一个存储对象的内存处。
原始值的赋值:

var a = 1;//原始值 

var b = a;//生成一份拷贝给变量 b

b = 2;//与 a 无关

alert(a);//输出 1

引用值的赋值:

var A= new Object();//引用值

A.x = 1;

var B = A;//引用赋值,指向同一个内存处

B.x = 2;//修改 B 将影响 A

alert(A.x);//输出 2

参数传递

现在我们来看看传递两种类型的值给函数形参时时怎么处理的。
1.传递原始值

var a = 1;

function test(m) {

    m = 2;

}

test(a);

alert(a);//输出 1

输出为1,所以我们知道函数只是将变量的值传递进去了,所以在函数体内的 m 得到传来的值1,再被赋值为2,这个过程不影响外部的变量 a。

2.传递引用值

var A= new Object();

A.x = 1

function test(M) {

    M.x = 2;

}

test(A);

alert(A.x);//输出 2

输出为2,所以我们知道函数将变量的地址传递进去了,所以函数体内的 M 得到传递来的地址,因此属性 x 被赋值为2的同时也会影响指向同一内存地址的 A。

总结

现在再回到开篇的问题:

var a = 'test';

var b = function() {};

b.a = 'test';

function change(m, n) {

    m = 'change';

    n.a = 'change';

}

change(a, b);

变量 a 为原始值,变量 b 为引用值,传递进函数体内一个为值,一个为地址,所以函数运行后,变量 a 不会改变,而变量 b 的值将会改变。

Javascript 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 #Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 #Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 #Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 #Javascript
js实例属性和原型属性示例详解
Nov 23 #Javascript
JS常用函数使用指南
Nov 23 #Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 #Javascript
You might like
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
基于python检查矩阵计算结果
2020/05/21 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
函授毕业个人自我评价
2014/02/20 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
酒会邀请函
2015/01/31 职场文书
留学推荐信中文范文
2015/03/26 职场文书
首次购房证明
2015/06/19 职场文书
车辆管理制度范本
2015/08/05 职场文书
宿舍管理制度范本
2015/08/07 职场文书
感恩的心主题班会
2015/08/12 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
python实现A*寻路算法
2021/06/13 Python
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS