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 相关文章推荐
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 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
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
超级退弹代码
2008/07/07 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
JS实现复制功能
2017/03/01 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
Python程序语言快速上手教程
2012/07/18 Python
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
Python跳出多重循环的方法示例
2019/07/03 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
警察思想汇报
2014/01/04 职场文书
超市活动计划书
2014/04/24 职场文书
实验室标语
2014/06/21 职场文书
六五普法宣传标语
2014/10/06 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
《刷子李》教学反思
2016/02/20 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers