选项解析引擎：默认值、作用域、Proxy 与可脚本化选项

如果说 Chart.js 中有哪个子系统称得上"恰到好处的过度设计"，那一定是选项解析引擎。当你在数据集上设置 backgroundColor: 'red' 时，这个值需要依次经过数据集级别的选项、图表类型覆盖项、元素默认值以及全局默认值——按照严格的优先级顺序解析，同时还要支持接收运行时上下文的函数、按数据点索引的数组，以及能够实时反映运行时变化的回退链。本文将带你彻底搞清楚这一切是如何运作的。

三个全局存储：defaults、overrides、descriptors

Chart.js 在 core.defaults.js 中维护着三个独立的单例存储：

src/core/core.defaults.js#L7-L8

classDiagram
    class defaults {
        +backgroundColor: string
        +borderColor: string
        +color: string
        +font: object
        +elements: object
        +datasets: object
        +plugins: object
        +scales: object
        +set(scope, values)
        +get(scope)
        +route(scope, name, target, targetName)
        +describe(scope, values)
        +override(scope, values)
    }

    class overrides {
        <<prototype: null>>
        +bar: object
        +line: object
        +doughnut: object
        Note: chart-type-specific settings
    }

    class descriptors {
        <<prototype: null>>
        +_scriptable: fn
        +_indexable: fn
        Note: metadata about option properties
    }

    defaults --> overrides : override() writes here
    defaults --> descriptors : describe() writes here

defaults 是 Defaults 类的实例，初始化时包含 color: '#666'、font.size: 12 等基础值，是所有选项的最终回退来源。

overrides 存储图表类型专属的配置。注册 BarController 时，其 overrides（例如 { scales: { x: { type: 'category' } } }）会被合并到这里。它的优先级高于 defaults，但低于用户自定义选项。

descriptors 存储选项属性的元数据，具体包括哪些属性是可脚本化的（可以是函数）以及哪些是可索引的（可以是数组）。初始描述符规定：所有以 on 开头的属性（如 onHover）不可脚本化，events 不可索引。

Defaults 类与 defaults.route()

Defaults 类看似简单，却包含代码库中最精妙的设计之一——route() 方法：

src/core/core.defaults.js#L130-L157

flowchart LR
    subgraph "route('elements.arc', 'backgroundColor', '', 'color')"
        ARC_BG["elements.arc.backgroundColor"] -->|"getter: valueOrDefault(this._backgroundColor, defaults.color)"| DEFAULTS_COLOR["defaults.color"]
    end

    DEV["defaults.color = 'blue'"] -->|runtime change| DEFAULTS_COLOR
    ARC_BG -->|"Now resolves to 'blue'"| RESULT["'blue'"]

route() 调用时，会通过 Object.defineProperties 将一个普通属性替换为 getter/setter 对。getter 优先读取私有属性 _backgroundColor；若其值为 undefined，则回退到目标作用域（defaults.color）。setter 则负责写入私有属性。

这构建了一条实时回退链：如果你在运行时修改了 defaults.color，所有将 backgroundColor 路由到 defaults.color 的元素都会立即反映这一变化。如果用简单的属性复制，就无法实现这种效果。

route() 机制在组件注册时被调用。注册 ArcElement 时，其 defaultRoutes 属性会指定 backgroundColor 应回退到全局 color。这正是 Chart.js 实现级联默认值、同时避免重复存储数据的方式。

Config 类与作用域解析

Config 类负责计算有序的作用域数组——这是解析器查找选项值时所遍历的核心数据结构：

src/core/core.config.js#L158-L381

chartOptionScopes() 方法返回解析图表级选项所需的作用域列表：

src/core/core.config.js#L331-L342

sequenceDiagram
    participant Consumer as chart.options.X
    participant Resolver as Proxy Resolver
    participant S1 as options (user config)
    participant S2 as overrides[type]
    participant S3 as defaults.datasets[type]
    participant S4 as defaults
    participant S5 as descriptors

    Consumer->>Resolver: get 'backgroundColor'
    Resolver->>S1: has 'backgroundColor'?
    S1-->>Resolver: undefined
    Resolver->>S2: has 'backgroundColor'?
    S2-->>Resolver: undefined
    Resolver->>S3: has 'backgroundColor'?
    S3-->>Resolver: undefined
    Resolver->>S4: has 'backgroundColor'?
    S4-->>Resolver: 'rgba(0,0,0,0.1)'
    Resolver-->>Consumer: 'rgba(0,0,0,0.1)'

对于数据集元素选项，作用域链会更长。第 252 行的 datasetElementScopeKeys() 方法会生成形如 ['datasets.bar.elements.point', 'datasets.bar', 'elements.point', ''] 的键列表，第 296 行的 getOptionScopes() 则依次在 mainScope、options、overrides[type]、defaults 和 descriptors 中遍历每个键：

src/core/core.config.js#L296-L325

最终结果是一个由作用域对象构成的 Set，转换为数组后使用。作用域缓存（_scopeCache 和 _resolverCache）确保相同的键列表只会触发一次计算。

基于 Proxy 的解析器：_createResolver()

实际的解析魔法发生在 helpers.config.ts 中。_createResolver() 函数创建一个 JavaScript Proxy，通过懒加载方式遍历作用域数组来解析选项：

src/helpers/helpers.config.ts#L27-L108

第 64 行的 get 陷阱是解析真正发生的地方。它调用 _resolveWithPrefixes()，依次尝试每个前缀。例如，若前缀列表为 ['hover', '']，访问 borderColor 时，会先在所有作用域中查找 hoverBorderColor，找不到再回退到 borderColor：

src/helpers/helpers.config.ts#L390-L405

flowchart TD
    ACCESS["proxy.borderColor"] --> CACHED{"Already cached?"}
    CACHED -->|Yes| RETURN["Return cached value"]
    CACHED -->|No| PREFIXES["Try prefixes: ['hover', '']"]
    PREFIXES --> P1["Look for 'hoverBorderColor' in scopes"]
    P1 -->|Found| CHECK_SUB{"Is value an object<br/>needing sub-resolver?"}
    P1 -->|Not found| P2["Look for 'borderColor' in scopes"]
    P2 -->|Found| CHECK_SUB
    P2 -->|Not found| UNDEF["Return undefined"]
    CHECK_SUB -->|Yes| SUB["createSubResolver()"]
    CHECK_SUB -->|No| CACHE["Cache & return value"]
    SUB --> CACHE

解析结果会直接缓存在 Proxy 的目标对象上。_cached() 辅助函数在调用解析器之前先检查 Object.prototype.hasOwnProperty，确保每个属性最多只被解析一次。

提示： 调试选项解析时，可以在调试器中访问 resolver._scopes 来查看解析器内部的作用域列表，从而直观地看到当前搜索的有序作用域对象数组。

当解析结果是一个普通对象（原型为 null 或 Object）时，createSubResolver() 会创建一个带有独立作用域链的嵌套解析器。font.size、ticks.color 等嵌套选项正是通过这一机制解析的——font 的解析器本身也是一个 Proxy，负责在作用域中查找 font 的子属性。

上下文绑定与可脚本化选项

第二层 Proxy——_attachContext()——在解析器外包裹运行时上下文，以支持可脚本化选项和可索引选项：

src/helpers/helpers.config.ts#L118-L195

当感知上下文的 get 陷阱遇到可脚本化属性的函数值时，会调用 _resolveScriptable()：

src/helpers/helpers.config.ts#L255-L273

可脚本化解析器会以 (context, subProxy) 的形式调用该函数，其中 context 包含 { chart, dataIndex, datasetIndex, ... } 等信息。第 262 行的 _stack Set 用于检测无限递归——如果某个可脚本化选项引用了另一个又循环引用回来的选项，系统会捕获调用栈并抛出错误，而不是让浏览器陷入无响应。

对于可索引选项（数组），第 275 行的 _resolveArray() 会检查上下文是否包含 index 属性，并返回 value[context.index % value.length]。backgroundColor: ['red', 'blue', 'green'] 能为不同数据点分配不同颜色，正是依赖这一机制实现的。

性能优化：needContext()

并非每次选项解析都需要承担上下文 Proxy 的开销。needContext() 函数会快速扫描，判断指定属性中是否有值为函数或数组的情况：

src/core/core.config.js#L405-L418

flowchart TD
    START["resolveNamedOptions(scopes, names, context)"] --> RESOLVE["Create base resolver"]
    RESOLVE --> CHECK["needContext(resolver, names)"]
    CHECK -->|"All static values"| SHARED["result.$shared = true<br/>Read values directly from resolver"]
    CHECK -->|"Has functions or arrays"| CONTEXT["result.$shared = false<br/>Create context-wrapped resolver"]
    CONTEXT --> READ["Read values from context resolver"]
    SHARED --> READ
    READ --> RETURN["Return result object"]

如果 needContext() 返回 false，解析后的选项会被标记为 $shared: true。DatasetController 会利用这个标志进行一项重要优化：当数据集中所有元素共享完全相同的静态选项时，它们可以直接引用同一个共享选项对象，而无需为每个元素单独创建副本。我们将在第 5 篇文章中详细探讨这一优化。

第 402 行的 hasFunction() 辅助函数甚至会检查对象中是否存在值为函数的属性，确保像 { size: 12 } 这样的静态对象不会触发上下文包装，而 { size: (ctx) => ctx.active ? 14 : 12 } 则会触发。

与下一篇的衔接

选项解析引擎几乎被所有其他子系统所依赖——controller 通过它解析元素选项，scale 通过它解析刻度选项，plugin 通过它访问自身配置。但 controller、scale 和 plugin 究竟是如何注册到系统中的？下一篇文章，我们将深入 Registry 与 Plugin 系统，探讨组件注册如何触发默认值合并与路由配置，以及 plugin 生命周期如何在图表的整个生命周期中编排丰富的 hook 调用。