让变量继承现有原型的方法？答案

【问题标题】：Make a variable inherit the methods of an existing prototype?让变量继承现有原型的方法？
【发布时间】：2016-07-19 23:41:03
【问题描述】：

假设我在地图上有一个图块。

function TileData (image, z) {
    this.image = image;
    this.z = z;
}
var tile = new TileData (tileimage, 0);

现在我可以调用 tile.image 和 tile.z 来引用现有数据。

我还有一个名为 map 的数组，我可以循环遍历它来绘制地图。

var map = [];

我想要做的是将现有图块的方法附加到数组中的第 0 个条目，以便在调用函数时绘制它。

所以我尝试做这样的事情。

map[0] = tile;

所以我可以调用 map[0].image 来获取代表地图上该图块的图像。

现在我想更改此图块的图像，所以我尝试这样做。

map[0].image = differentTileImage;

然而 Javascript 的实际作用是这样的：

tile.image = differentTileImage;

这意味着每当我尝试将该图块用于地图的另一部分时，它将具有不同的值。

map[1] = tile;
//map[1].image will return differentTileImage instead of tileimage.

有没有办法让变量继承现有原型的属性和值，而不仅仅是引用它？

（对不起，如果这是一个骗局）。

【问题讨论】：

这里的简单解决方案似乎是map[0] = new TileData(differentTileImage, map[0].z)，尽管我可以看到随着TileData 构造函数的复杂性增加，这变得更加困难。

【解决方案1】：

这意味着每当我尝试将该图块用于地图的另一部分时，它将具有不同的值。

嗯，不完全是。这意味着当您为地图的每个部分使用单个图块时，它在任何地方都将具有完全相同的值。如果你改变这个单一的瓦片，整个地图都会改变。

你想要的是创建多个瓦片实例：

map[0] = new TileData (tileimage, 0);
map[1] = new TileData (tileimage, 0);
…

（当然你会使用循环）

它们仍将继承同一个原型对象 (TileData.prototype)，但它们是不同的实例，并且每个图像都可以单独更改。

【讨论】：

【解决方案2】：

问题在于 JavaScript 中的对象总是通过引用传递。当您更改原始值时，会更改链中的所有值，您使用此引用。

在您的情况下，tile 和 map[0] 的想法相同。如果你更改 tile，map[0] 会更改，因为内存中的引用与tile 相同。

【讨论】：

【解决方案3】：

是的，您可以使用Object.assign()，该函数将创建 Tile 的副本。

map[1] = Object.assign({}, tile);

【讨论】：