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 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
javascript面向对象三大特征之继承实例详解
Jul 24 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仿discuz分页效果代码
2008/10/02 PHP
php 中英文语言转换类
2011/09/07 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python的Flask框架中web表单的教程
2015/04/20 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
初中科学教学反思
2014/01/21 职场文书
六年级数学教学反思
2014/02/03 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
团日活动总结怎么写
2014/06/25 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
课内比教学心得体会
2014/09/09 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
实习协议书范本
2014/09/25 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL