如何理解JavaScript中给变量赋值，是引用还是复制

一、Javascript中值的类型

Javascript中的值分为2大类&＃xff1a;基本类型和引用类型。每种类型下面又分为5种类型。

基本类型&＃xff1a;

     数字类型&＃xff1a;Number&＃xff1b;字符串类型&＃xff1a;String&＃xff1b;布尔类型&＃xff1a;Boolean(true和false)&＃xff1b;Undefined&＃xff1b;Null。

引用类型&＃xff1a;

     函数、数组、日期、正则、错误。

注意&＃xff1a;所有的引用类型都是对象&＃xff0c;也就是Object对象下的一个类。

二、值和引用

    在将一个值赋给变量时&＃xff0c;解析器必须确定这个值是基本类型值还是引用类型值。

    对基本类型&＃xff0c;是按值访问的&＃xff0c;即通过值复制的方式来赋值和传递。

    对引用类型&＃xff0c;是按引用访问的&＃xff0c;即通过引用复制的方式赋值和传递。在操作对象时&＃xff0c;实际上是在操作对象的引用&＃xff0c;而不是实际的对象。

下面通过示例来理解两者的区别。

例1&＃xff1a;

    以数字基本类型值为例&＃xff0c;将数字赋给变量a&＃xff0c;此时a持有的是该值的一个复制本。再将a赋给变量b&＃xff0c;此时b持有的是该值得另一个复制本&＃xff0c;不论b怎么变化&＃xff0c;都不会影响a的值。

    注意&＃xff1a;所有的基本类型值都是不会变的。比如一个字符串"abcd"&＃xff0c;它的值永远是"abcd"&＃xff0c;不可能发生改变。如果把它赋给一个变量&＃xff0c;var x&＃61;"abcd"&＃xff0c;然后给x赋其他的值&＃xff0c;那么x的值可以改变&＃xff0c;但是abcd"这个字符串本身的值没有发生任何变化。包括使用某些自带的函数&＃xff0c;比如x.toUpperCase()&＃xff1b;这个函数返回的是x字符串的大写形式"ABCD"。注意&＃xff0c;是“返回”一个值&＃xff0c;而不是改变原有的值。此时&＃xff0c;变量x的值仍然是"adcd"&＃xff0c;除非你使用了x&＃61;x.toUpperCase()。&＃xff08;即重新对变量赋值了&＃xff09;

    对于基本类型&＃xff0c;将其值赋给一个变量时&＃xff0c;就是将这个值赋值给了变量&＃xff0c;值本身不会发生任何变化。在给变量重新赋值后&＃xff0c;变量的值就变化了。变量之间是可以比较的&＃xff0c;比较的就是他们本身的值。

例2&＃xff1a;

    以数组引用类型为例。Javascript支持在定义变量的时候同时给它赋值&＃xff0c;即var a&＃61;[1,2,3]同时定义一个对象并将其赋值给变量。

    定义一个对象&＃xff08;数组[1,2,3]&＃xff09;&＃xff0c;此时这个对象在内存中建立。当给把这个对象赋值给一个变量时&＃xff0c;变量a仅仅是对这个对象的引用&＃xff0c;而不是将该对象复制到了该变量中。即变量a中存储的是指向对象的地址。将a的值赋给b&＃xff0c;也即将a中的地址赋给了变量b。这是变量a和b都指向同一个对象。所以b值得改变就会直接引起对象本身的改变&＃xff0c;因为变量a也指向这个数组&＃xff0c;所以a的值肯定也会发生变化。

    注意&＃xff1a;对象的比较与基本类型值不同。即使两个对象完全相同&＃xff0c;比如两个完全相同的数组&＃xff0c;它们也是不相等的。只有两个变量指向同一个对象时&＃xff0c;它们才是相等的。如&＃xff1a;

例3&＃xff1a;

    例3与例2的区别在于&＃xff0c;对b进行了重新赋值操作&＃xff0c;b就不再是引用a的指向&＃xff0c;并与a的指向没有任何关系&＃xff0c;而是指向了一个新的数组[1,2,3,4]&＃xff0c;所以b的操作也不再影响到a指向的值。

例4&＃xff1a;函数-无重新赋值

    将数组赋值给变量a后&＃xff0c;a指向数组[1,2,3]。调用函数foo(a)之后&＃xff0c;向数组中插入数字4&＃xff0c;原数组发生变化&＃xff0c;所以a也跟着变成[1,2,3,4]。

例5&＃xff1a;函数-有重新赋值

• 定义数组[1,2,3]并赋值给变量a&＃xff0c;a指向该数组。
• 调用函数foo(a)&＃xff0c;执行的操作是&＃xff1a;

        1、向原数组中插入数字4&＃xff0c;原数组变成[1,2,3,4]&＃xff1b;

        2、定义新数组[4,5,6]&＃xff0c;并重新赋值给a。此时变量指向了新数组&＃xff0c;原数组保持[1,2,3,4]不变&＃xff1b;

        3、向变量中插入数字7&＃xff0c;由于此时变量指向了新数组&＃xff0c;所以此步操作改变了新数组[4,5,6]&＃xff0c;新数组又变成另一个新数组[4,5,6,7]&＃xff1b;

        4、执行console.log操作&＃xff0c;显示的是这个最新的数组&＃xff0c;即[4,5,6,7]。

• 函数外执行console.log操作。由于函数中&＃xff0c;只有第一步操作改变了原数组&＃xff0c;后续操作改变的是新赋值的数组[4,5,6]&＃xff08;新赋值之后&＃xff0c;变量a指向了该新数组&＃xff0c;所有后续操作&＃xff0c;都是针对的新数组&＃xff09;&＃xff0c;所有该步操作的结果显示的是[1,2,3,4]。

例6&＃xff1a;函数-清空当前引用的数组

• 定义数组[1,2,3]并赋值给变量a&＃xff0c;a指向该数组。
• 调用函数foo(a)&＃xff0c;执行的操作是&＃xff1a;

        1、向原数组中插入数字4&＃xff0c;原数组变成[1,2,3,4]&＃xff1b;

        2、清空数组。由于此时变量仍然指向原数组&＃xff0c;所以此处操作针对的是原数组&＃xff0c;即清空原数组&＃xff1b;

        3、向数组中插入数字4,5,6,7。由于没有重新赋值操作&＃xff0c;变量仍然指向原数组&＃xff0c;所以原数组变为新数组[4,5,6,7]&＃xff1b;

        4、执行console.log操作&＃xff0c;显示的是这个最新的数组&＃xff0c;即[4,5,6,7]。

• 函数外执行console.log操作&＃xff0c;由于函数中变量都没有重新赋值&＃xff0c;所以每一步操作针对的都是原数组&＃xff0c;最终原数组变成了这个最新的数组&＃xff0c;即[4,5,6,7]。

三、更多例子

例1&＃xff1a;

    当多个变量持有同一对象的引用时&＃xff0c;通过其中的任何一个&＃xff0c;都可以改变对象。

例2&＃xff1a;

     对比代码可知&＃xff0c;test1和test2的区别在于&＃xff0c;变量a在test1中不断地赋值新的引用&＃xff0c;导致a与b持有的引用不同&＃xff0c;后面向a添加的属性&＃xff0c;b都无法访问到。