JS基本原理：对象类型赋值和原生类型赋值

这篇具有很好参考价值的文章主要介绍了JS基本原理：对象类型赋值和原生类型赋值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

介绍

　　在本文中，我试图以最简洁的方式来阐明JavaScript编程原理中对象类型赋值和原生类型赋值之间的区别，以及它们各自是如何工作的。这也是我希望在我的JavaScript编程生涯早期就已经理解的东西。

JS中的原生类型和对象类型

　　首先，让我们回顾一下JavaScript中不同的原生类型和对象类型。
　　原生类型：Boolean，Null，Undefined，Number，BigInt（可能不常见），String，Symbol（可能不常见）。
　　对象类型：Object，Array，Date，以及许多其它类型。

原生类型赋值和对象类型赋值有什么不同？

原生类型赋值

　　将一个原生类型的值赋值给一个变量非常简单，看下面的例子：

const a = 'hello';
const b = a;

　　在这个示例中，a的值被设置为hello，b的值也被设置为hello。如果我们将b的值修改，a的值不会发生变化。a和b之间不存在任何关联。

const b = 'foobar';
console.log(a); // "hello"
console.log(b); // "foobar"

对象类型赋值

　　对象类型赋值的工作方式则不同。将一个对象类型的值赋值给一个变量会执行下面这两步操作：

在内存中创建一个对象
将该对象的引用赋值给变量

　　这会发生什么呢？让我们看一下：

const a = { name: 'Joe' };
const b = a;

　　第一行在内存中创建了一个对象{ name: 'Joe' }，然后将该对象的引用赋值给变量a。第二行将同一对象的引用又赋值给了变量b。

　　接下来，让我们修改分配给b的对象的一个属性：

b.name = 'Jane';
console.log(b); // { name: "Jane" }
console.log(a); // { name: "Jane" }

　　由于a和b的值指向内存中同一对象的引用，所以对变量b的属性的修改会实际影响到a和b。

　　我们在数组中也可以很清楚地看到这一变化：

const a = ['foo'];
const b = a;

b[0] = 'bar';

console.log(b); // ["bar"]
console.log(a); // ["bar"]

这种变化也适用于函数参数

　　这些赋值规则同样也适用于将对象传递给函数的时候。让我们看看下面的例子：

const a = { name: 'Joe' };

function doSomething(val) {
  val.name = 'Bip';
}

doSomething(a);
console.log(a); // { name: "Bip" }

　　对传递给函数的对象的值进行修改时要小心，除非这是有意而为之的（但我相信在多数情况下你并不希望这样）。

防止意外的修改

　　在多数情况下，这种方式是符合预期的。这可以让我们非常方便地将同一对象的引用赋值给不同的变量，不过有时候也会引起一些意想不到的结果，当我们改变对象时，这种行为可能会导致一些非常令人困惑的bug。
　　有几种方法可以防止这种行为的发生，这里我会介绍其中的几个，但肯定不止这几种方法。

JavaScript展开操作符（...）

　　展开操作符是对对象或数组进行浅拷贝的一个好方法。

const a = { name: 'Joe' };
const b = { ...a };
b.name = 'Jane';
console.log(b); // { name: "Jane" }
console.log(a); // { name: "Joe" }

有关“浅拷贝”

　　理解浅拷贝和深拷贝非常重要。对于只有一层深度的对象而言，浅拷贝没有问题，但是对于嵌套的对象则会有问题，让我们看下面的例子：

const a = {
  name: 'Joe',
  dog: {
    name: 'Daffodil',
  },
};
const b = { ...a };

b.name = 'Pete';
b.dog.name = 'Frenchie';
console.log(a);
// {
//   name: 'Joe',
//   dog: {
//     name: 'Frenchie',
//   },
// }

　　展开操作符只实现了对象的一层深度的拷贝，但是第二层的属性在内存中仍然指向了同一对象。为了解决这个问题，人们想到了一些方法来进行“深拷贝”，例如第三方库deep-copy，或者序列化和反序列化对象。

使用Object.assign

　　Object.assign可以用来基于一个对象创建另一个新对象。使用方式如下：

const a = { name: 'Joe' };
const b = Object.create({}, a);

　　注意，这仍然是一个浅拷贝！

序列化和反序列化

　　序列化和反序列化一个对象可以实现对象的深拷贝，最常见的方法是使用JSON.stringify和JSON.parse。

const a = {
  name: 'Joe',
  dog: {
    name: 'Daffodil',
  },
};
const b = JSON.parse(JSON.stringify(a));
b.name = 'Eva';
b.dog.name = 'Jojo';
console.log(a);
// {
//   name: 'Joe',
//   dog: {
//     name: 'Daffodil',
//   },
// }

console.log(b);
// {
//   name: 'Eva',
//   dog: {
//     name: 'Jojo',
//   },
// }