Javascript 赋值机制详解_基础知识

今天回答了一个关于 Javascript 的问题，涉及到了赋值问题，因此想把这个问题好好总结下。

EGkHTML5中文学习网 - HTML5先行者学习网
var a = 'test';EGkHTML5中文学习网 - HTML5先行者学习网
var b = function() {};EGkHTML5中文学习网 - HTML5先行者学习网
b.a = 'test';EGkHTML5中文学习网 - HTML5先行者学习网
function change(m, n) {EGkHTML5中文学习网 - HTML5先行者学习网
    m = 'change';EGkHTML5中文学习网 - HTML5先行者学习网
    n.a = 'change';EGkHTML5中文学习网 - HTML5先行者学习网
}EGkHTML5中文学习网 - HTML5先行者学习网
change(a, b);EGkHTML5中文学习网 - HTML5先行者学习网

执行上述代码后，变量 a 和 b 的值会发生改变吗？

原始值和引用值

在之前的文章中介绍过原始值和引用值，原始值指的 Undefined, Null, Boolean, Number, String 等，它们存放在栈中，而引用值则集成自 Object，它被存放在堆中。
这里要把两者区分清楚：

复制代码代码如下:

EGkHTML5中文学习网 - HTML5先行者学习网
var a = 'test';EGkHTML5中文学习网 - HTML5先行者学习网
var b = new String('test');EGkHTML5中文学习网 - HTML5先行者学习网
var A = 'true';EGkHTML5中文学习网 - HTML5先行者学习网
var B = new Boolean('true');EGkHTML5中文学习网 - HTML5先行者学习网

以上四个变量，a 和 A 为原始值，而 b 和 B 则为引用值。

赋值机制

清楚了原始值和引用值的区别后，就可以具体介绍 Javascript 的赋值机制：

在 Javascript 中，对于原始值类型的变量，每次赋值都将生成一份拷贝，而对于引用值，则正如其名，是通过引用赋值，指向同一个存储对象的内存处。
原始值的赋值：

复制代码代码如下:

EGkHTML5中文学习网 - HTML5先行者学习网
var a = 1;//原始值 EGkHTML5中文学习网 - HTML5先行者学习网
var b = a;//生成一份拷贝给变量 bEGkHTML5中文学习网 - HTML5先行者学习网
b = 2;//与 a 无关EGkHTML5中文学习网 - HTML5先行者学习网
alert(a);//输出 1EGkHTML5中文学习网 - HTML5先行者学习网

引用值的赋值：

复制代码代码如下:

EGkHTML5中文学习网 - HTML5先行者学习网
var A= new Object();//引用值EGkHTML5中文学习网 - HTML5先行者学习网
A.x = 1;EGkHTML5中文学习网 - HTML5先行者学习网
var B = A;//引用赋值，指向同一个内存处EGkHTML5中文学习网 - HTML5先行者学习网
B.x = 2;//修改 B 将影响 AEGkHTML5中文学习网 - HTML5先行者学习网
alert(A.x);//输出 2EGkHTML5中文学习网 - HTML5先行者学习网

参数传递

现在我们来看看传递两种类型的值给函数形参时时怎么处理的。
1.传递原始值

复制代码代码如下:

EGkHTML5中文学习网 - HTML5先行者学习网
var a = 1;EGkHTML5中文学习网 - HTML5先行者学习网
function test(m) {EGkHTML5中文学习网 - HTML5先行者学习网
    m = 2;EGkHTML5中文学习网 - HTML5先行者学习网
}EGkHTML5中文学习网 - HTML5先行者学习网
test(a);EGkHTML5中文学习网 - HTML5先行者学习网
alert(a);//输出 1EGkHTML5中文学习网 - HTML5先行者学习网

输出为1，所以我们知道函数只是将变量的值传递进去了，所以在函数体内的 m 得到传来的值1，再被赋值为2，这个过程不影响外部的变量 a。

2.传递引用值

复制代码代码如下:

EGkHTML5中文学习网 - HTML5先行者学习网
var A= new Object();EGkHTML5中文学习网 - HTML5先行者学习网
A.x = 1EGkHTML5中文学习网 - HTML5先行者学习网
function test(M) {EGkHTML5中文学习网 - HTML5先行者学习网
    M.x = 2;EGkHTML5中文学习网 - HTML5先行者学习网
}EGkHTML5中文学习网 - HTML5先行者学习网
test(A);EGkHTML5中文学习网 - HTML5先行者学习网
alert(A.x);//输出 2EGkHTML5中文学习网 - HTML5先行者学习网

输出为2，所以我们知道函数将变量的地址传递进去了，所以函数体内的 M 得到传递来的地址，因此属性 x 被赋值为2的同时也会影响指向同一内存地址的 A。

总结

现在再回到开篇的问题：

复制代码代码如下:

EGkHTML5中文学习网 - HTML5先行者学习网
var a = 'test';EGkHTML5中文学习网 - HTML5先行者学习网
var b = function() {};EGkHTML5中文学习网 - HTML5先行者学习网
b.a = 'test';EGkHTML5中文学习网 - HTML5先行者学习网
function change(m, n) {EGkHTML5中文学习网 - HTML5先行者学习网
    m = 'change';EGkHTML5中文学习网 - HTML5先行者学习网
    n.a = 'change';EGkHTML5中文学习网 - HTML5先行者学习网
}EGkHTML5中文学习网 - HTML5先行者学习网
change(a, b);EGkHTML5中文学习网 - HTML5先行者学习网

变量 a 为原始值，变量 b 为引用值，传递进函数体内一个为值，一个为地址，所以函数运行后，变量 a 不会改变，而变量 b 的值将会改变。

Javascript 赋值机制详解_基础知识_