JavaScript 中怎么利用原型链特性实现对象属性的懒加载-js教程-PHP中文网

javascript可通过object.defineproperty（原型getter+实例覆盖）或proxy（缓存+委托）实现懒加载：首次访问计算并缓存，后续直接返回；前者轻量适合多实例共享，后者灵活支持异步与统一控制。

javascript 中怎么利用原型链特性实现对象属性的懒加载

JavaScript 中可以通过 拦截属性访问（如 get 代理或 Object.defineProperty）结合原型链的属性查找机制，实现对象属性的懒加载——即首次读取时才计算/获取值，并缓存结果供后续访问复用。

利用 Object.defineProperty + 原型链实现懒加载

核心思路：在原型上为属性定义 getter，首次访问时执行初始化逻辑、设置实例自身属性（覆盖原型上的 getter），后续访问直接走实例属性，跳过 getter。

原型上的 getter 只触发一次，之后实例上有了同名自有属性，原型链查找就停止了
无需修改实例构造逻辑，对使用者透明
适合多个实例共享同一套懒加载逻辑的场景

示例：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function DataHolder(id) {
  this.id = id;
}

// 在原型上定义懒加载属性
Object.defineProperty(DataHolder.prototype, 'data', {
  get() {
    // 计算/获取真实值（模拟耗时操作）
    const value = `fetched for ${this.id}`;
    // 将结果直接写到实例上，覆盖原型 getter
    Object.defineProperty(this, 'data', { value, writable: true, enumerable: true });
    return value;
  },
  enumerable: true,
  configurable: true // 允许后续重新定义
});

const a = new DataHolder(1);
console.log(a.data); // 触发 getter → "fetched for 1"
console.log(a.data); // 直接返回实例属性 → "fetched for 1"
console.log(Object.hasOwn(a, 'data')); // true，已变成自有属性

用 Proxy 拦截 + 原型委托实现更灵活的懒加载

若需对整个对象做统一懒加载控制（比如只对未初始化字段生效），可用 Proxy 拦截 get，内部维护一个缓存 map，并将原型作为数据源委托目标。

Proxy 不改变原型链本身，但能动态决定如何响应属性读取
可统一处理多个属性，支持异步初始化（配合 Promise 缓存）
适合封装懒加载容器类，如 LazyObject、LazyMap

示例（同步懒加载）：

class LazyWrapper {
  constructor(target, loader) {
    this._target = target;        // 原型或数据源
    this._cache = new Map();     // 已加载的属性值
    this._loader = loader;       // (key) => value 的加载函数
  }

  get(target, prop) {
    if (this._cache.has(prop)) {
      return this._cache.get(prop);
    }
    const value = this._loader(prop);
    this._cache.set(prop, value);
    return value;
  }
}

const proto = { name: 'default' };
const lazyObj = new Proxy({}, new LazyWrapper(proto, (key) => {
  console.log(`Loading ${key}...`);
  return key === 'heavy' ? Array(100000).fill(0).reduce((a) => a + 1, 0) : proto[key];
}));

console.log(lazyObj.name);   // "default"（来自 proto）
console.log(lazyObj.heavy);  // Loading heavy... → 100000
console.log(lazyObj.heavy);  // 直接返回缓存值