JavaScript引用是如何工作的

   <p>JavaScript中没有指针，并且JavaScript中的引用与我们通常看到的大多数其他流行编程语言的工作方式不同。在JavaScript中，不可能有一个变量到另一个变量的引用。而且，只有复合值（例如对象或数组）可以通过引用来赋值。</p>    <p>整片文章中将使用下列属于：</p>    <ul>     <li> <p>标量–单个值或数据单元（如整数、布尔值、字符串）</p> </li>     <li> <p>复合--由多个值组成（如数组、对象、集合）</p> </li>     <li> <p>原始 - 直接的价值，而不是对包含值的东西的引用。</p> <p>JavaScript的标量类型是原语，不像其他一些语言（如Ruby）具有标量引用类型。注意，在JavaScript中，标量原始值是不可变的，而复合值是可变的。</p> </li>    </ul>    <h2>概要：</h2>    <p>1.分配给变量的值的类型决定该值存储的是值还是引用。</p>    <p>2.在变量赋值的时候，标量原始值（Number，String，Boolean，undefined，null，Symbol）通过值来赋值，复合值通过引用来赋值。</p>    <p>3.JavaScript中的引用仅指向包含的值，不指向其他变量或引用。</p>    <p>4.在JavaScript中，标量原始值是不可变的，复合值是可变的。</p>    <h2>通过值赋值的快速示例</h2>    <p>在下面的代码片段中，我们将一个标量原始值（一个数字）分配给一个变量，因此这里是通过值来赋值。首先，变量 batman 被初始化，当变量 superman 被分配存储在 batman 中的值的时候，实际上是创建了该值的一个副本并存储在变量 superman 中。当变量 superman 被修改时，变量 batman 不会受到影响，因为它们指向不同的值。</p>    <pre>  <code class="language-javascript">var batman = 7;  var superman = batman;   //通过值来赋值  superman++;  console.log(batman);     //7  console.log(superman);   //8</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d03b5b6e4a5de496e8eb689dec63079a.png"></p>    <h2>通过引用赋值的快速示例</h2>    <p>在下面的代码片段中，我们将一个复合值（数组）赋值给一个变量，因此这里是通过引用赋值。变量 flash 和 quicksilver 是相同的值（也称为共享值）的引用。当修改共享值时，引用将指向更新的值。</p>    <pre>  <code class="language-javascript">var flash = [8,8,8];  var quicksilver = flash;   //通过引用来赋值  quicksilver.push(0);  console.log(flash);        //[8,8,8,0]  console.log(quicksilver);  //[8,8,8,0]</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6eddd2a2e551529784369b4b0c4592a5.png"></p>    <h2>如何创建一个新的引用</h2>    <p>当变量中的复合值被重新赋值的时候，将创建一个新的引用。在JavaScript中，与大多数其他流行的编程语言不同是：引用指向存储在变量中的值，不指向其他变量或者引用。</p>    <pre>  <code class="language-javascript">var firestorm = [3,6,3];  var atom = firestorm;   //通过引用来赋值  console.log(firestorm); //[3,6,3]  console.log(atom);      //[3,6,3]  atom = [9,0,9];         //通过值来赋值 (创建新的引用)  console.log(firestorm); //[3,6,3]  console.log(atom);      //[9,0,9]</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2483344050c32792c63f51c02c67d264.png"></p>    <h2>当引用作为函数参数传递时，引用如何工作</h2>    <p>在下面的代码片段中，变量 magneto 是一个复合值（一个数组），因此它作为一个引用被赋值给了变量 x （函数参数）。</p>    <p>在IIFE中调用的 Array.prototype.push 方法会通过JavaScript引用来改变变量中的值。但是，变量x的重新赋值会创建一个新的引用，并且对变量 x 的进一步修改不会影响到变量 magneto 的引用。</p>    <pre>  <code class="language-javascript">var magneto = [8,4,8];  (function(x) {        //IIFE      x.push(99);      console.log(x);   //[8,4,8,99]      x = [1,4,1];      //重新赋值变量 (创建一个新的引用)      x.push(88);      console.log(x);   //[1,4,1,88]  })(magneto);  console.log(magneto); //[8,4,8,99]</code></pre>    <h2>如何更改作为函数参数通过JavaScript引用传递的复合变量中的原始值</h2>    <p>这里的解决方案是修改引用指向的现有复合值。在下面的代码片段中，变量 wolverine 是一个复合值（一个数组）并且在IIFE中被调用，变量 x （函数参数）是被赋值了一个引用。</p>    <p>可以通过将属性 Array.prototype.length 的值设置为0来创建一个空数组。因此，变量 wolverine 通过JavaScript引用更改为变量x中的新值。</p>    <pre>  <code class="language-javascript">var wolverine = [8,7,8];  (function(x) {              //IIFE      x.length = 0;           //创建空数组对象      x.push(1,4,7,2);      console.log(x);         //[1,4,7,2]  })(wolverine);  console.log(wolverine);     //[1,4,7,2]</code></pre>    <h2>如何通过按值赋值来存储复合值</h2>    <p>这里的解决方案是制作复合值的手动副本，然后将复制的值分配给变量。因此，分配值的引用不指向原始值。</p>    <p>创建一个（浅）复合值副本（数组对象）推荐调用 Array.prototype.slice 方法，而不传递任何参数。</p>    <pre>  <code class="language-javascript">var cisco = [7,4,7];  var zoom = cisco.slice();  //创建浅复制  cisco.push(77,33);  console.log(zoom);         //[7,4,7]  console.log(cisco);        //[7,4,7,77,33]</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/39320a26e8ebc829e609425dfe6c2402.png"></p>    <h2>如何通过按引用赋值来存储一个标量初始值</h2>    <p>这里的解决方案是将标量原始值包含在复合值（即对象或数组）中作为其属性值。因此，它可以通过引用来赋值。在下面的代码片段中，变量 speed 中的标量原始值设置为flash对象的属性。因此，在调用IIFE的时候，它通过引用赋值给了 x （函数参数）。</p>    <pre>  <code class="language-javascript">var flash = { speed: 88 };  (function (x) {             //IIFE      x.speed = 55;  })(flash);  console.log(flash.speed);   //55</code></pre>    <h2>总结</h2>    <p>很好地理解JavaScript中的引用可以帮助开发人员避免许多常见的错误，并编写出更好的代码。</p>    <p>编码快乐！！</p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000009017259</p>    <p> </p>