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 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
JavaScript代码简化技巧实例解析
Sep 09 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
smarty模板中拼接字符串的方法
2014/02/14 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
python双向链表实现实例代码
2013/11/21 Python
python模拟Django框架实例
2016/05/17 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
简历自我评价模版
2014/01/31 职场文书
应聘会计求职信
2014/06/11 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2015年人事科工作总结
2015/04/28 职场文书
军事博物馆观后感
2015/06/05 职场文书
python数字转对应中文的方法总结
2021/08/02 Python