第一次接觸proxy這個單詞的時候，還是在設定瀏覽器代理的時候 ，今天注意到在es6新語法中，也出現了這個詞，才準備研究研究這個神奇的東西是怎麼用的。學習之後，在小編的簡單理解，就和小區門口站崗的保安類似，滿足條件才允許放行。在資料中，就是在獲取值或者設定值的時候有個規則。大家還可以關注我的微信公眾號，蝸牛全棧。

一、es5處理代理語法

let obj = {}
Object.defineProperty(obj,'name',{ // 引數分別為：物件本身、物件值、get和set方法
    get(){
        console.log("666")
        return "GET IT"
    },
    set(){
        console.log(
 
"SET")
    }
})
console.log(obj.name)// 666 GET IT

二、es6基本語法

let obj = {}
let p = new Proxy(obj,{}) // 引數分別是要代理的物件、代理規則
p.name= 'lilei'
console.log(obj.name) // lilei
for(let key in obj){
    console.log(key) // name
}

1、代理get

let arr = [7,8,9]
arr = new Proxy(arr,{
    get(target,prop){ // target對應當前陣列  prop為當前index
 

        return prop in target ? target[prop] : 'error'
    }
})

console.log(arr[1]) // 8
console.log(arr[10]) // error

let dict = {
    "hello":"你好",
    "world":"世界"
}

dict = new Proxy(dict,{
    get(target,prop){
        return prop in target ? target[prop]:prop
    }
})

console.log(dict["hello"]) //
 
 你好
console.log(dict["school"]) // school

2、代理set：必須有返回值，返回值為布林型別

let arr = []
arr = new Proxy(arr,{
    set(target,prop,val){
        if(typeof val === 'number'){
            target[prop] = val
            return true
        }else{
            return false
        }
    }
})
arr.push(5)
arr.push(6)
console.log(arr[0],arr[1],arr.length) // 5 6 2   不會破壞原來的方法

3、代理has

let range = {
    start:1,
    end:5
}

range = new Proxy(range,{
    has(target,prop){
       return  prop >= target.start && prop <= target.end
    }
})

console.log(2 in range) // true
console.log(9 in range) // false

4、代理ownKeys

// 將物件內以下劃線開頭的屬性隱藏起來
let userinfo = {
    username:"lilei",
    age:34,
    _password:"***" // 模擬這個私有屬性
}

userinfo = new Proxy(userinfo,{
    ownKeys(target){
        return Object.keys(target).filter(key => !key.startsWith("_"))
    }
})

for(let key in userinfo){
    console.log(key) // name age
}

Object.keys(userinfo) // name age

5、代理deleteProperty：對刪除起作用

let user = {
    name:"lilei",
    age:34,
    _password:"***"
}
user = new Proxy(user,{
    deleteProperty(target,prop){ // 攔截刪除操作,需要返回布林值
        if(prop.startsWith("_")){
            throw new Error("不可刪除")
        }else{
            delete target[prop]
            return true
        }
    }
})
try{
    delete user._password
}catch(e){
    console.log(e.message) // 不可刪除
}

6、綜合例項

let user = {
    name:"lilei",
    age:34,
    _password:"***"
}

user = new Proxy(user,{
    get(target,prop){
        if(prop.startsWith("_")){
            throw new Error("不可訪問")
        }else{
            return target[prop]
        }
    },
    set(target,prop,val){ // set一定需要個返回值
        if(prop.startsWith("_")){
            throw new Error("不可訪問")
        }else{
            target[prop] = val
            return true
        }
    },
    deleteProperty(target,prop){ // 攔截刪除操作,需要返回布林值
        if(prop.startsWith("_")){
            throw new Error("刪除")
        }else{
            delete target[prop]
            return true
        }
    },
    ownKeys(target){
        return Object.keys(target).filter(key => !key.startsWith("_"))
    }
})

console.log(user.name) // lilei
console.log(user._password) // 報錯:不可訪問
user.age = 18
console.log(user.age) // 18
// user._password = "&&&" // 報錯
try{
    user._password = "&&&"
}catch(e){  
    console.log(e.message) // 不可訪問
}

try{
    delete user._password
}catch(e){
    console.log(e.message) // 不可刪除
        }
for(let key in user){
    console.log(key) // ["name","age"]
}

7、代理apply

let sum = (...args) => {
    let num = 0
    args.forEach(item => {
        num += item
    })
    return num
}
sum = new Proxy(sum,{
    apply(target,ctx,args){ // 代理的目標,上下文,引數
        return target(...args) * 2
    }
})

console.log(sum(1,2)) // 6
console.log(sum.call(null,1,2,3)) // 12 呼叫函式引數
console.log(sum.apply(null,[1,2,3])) // 12 呼叫當前函式引數的陣列

8、代理construct：對new起作用

let User = class{
    constructor(name){
        this.name = name
    }
}
User = new Proxy(User,{
    construct(target,args,newTarget){ // 必須返回物件
        console.log("starting...")
        return new target(...args)
    }
})

console.log(new User("lilei")) // starting... User{name:"lilei"}