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 相关文章推荐
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 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
NOT NULL 和NULL
2007/01/15 PHP
apache rewrite_module模块使用教程
2008/01/10 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
机器学习10大经典算法详解
2017/12/07 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
战友聚会邀请函
2014/01/18 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
工作失职自我检讨书
2015/05/05 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python
Mysql 文件配置解析介绍
2022/05/06 MySQL