JavaScript代码[].fill.call({ length: 3 }, 4)的运行原理是什么？

核心原理 #

JavaScript 中的数组实例方法都是通用设计的，fill 也不例外：它不要求 this 必须是真实的数组实例，只要求 this 是拥有可读写 length 属性、可通过索引键读写属性值的对象，这类对象也被称为类数组对象。

fill 方法执行逻辑 #

fill 运行时会按以下步骤执行：

1. 读取当前 this 的 length 属性，转换为整数作为填充的范围上限
2. 确定填充的起始索引（默认值为 0）和结束索引（默认值为刚读取的 length 值）
3. 遍历从起始索引到结束索引前一位的所有整数位，逐个给 this 的对应索引属性赋值为传入的填充值
4. 返回修改后的 this 对象

针对你的两个疑问的解答 #

1. 为什么普通对象带 length 属性就可以被 fill 修改？ #

你提供的代码 [].fill.call({ length: 3 }, 4) 中，通过 call 将 fill 方法的 this 绑定到了 {length: 3} 这个普通对象上：

• fill 第一步读取到 length 为 3，确定要填充 0、1、2 三个索引位
• 逐个给对象新增 0、1、2 三个属性，值均为 4
• 最终返回修改后的对象，结果就是 {0: 4, 1: 4, 2: 4, length: 3}

length 属性的特殊性就在于它是所有数组通用方法判断操作范围的核心依据，只要存在可读取的 length 属性，方法就能正常执行逻辑。

2. 为什么空数组直接调用 fill 没有效果？ #

空数组的 length 属性默认为 0，fill 读取到长度为 0 时，会判定没有需要填充的索引位，自然不会执行任何赋值操作，也就不会修改原数组。
如果手动给空数组设置 length 后再调用 fill 就会生效，示例代码如下：

const arr = []
arr.length = 3
arr.fill(4) // 返回 [4,4,4]，原数组也被修改

这个逻辑和你示例中操作普通对象的逻辑完全一致。

内容的提问来源于stack exchange，提问作者JoePythonKing