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 相关文章推荐
jQuery队列操作方法实例
Jun 11 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
vue 中swiper的使用教程
May 22 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 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
第十四节 命名空间 [14]
2006/10/09 PHP
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
jquery禁止回车触发表单提交
2014/12/12 Javascript
使用angular写一个hello world
2015/01/23 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
Vue配置marked链接添加target="_blank"的方法
2019/07/19 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
初学Python实用技巧两则
2014/08/29 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
python实现XML解析的方法解析
2019/11/16 Python
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
大学生简单自荐信
2013/11/10 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
保安2014年终工作总结
2014/12/06 职场文书
英语通知范文
2015/04/22 职场文书
北京青年观后感
2015/06/15 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL