Proxy 进阶应用

function sum(a, b) {
  return a + b
}

const proxy = new Proxy(sum, {
  apply(target, thisArg, args) {
    console.log(`调用函数，参数: ${args}`)
    return target.apply(thisArg, args)
  },
})

proxy(1, 2) // '调用函数，参数: 1,2' 返回 3
proxy.call(null, 1, 2) // 同上
proxy.apply(null, [1, 2]) // 同上

function Person(name) {
  this.name = name
}

const PersonProxy = new Proxy(Person, {
  construct(target, args, newTarget) {
    console.log(`创建实例，参数: ${args}`)
    return new target(...args)
  },
})

new PersonProxy('张三') // '创建实例，参数: 张三'

const handler = {
  getPrototypeOf(target) {
    console.log('获取原型')
    return Object.getPrototypeOf(target)
  },
}

const proxy = new Proxy({}, handler)
Object.getPrototypeOf(proxy) // '获取原型'

const handler = {
  setPrototypeOf(target, proto) {
    console.log('设置原型')
    return Object.setPrototypeOf(target, proto)
  },
}

const proxy = new Proxy({}, handler)
Object.setPrototypeOf(proxy, {}) // '设置原型'

const handler = {
  isExtensible(target) {
    console.log('检查可扩展性')
    return Object.isExtensible(target)
  },
}

const proxy = new Proxy({}, handler)
Object.isExtensible(proxy) // '检查可扩展性'

const handler = {
  preventExtensions(target) {
    console.log('阻止扩展')
    return Object.preventExtensions(target)
  },
}

const proxy = new Proxy({}, handler)
Object.preventExtensions(proxy) // '阻止扩展'

// 简化版响应式实现
const targetMap = new WeakMap()
let activeEffect = null

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      // 收集依赖
      track(target, key)
      const result = Reflect.get(target, key, receiver)
      // 深层响应式
      if (typeof result === 'object' && result !== null) {
        return reactive(result)
      }
      return result
    },

    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      if (oldValue !== value) {
        // 触发更新
        trigger(target, key)
      }
      return result
    },
  })
}

function track(target, key) {
  if (!activeEffect) return

  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }

  let deps = depsMap.get(key)
  if (!deps) {
    depsMap.set(key, (deps = new Set()))
  }

  deps.add(activeEffect)
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return

  const deps = depsMap.get(key)
  if (deps) {
    deps.forEach((effect) => effect())
  }
}

function effect(fn) {
  activeEffect = fn
  fn()
  activeEffect = null
}

// 使用
const state = reactive({ count: 0 })

effect(() => {
  console.log('Count:', state.count)
})

state.count++ // 自动打印 'Count: 1'
state.count++ // 自动打印 'Count: 2'

function createLogger(target, name = 'Object') {
  return new Proxy(target, {
    get(target, property) {
      console.log(`[GET] ${name}.${String(property)}`)
      return target[property]
    },

    set(target, property, value) {
      console.log(`[SET] ${name}.${String(property)} = ${value}`)
      target[property] = value
      return true
    },

    deleteProperty(target, property) {
      console.log(`[DELETE] ${name}.${String(property)}`)
      delete target[property]
      return true
    },

    apply(target, thisArg, args) {
      console.log(`[CALL] ${name}(${args.join(', ')})`)
      return target.apply(thisArg, args)
    },
  })
}

const user = createLogger({ name: '张三', age: 25 }, 'user')
user.name // [GET] user.name
user.age = 26 // [SET] user.age = 26
delete user.name // [DELETE] user.name

function memoize(fn) {
  const cache = new Map()

  return new Proxy(fn, {
    apply(target, thisArg, args) {
      const key = JSON.stringify(args)

      if (cache.has(key)) {
        console.log('From cache')
        return cache.get(key)
      }

      console.log('Computing...')
      const result = target.apply(thisArg, args)
      cache.set(key, result)
      return result
    },
  })
}

const fibonacci = memoize(function fib(n) {
  if (n <= 1) return n
  return fib(n - 1) + fib(n - 2)
})

fibonacci(40) // 'Computing...'（首次计算）
fibonacci(40) // 'From cache'（使用缓存）

function readonly(target) {
  return new Proxy(target, {
    set(target, property) {
      console.warn(`Cannot set ${String(property)} on a readonly object`)
      return true
    },

    deleteProperty(target, property) {
      console.warn(`Cannot delete ${String(property)} from a readonly object`)
      return true
    },

    get(target, property, receiver) {
      const value = Reflect.get(target, property, receiver)
      // 深层只读
      if (typeof value === 'object' && value !== null) {
        return readonly(value)
      }
      return value
    },
  })
}

const config = readonly({
  api: 'https://api.example.com',
  settings: {
    debug: false,
  },
})

config.api = 'xxx' // 警告，不会修改
config.settings.debug = true // 警告，不会修改

function createPrivate(target, privateProps = []) {
  const privateSet = new Set(privateProps)

  return new Proxy(target, {
    get(target, property) {
      if (privateSet.has(property)) {
        throw new Error(`Cannot access private property: ${String(property)}`)
      }
      return target[property]
    },

    set(target, property, value) {
      if (privateSet.has(property)) {
        throw new Error(`Cannot set private property: ${String(property)}`)
      }
      target[property] = value
      return true
    },

    has(target, property) {
      if (privateSet.has(property)) {
        return false
      }
      return property in target
    },

    ownKeys(target) {
      return Object.keys(target).filter((key) => !privateSet.has(key))
    },
  })
}

const user = createPrivate({ name: '张三', _password: '123456', age: 25 }, [
  '_password',
])

user.name // '张三'
// user._password; // Error
Object.keys(user) // ['name', 'age']
'_password' in user // false

function typed(schema) {
  return new Proxy(
    {},
    {
      set(target, property, value) {
        const type = schema[property]

        if (type && typeof value !== type) {
          throw new TypeError(
            `${String(property)} must be ${type}, got ${typeof value}`
          )
        }

        target[property] = value
        return true
      },
    }
  )
}

const person = typed({
  name: 'string',
  age: 'number',
  active: 'boolean',
})

person.name = '张三' // OK
person.age = 25 // OK
// person.age = '25'; // TypeError

function lazy(factory) {
  let instance = null
  let initialized = false

  return new Proxy(
    {},
    {
      get(target, property) {
        if (!initialized) {
          instance = factory()
          initialized = true
        }
        return instance[property]
      },

      set(target, property, value) {
        if (!initialized) {
          instance = factory()
          initialized = true
        }
        instance[property] = value
        return true
      },
    }
  )
}

const heavyObject = lazy(() => {
  console.log('Initializing heavy object...')
  return {
    data: new Array(1000000).fill(0),
    process() {
      /* ... */
    },
  }
})

// 尚未初始化
console.log('Before access')
heavyObject.data // 'Initializing heavy object...'（首次访问时初始化）
heavyObject.data // 已初始化，直接返回

function singleton(Class) {
  let instance = null

  return new Proxy(Class, {
    construct(target, args) {
      if (!instance) {
        instance = new target(...args)
      }
      return instance
    },
  })
}

class Database {
  constructor(url) {
    console.log('Creating database connection...')
    this.url = url
  }
}

const SingletonDatabase = singleton(Database)

const db1 = new SingletonDatabase('localhost:5432')
const db2 = new SingletonDatabase('localhost:5432')

console.log(db1 === db2) // true

const proxy = new Proxy(target, {
  get(target, property, receiver) {
    // 使用 Reflect 确保正确的 this 绑定
    return Reflect.get(target, property, receiver)
  },

  set(target, property, value, receiver) {
    return Reflect.set(target, property, value, receiver)
  },

  has(target, property) {
    return Reflect.has(target, property)
  },

  deleteProperty(target, property) {
    return Reflect.deleteProperty(target, property)
  },
})