Javascript 赋值机制详解
作者:bea
今天回答了一个关于 Javascript 的问题,涉及到了赋值问题,因此想把这个问题好好总结下。 代码如下: var a = 'test'; var b = function() {}; b.a = 'test'; function change(m, n) { m = 'change'; n.a = 'change'; } change(a, b); 执行上述代码后,变量 a 和 b 的值会发生改变吗? 原始值和引用值 在 之前的文章中介绍过原始
今天回答了一个关于 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 的值将会改变。
有用 | 无用
代码如下:
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 的值将会改变。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- js 加密压缩出现bug解决方案
- js Object2String方便查看js对象内容
- js的[defer]和[async]属性
- 使用JavaScript 编写简单计算器
- JS和JQ的event对象区别分析
- JavaScript实现大数的运算
- 使表格的标题列可左右拉伸jquery插件封装
- jQuery实现隔行背景色变色
- jQuery实现统计复选框选中数量
- 基于jQuery实现文本框缩放以及上下移动功能
- 基于jQuery实现复选框的全选 全不选 反选功能
- 基于jQuery实现下拉框
- 基于jQuery实现表单提交验证
- jQuery简单实现网页选项卡特效
- jQuery选择器全集详解
- 常见的jQuery选择器汇总
- Javascript学习笔记之相等符号与严格相等符号
- Javascript学习笔记之数组的构造函数
- Javascript学习笔记之数组的遍历和 length 属性