ES6中Proxy和Reflect

面向bug编程
846 阅读5分钟

学习了coderwhy的JavaScript高级语法视频课的笔记

如有错误或者不合适的地方，敬请见谅，欢迎指出和拓展，谢谢各位了

1、监听对象的操作-方式一（Object.defineProperty）

const obj = {
  name: 'xwl',
  age: 18
}

Object.keys(obj).forEach(item => {
  let value = obj[item]
  Object.defineProperty(obj, item, {
    get() {
      console.log('get的操作触发了')
      return value
    },
    set(val) {
      console.log('set的操作触发了')
      value = val
    }
  })
})

obj.name = 'xxx'
console.log(obj.name)

obj.age = 20
console.log(obj.age)
  • 缺点：
    • 首先，Object.defineProperty设计的初衷，不是为了去监听截止一个对象中 所有的属性的。我们在定义某些属性的时候，初衷其实是定义普通的属性，但是后面我们强行将它变成了数据属性描述符；
    • 其次，如果我们想监听更加丰富的操作，比如新增属性、删除属性，那么Object.defineProperty是无能为力的；
    • 所以我们要知道，存储数据描述符设计的初衷并不是为了去监听一个完整的对象。

2、监听对象的操作-方式二（Proxy）

  1. 在ES6中，新增了一个Proxy类，这个类从名字就可以看出来，是用于帮助我们创建一个代理的：
  • 也就是说，如果我们希望监听一个对象的相关操作，那么我们可以先创建一个代理对象（Proxy对象） —— const p = new Proxy(target, handler) ；
  • 之后对该对象的所有操作，都通过代理对象来完成，代理对象可以监听我们想要对原对象进行哪些操作。
  1. Proxy的set和get捕获器
  • 如果我们想要侦听某些具体的操作，那么就可以在handler中添加对应的捕捉器（Trap）：
  • set函数有四个参数：
    • target：目标对象（侦听的对象）；
    • property：将被设置的属性key；
    • value：新属性值；
    • receiver：调用的代理对象。
  • get函数有三个参数：
    • target：目标对象（侦听的对象）；
    • property：被获取的属性key；
    • receiver：调用的代理对象。
const obj = {
  name: 'xwl',
  age: 18
}

const objProxy = new Proxy(obj, {
  get(target, key) {
    console.log('get的操作触发了')
    return target[key]
  },
  set(target, key, newValue) {
    console.log('set的操作触发了')
    target[key] = newValue
  }
})

objProxy.name = 'xxx'
console.log(objProxy.name)

objProxy.age = 20
console.log(objProxy.age)
  • 缺点：
    • 虽然上面已经可以解决方式一的问题，但是 target[key] = newValue 还是对obj原对象进行操作，就不符合Proxy的代理。
  1. Proxy所有捕获器

  • 13个捕捉器分别是做什么的呢？

  • （1）handler.getPrototypeOf()

    • Object.getPrototypeOf 方法的捕捉器。

  • （2）handler.setPrototypeOf()

    • Object.setPrototypeOf 方法的捕捉器。

  • （3）handler.isExtensible()

    • Object.isExtensible 方法的捕捉器。

  • （4）handler.preventExtensions()

    • Object.preventExtensions 方法的捕捉器。

  • （5）handler.getOwnPropertyDescriptor()

    • Object.getOwnPropertyDescriptor 方法的捕捉器。

  • （6）handler.defineProperty()

    • Object.defineProperty 方法的捕捉器。

  • （7）handler.ownKeys()

    • Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。

  • （8）handler.has()

    • in 操作符的捕捉器。

  • （9）handler.get()

    • 属性读取操作的捕捉器。

  • （10）handler.set()

    • 属性设置操作的捕捉器。

  • （11）handler.deleteProperty()

    • delete 操作符的捕捉器。

  • （12）handler.apply()-函数

    • 函数调用操作的捕捉器。

  • （13）handler.construct()-函数

    • new 操作符的捕捉器。
// 1、
const obj = {
  name: 'xwl',
  age: 18
}

const objProxy = new Proxy(obj, {
  has(target, key) {
    console.log('has的操作触发了')
    return key in target
  },
  deleteProperty(target, key) {
    console.log('deleteProperty的操作触发了')
    return delete target[key]
  }
})

console.log('name' in objProxy)

console.log(delete objProxy.age)

// 2、
function foo() {}

const fooProxy = new Proxy(foo, {
  apply: function (target, thisArg, argArray) {
    console.log('对foo函数进行了apply调用')
    return target.apply(thisArg, argArray)
  },
  // newTarget,最初被调用的构造函数，就例子而言是fooProxy
  construct: function (target, argArray, newTarget) {
    console.log('对foo函数进行了new调用')
    return new target(...argArray)
  }
})

fooProxy.apply({}, ['abc', 'cba'])
new fooProxy('abc', 'cba')

3、监听对象的操作-方式三（Proxy-Reflect）

  1. Reflect的作用
  • Reflect也是ES6新增的一个API，它是一个对象，字面的意思是反射。
  • 那么这个Reflect有什么用呢？
  • 它主要提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法；
    • 比如Reflect.getPrototypeOf(target)类似于 Object.getPrototypeOf()；
    • 比如Reflect.defineProperty(target, propertyKey, attributes)类似于Object.defineProperty() 。
  • 如果我们有Object可以做这些操作，那么为什么还需要有Reflect这样的新增对象呢？
    • 这是因为在早期的ECMA规范中没有考虑到这种对 对象本身 的操作如何设计会更加规范，所以将这些API放到了Object上面；
    • 但是Object作为一个构造函数，这些操作实际上放到它身上并不合适；
    • 另外还包含一些类似于 in、delete操作符，让JS看起来是会有一些奇怪的；
    • 所以在ES6中新增了Reflect，让我们这些操作都集中到了Reflect对象上。
  • 那么Object和Reflect对象之间的API关系，可以参考MDN文档： 
const obj = {
  name: 'xwl',
  age: 18
}

const objProxy = new Proxy(obj, {
  get(target, key) {
    console.log('get的操作触发了')
    return Reflect.get(target, key)
  },
  set(target, key, newValue) {
    console.log('set的操作触发了')
    Reflect.set(target, key, newValue)
  }
})

objProxy.name = 'xxx'
console.log(objProxy.name)

objProxy.age = 20
console.log(objProxy.age)

4、receiver参数的作用

在上面中，一直没有讲到Proxy中get和set捕捉器的receiver参数的作用。

const obj = {
  _name: 'xwl',
  get() {
    return this._name
  },
  set(newValue) {
    this._name = newValue
  }
}

const objProxy = new Proxy(obj, {
  get(target, key) {
    console.log('get的操作触发了')
    return target[key]
  },
  set(target, key, newValue) {
    console.log('set的操作触发了')
    target[key] = newValue
  }
})

objProxy.name = 'xxx'
console.log(objProxy.name)

image.png

  • 也就是说，在第3步时，操作的对象就是obj对象，并没有经过Proxy创建的代理，此时可以通过receiver参数的作用。
const obj = {
  _name: 'xwl',
  get name() {
    //相当于objProxy._name,再一次通过Proxy创建的代理
    return this._name
  },
  set name(newValue) {
    this._name = newValue
  }
}

const objProxy = new Proxy(obj, {
  // receiver是创建出来的代理对象
  get(target, key, receiver) {
    console.log('get的操作触发了')
    return Reflect.get(target, key, receiver)
  },
  set(target, key, newValue) {
    console.log('set的操作触发了')
    Reflect.set(target, key, newValue, receiver)
  }
})
// objProxy.name = 'xxx'
console.log(objProxy.name)

5、Reflect的补充 —— construct作用

function Student(name, age) {
  this.name = name
  this.age = age
}

function Teacher() {}

// const stu = new Student("why", 18)
// console.log(stu)
// console.log(stu.__proto__ === Student.prototype)

// 执行Student函数中的内容, 但是创建出来对象是Teacher对象
const teacher = Reflect.construct(Student, ['why', 18], Teacher)
console.log(teacher) //Teacher { name: 'why', age: 18 }
console.log(teacher.__proto__ === Teacher.prototype) //true
avatar
文章
阅读
粉丝