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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
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 ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php实现中文转数字
2016/02/18 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
vue二级路由设置方法
2018/02/09 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
python 统计代码行数简单实例
2017/05/04 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
MYSQL基础面试题
2012/05/13 面试题
热爱祖国的演讲稿
2014/05/04 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
结对共建协议书
2014/08/20 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
MySQL 逻辑备份 into outfile
2022/05/15 MySQL
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript