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代码
Mar 16 Javascript
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
JavaScript中对象介绍
Dec 31 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
Javascript之datagrid查询详解
Sep 15 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桌面中心(一) 创建数据库
2007/03/11 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
js异步编程小技巧详解
2017/08/14 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
Python第三方库的安装方法总结
2016/06/06 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python随机取list中的元素方法
2018/04/08 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python web框架中实现原生分页
2019/09/08 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
学生自我评语大全
2014/04/18 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
资料员岗位职责范本
2015/04/13 职场文书
初中政治教学工作总结
2015/08/13 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python