JavaScript中数组方括号[]访问语法的底层实现原理探究

Great question—this is one of those "obvious" syntax features that hides some interesting engine behavior and spec details. Let's unpack each part of your question:

1. 当你执行arr[3]时，JavaScript内部发生了什么？ #

First, let's start with the basics: 方括号语法对于数组和普通对象来说，本质都是属性访问器。当你写arr[3]，JavaScript引擎会按这些步骤运作：

• 将索引3转换为字符串"3"（因为对象的属性键只能是字符串或Symbol类型）。
• 在数组对象的属性集合中查找键为"3"的属性值。
• 如果没找到，会沿着原型链（Array.prototype → Object.prototype）继续查找。

但数组有特殊的规范优化：

• 规范定义了数组索引的概念：指0到2^32-2之间的整数。当你使用符合这个范围的整数作为键时，JS引擎会把它当作数组索引处理，这会关联到length属性的自动更新（比如你设置arr[10] = 'x'，如果原来的length小于11，length会自动变成11）。
• 现代JS引擎（比如V8）会对密集数组（没有空槽的数组）做内存优化：用连续的内存块存储元素，而不是像普通对象那样用哈希表，所以数组索引的访问速度比普通对象的属性访问快得多。

关于你问的是否调用Array.prototype上的方法？答案是不会直接调用。方括号访问是语言层面的基础操作，不是方法调用。不过数组的一些行为（比如length自动更新）是引擎根据规范实现的，背后没有暴露给用户的方法。

2. 数组是不是本质上就是带有大量整数属性的普通对象？ #

Sort of—but with critical differences that make arrays more than just "objects with integer keys":

• 动态length属性：普通对象没有自动关联的length，但数组的length会和最大的数组索引同步变化。比如你设置arr.length = 2，数组会被截断到前2个元素；设置arr[5] = 'y'，length会自动变成6。
• 引擎优化：如前所述，密集数组会被存储为连续内存，访问和操作速度远快于普通对象。稀疏数组（有空槽的）可能会退化为类似普通对象的存储，但引擎还是会做特定优化。
• 原型链差异：数组继承自Array.prototype，拥有push、map、filter等专属方法，普通对象默认继承自Object.prototype，没有这些方法。
• 语法限制：你发现的objArray.0会报错，这是因为JavaScript的标识符规则不允许数字开头，所以整数属性只能用方括号访问，不管是数组还是普通对象。

3. 能不能拦截方括号访问来自定义行为？ #

Yes! Since ES6 introduced Proxy, you can absolutely intercept and customize bracket access (both get and set operations). Here's a quick example:

const customArray = new Proxy(['apple', 'banana', 'cherry'], {
  get(target, prop) {
    // 检查是否是数组索引
    if (!isNaN(Number(prop))) {
      console.log(`Getting element at index ${prop}`);
      // 自定义逻辑：比如返回大写的元素
      return target[prop]?.toUpperCase();
    }
    // 非索引属性（比如length、map）直接返回原属性
    return target[prop];
  },
  set(target, prop, value) {
    if (!isNaN(Number(prop))) {
      console.log(`Setting element at index ${prop} to "${value}"`);
      // 自定义逻辑：比如只允许字符串值
      if (typeof value === 'string') {
        target[prop] = value;
        // 更新length（引擎会自动处理，但这里可以手动干预）
        target.length = Math.max(target.length, Number(prop) + 1);
        return true;
      } else {
        throw new Error('Only string values are allowed!');
      }
    }
    target[prop] = value;
    return true;
  }
});

console.log(customArray[1]); // 打印"Getting element at index 1"，返回"BANANA"
customArray[3] = 'date'; // 打印"Setting element at index 3 to "date""
customArray[4] = 123; // 抛出错误：Only string values are allowed!

早期JavaScript确实没有办法拦截原生的方括号访问，这也是为什么旧的数组子类实现容易出现奇怪的行为（比如length不同步）。但Proxy解决了这个问题，让你可以完全自定义数组的索引访问逻辑。

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