ES6 代理

一、代理

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

二、常用拦截方法

// 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)
}