乐趣区

关于javascript:ES6中的Proxy

jiezi

第一次接触 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"}
退出移动版