proxy ES6

1. Agente

Proxy se utiliza para modificar el comportamiento predeterminado de determinadas operaciones, lo que equivale a realizar modificaciones a nivel de lenguaje, por lo que pertenece a una especie de "metaprogramación", es decir, programar el lenguaje de programación.

Se puede entender que el proxy establece una capa de "intercepción" antes del objeto de destino. El acceso externo al objeto debe pasar primero a través de esta capa de interceptación, por lo que se proporciona un mecanismo para filtrar y reescribir el acceso externo. El significado original de la palabra Proxy es proxy, y se usa aquí para indicar que "representará" ciertas operaciones, lo que puede traducirse como "agente".

Dos métodos de interceptación comúnmente utilizados

// ES5
let obj = {
    
    }
let newVal = ''
Object.defineProperty(obj, 'name', {
    
    
  get () {
    
    
    console.log('get')
    return newVal
  },
  set (val) {
    
    
    console.log('set')
    newVal = val
  }
})
obj.name = 'zz'
console.log(obj.name )

// ES6 proxy
let obj = {
    
    }
let p = new Proxy(obj, {
    
    })
p.name = 'zzzzz'
console.log(p, obj.name)

// get
let arr = [11,22,33]
arr = new Proxy(arr, {
    
    
  get(target, key) {
    
    
    console.log(target, key)
    if (key in target) {
    
    
      return target[key]
    } else {
    
    
      return 'err'
    }
  }
})
console.log(arr[5])

// set
let arr = []
arr = new Proxy(arr, {
    
    
  set(target, key, val) {
    
    
    if (typeof val === 'number') {
    
    
      target[key] = val
      return true
    } else {
    
    
      return false
    }
  }
})
arr.push(1)
console.log(arr, arr[0], arr[1])

// has
let range = {
    
    
  min: 1,
  max: 5
}
range = new Proxy(range, {
    
    
  has(target, key) {
    
    
    return key >= target.min && key <= target.max
  }
})
console.log( 2 in range)
console.log( 6 in range)

// ownKeys
let obj = {
    
    
  name: 'zz',
  [Symbol('66')]: 66
}
Object.getOwnPropertyNames(obj)
Object.getOwnPropertySymbols(obj)
Object.keys(obj)
Reflect.ownKeys(obj)
let userInfo = {
    
    
  name: 'zz',
  age: 25,
  _password: '123456'
}
userInfo = new Proxy(userInfo, {
    
    
  ownKeys(target) {
    
    
    return Object.keys(target).filter(key => !key.startsWith('_'))
  }
})
for (let key in userInfo) {
    
    
  console.log(key)
}
console.log(Object.keys(userInfo))

// apply
let sum = (...args) => {
    
    
  let sum = 0
  args.forEach(item => {
    
    
    sum += item
  })
  return sum
}
sum = new Proxy(sum, {
    
    
  apply(target, ctx, args) {
    
    
    return target(...args) * 2
  }
})
console.log(sum(1,2))
console.log(sum.call(null, 1,2,3));

// construct
let User = class {
    
    
  constructor (name) {
    
    
    this.name = name
  }
}
User = new Proxy(User, {
    
    
  construct(target, args, newTarger) {
    
    
    return new target(...args)
  }
})
console.log(new User('zzz'))

// 
let user = {
    
    
  name: 'zz',
  age: 25,
  _password: '123456'
}

user = new Proxy(user, {
    
    
  get(target, key) {
    
    
    if (key.startsWith('_')) {
    
    
      throw new Error('不可访问')
    } else {
    
    
      return target[key]
    }
  },
  set(target, key, val) {
    
    
    if (key.startsWith('_')) {
    
    
      throw new Error('不可访问')
    } else {
    
    
      target[key] = val
      return true
    }
  },
  deleteProperty(target, key) {
    
    
    if (key.startsWith('_')) {
    
    
      throw new Error('不可删除')
    } else {
    
    
      delete target[key]
      return true
    }
  },
  ownKeys(target) {
    
    
    return Object.keys(target).filter(key => !key.startsWith('_'))
  },
  // apply
})
try {
    
    
  console.log(user._password)
} catch(e) {
    
    
  console.log(e.message)
}
console.log(user.name)
user.age = 18
console.log(user)
for (let key in user) {
    
    
  console.log(key)
}