ECMAScript 2020 中 Proxy 的六种 Trap 使用技巧-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2020 中，Proxy 是一个非常强大的功能，它可以捕获和处理对象的操作。Proxy 对象有六种 trap，它们分别是：

get
set
has
deleteProperty
apply
construct

在本篇文章中，我们将详细介绍这六种 trap 的使用技巧，并提供相关示例代码。

1. get

get trap 用于捕获对象属性的读取操作。它接收两个参数，分别是目标对象和属性名。我们可以在 get trap 中实现一些自定义的逻辑，比如隐藏属性、计算属性等。

下面是一个示例代码：

// javascriptcn.com 代码示例
const target = {
  name: 'Tom',
  age: 20
}

const proxy = new Proxy(target, {
  get(target, propKey) {
    if (propKey === 'age') {
      return target[propKey] + 1
    } else {
      return target[propKey]
    }
  }
})

console.log(proxy.name)  // 'Tom'
console.log(proxy.age)   // 21

在上面的代码中，我们使用 get trap 实现了一个计算属性 age，它比原始的属性值多了 1。

2. set

set trap 用于捕获对象属性的赋值操作。它接收三个参数，分别是目标对象、属性名和属性值。我们可以在 set trap 中实现一些自定义的逻辑，比如属性值的校验、属性值的转换等。

下面是一个示例代码：

// javascriptcn.com 代码示例
const target = {
  name: 'Tom',
  age: 20
}

const proxy = new Proxy(target, {
  set(target, propKey, value) {
    if (propKey === 'age') {
      if (value < 0 || value > 120) {
        throw new Error('Invalid age')
      }
    }
    target[propKey] = value
  }
})

proxy.age = 130  // Error: Invalid age

在上面的代码中，我们使用 set trap 实现了一个属性值的校验逻辑，如果属性值不在合法范围内，就会抛出一个错误。

3. has

has trap 用于捕获 in 操作符的操作。它接收两个参数，分别是目标对象和属性名。我们可以在 has trap 中实现一些自定义的逻辑，比如隐藏属性、计算属性等。

下面是一个示例代码：

// javascriptcn.com 代码示例
const target = {
  name: 'Tom',
  age: 20
}

const proxy = new Proxy(target, {
  has(target, propKey) {
    if (propKey === 'age') {
      return false
    } else {
      return propKey in target
    }
  }
})

console.log('name' in proxy)  // true
console.log('age' in proxy)   // false

在上面的代码中，我们使用 has trap 隐藏了属性 age，使得它不会出现在 in 操作符的结果中。

4. deleteProperty

deleteProperty trap 用于捕获 delete 操作符的操作。它接收两个参数，分别是目标对象和属性名。我们可以在 deleteProperty trap 中实现一些自定义的逻辑，比如删除保护属性、删除相关联的属性等。

下面是一个示例代码：

// javascriptcn.com 代码示例
const target = {
  name: 'Tom',
  age: 20
}

const proxy = new Proxy(target, {
  deleteProperty(target, propKey) {
    if (propKey === 'age') {
      throw new Error('Cannot delete age')
    } else {
      delete target[propKey]
      return true
    }
  }
})

delete proxy.name  // true
delete proxy.age   // Error: Cannot delete age

在上面的代码中，我们使用 deleteProperty trap 实现了一个删除保护属性的逻辑，如果属性名为 age，就会抛出一个错误。

5. apply

apply trap 用于捕获函数的调用操作。它接收三个参数，分别是目标函数、目标对象和参数数组。我们可以在 apply trap 中实现一些自定义的逻辑，比如函数参数的校验、函数结果的转换等。

下面是一个示例代码：

// javascriptcn.com 代码示例
function add(a, b) {
  return a + b
}

const proxy = new Proxy(add, {
  apply(target, thisArg, args) {
    if (args.length !== 2) {
      throw new Error('Invalid arguments')
    } else {
      return target.apply(thisArg, args) * 2
    }
  }
})

console.log(proxy(1, 2))  // 6
console.log(proxy(1))     // Error: Invalid arguments

在上面的代码中，我们使用 apply trap 实现了一个函数参数的校验逻辑，如果参数个数不为 2，就会抛出一个错误。

6. construct

construct trap 用于捕获 new 操作符的操作。它接收两个参数，分别是目标函数和参数数组。我们可以在 construct trap 中实现一些自定义的逻辑，比如创建单例对象、创建代理对象等。

下面是一个示例代码：

// javascriptcn.com 代码示例
class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}

const proxy = new Proxy(Person, {
  construct(target, args) {
    const instance = new target(...args)
    return new Proxy(instance, {
      get(target, propKey) {
        if (propKey === 'age') {
          return target[propKey] + 1
        } else {
          return target[propKey]
        }
      }
    })
  }
})

const tom = new proxy('Tom', 20)
console.log(tom.name)  // 'Tom'
console.log(tom.age)   // 21

在上面的代码中，我们使用 construct trap 创建了一个代理类，它会在创建实例时自动添加一个计算属性 age，比原始的属性值多了 1。

总结

在 ECMAScript 2020 中，Proxy 是一个非常强大的功能，它可以捕获和处理对象的操作。Proxy 对象有六种 trap，它们分别是 get、set、has、deleteProperty、apply、construct。我们可以使用这些 trap 实现一些自定义的逻辑，比如隐藏属性、计算属性、属性值的校验、属性值的转换、删除保护属性、创建单例对象、创建代理对象等。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6566c20dd2f5e1655dfbaeca