如何理解[].copyWithin.call({长度: 5，3: 1 }，0，3)

Question

我刚开始学习JavaScript，我不知道如何理解以下代码(来自MDN文档)：

​

console.log(
  [].copyWithin.call({ length: 5, 3: 1 }, 0, 3)
)

​

Answer 1

只要Array#copyWithin方法有一个length属性和一个数值键，就可以用任何带有Function#call的对象调用它。MDN上的代码将Array#copyWithin作为对象{ length: 5, 3: 1 }调用为this或实例值。方法所操作的是“数组”。

数组只是一个对象，一个具有length和数字、有序属性的特殊对象。这里也发生了同样的事情。它们不是数组，而是通过传递带有length和数字键的对象来“模拟”数组。

同样的操作发生是因为一个数组和一个{ length: 5, 3: 1 }

• 拥有length属性
• 有数字键

Answer 2

在一个过于简化的例子中，它类似于：

​

var object = { length: 5, 3: 1 }

if (object.length > 3)
  object[0] = object[3]
  
console.log(object)

console.log(Array.prototype.copyWithin.call({ length: 5, 3: 1 }, 0, 3))

​

在JavaScript中，数组[]是使用正整数键的对象{}。

例如，如果在Chrome控制台中输入[,'a',,]，就会得到如下内容：

(3) [empty, "a", empty]
  1: "a"
  length: 3
  __proto__: Array(0)

如果您尝试Array.from({ length: 5, 3: 1 })：

(5) [undefined, undefined, undefined, 1, undefined]
  0: undefined
  1: undefined
  2: undefined
  3: 1
  4: undefined
  length: 5
  __proto__: Array(0)

之所以使用[].copyWithin.call，是因为copyWithin方法是Array.prototype的一部分，不能直接在像{ length: 5, 3: 1 }.copyWithin(0, 3)这样的对象上调用。

Answer 3

我一直在努力去理解它，但这是我所理解的。

函数的call方法将接受3个参数。首先是一个对象，然后是接下来的两个参数，它们是调用call方法的函数所需的参数，在本例中是copyWithin数组函数。让我用更好的英语更清楚地说明:)

基本上，函数的.call方法将为该函数的this值发送一个对象。对于在数组上调用copyWithin方法的数组，this基本上是数组本身，它是一个具有长度的对象，以及它将通过索引和值指定的一些其他项。这里棘手的部分是，如果你传递一些空的项目，他们仍然会考虑的长度。所以如果你通过

{length:5, 3:1}

而不是对于空数组this的[]，那么您将有一个长度为5的数组，其中索引为0、1和2的项(前三项)为空，索引3处的项为1，最后一项为空。它可以是这样的：

[empty,empty,empty,1,empty]

在函数的call方法中，第一个参数是指定的this参数，第二个和第三个参数是执行调用函数的参数，正如我在开始时提到的那样。

现在，除了索引3的值为1的第4项之外，还有一个5项的数组都是空的。在发送this值之后，您将传递(0,3)作为copyWithin的输入。您告诉call函数将0和3个参数传递给copyWithin数组函数，以便将第4项数组的第一项复制到最后一项--这意味着您基本上告诉您，[empty,empty,empty,3,empty]替换索引0为索引3，索引1为索引4，并且在该数组的末尾完成了。结果将是[1,empty,empty,1,empy]，如果我们将其转换为this，它将是一个对象，长度为5，索引0为1，索引3也为1，其余为空，这意味着

{0:1, 3:1, length:5}

我希望这能澄清这一点，如果我有误解的话，我会纠正的。好问题