学习笔记——es2015 Proxy 对象

Proxy 对象

响应代理器，可以监视到对象的读写过程

const personProxy = new Proxy(person, {}

• 第一个参数(person)是需要代理监听的对象，
• 第二个参数为代理的处理对象，

通过 get(){} 方法监听属性的读取访问， 通过 set(){} 方法监听对象中设置属性的过程

get (target, property) {}

• 第一个参数(target)是代理目标对象，
• 第二个参数(property)是外部访问目标对象的属性名，
• 返回值会成为外部访问该属性的返回结果

  const person = {
    name: 'zce',
    age: 20
  }
  const personProxy = new Proxy(person, {
	   // 监视属性读取
  	 	get (target, property) {
     	 	console.log(target, property)
      		return 100
   		},
   		set () {}
  })
 console.log(personProxy.name)
 console.log(personProxy.xxx)

一般情况下会先判断是否有被访问的属性

// 监视属性读取
 get (target, property) {
      return property in target ? target[property] : 'default'
 },

get (target, property, value) {}

• 第一个参数(target)是代理目标对象，
• 第二个参数(property)是外部要写入目标对象的属性名，
• 第三个参数(value)是要写入的属性值

  const person = {
    name: 'zce',
    age: 20
  }
  const personProxy = new Proxy(person, {
	   // 监视属性读取
  	 	get (target, property) {
     	 	console.log(target, property)
      		return 100
   		},
   		// 监视属性设置
       set (target, property, value) {
       		// 监听校验 'age' 属性
       		if (property === 'age') {
       		  // 如果不是数字 ，则报错
		      if (!Number.isInteger(value)) {
		        throw new TypeError(`${value} is not an int`)
		      }
		    }
		    target[property] = value
            console.log(target, property, value)
       }
 })
  
  personProxy.gender = true
  personProxy.age = 100
  personProxy.age = '十八'

---

Proxy 对比 Object.defineProperty() 的优势

• 优势1：Proxy 可以监视读写以外的操作 （deleteProperty(target, property){}）
• 优势2：Proxy 可以很方便的监视数组操作
• 优势3：Proxy 不需要侵入对象，以非侵入的方式监听对象的读写

优势1 示例
deleteProperty(target, property){}

• 第一个参数(target)是代理目标对象
• 第二个参数(property)是需要删除的属性名称

const person = {
  name: 'zce',
  age: 20
}

const personProxy = new Proxy(person, {
  deleteProperty (target, property) {
    console.log('delete', property)
    delete target[property]
  }
})

delete personProxy.age
console.log(person)

优势2 示例

const list = []

const listProxy = new Proxy(list, {
  set (target, property, value) {
    console.log('set', property, value)
    target[property] = value
    return true // 表示设置成功
  }
})

listProxy.push(100)
listProxy.push(100)

优势3 示例

Object.defineProperty方式

const person = {}

Object.defineProperty(person, 'name', {
  get () {
    console.log('name 被访问')
    return person._name
  },
  set (value) {
    console.log('name 被设置')
    person._name = value
  }
})
Object.defineProperty(person, 'age', {
  get () {
    console.log('age 被访问')
    return person._age
  },
  set (value) {
    console.log('age 被设置')
    person._age = value
  }
})

person.name = 'jack'

console.log(person.name)

Proxy 方式

// Proxy 方式更为合理
const person2 = {
  name: 'zce',
  age: 20
}

const personProxy = new Proxy(person2, {
  get (target, property) {
    console.log('get', property)
    return target[property]
  },
  set (target, property, value) {
    console.log('set', property, value)
    target[property] = value
  }
})

personProxy.name = 'jack'

console.log(personProxy.name)

---

Proxy 内部方法参考