1. get set
<script>
let obj = {
_name: "lily",
get name() {
return "name:" + this._name
},
set name(v) {
if (v != this._name) {
console.log("重命名:", v);
this._name = v
}
}
}
document.write(obj.name)
//lily
obj.name="leo"
document.write(obj.name)
//leo
</script>
2. defineProperty
不支持IE8及以下浏览器。
Object.defineProperty可以对对象的属性进行劫持。
<script>
let obj = {
name: 'lily'
}
// configurable 属性为true(默认),可以删除对象属性,改为false不可删除
// writable:false 只读,不可修改
Object.defineProperty(obj, "name", {
configurable: false,
writable: false,
value: "leo"
// 使用了writable: false, value:"leo",就不要使用get,set
})
delete obj.name
document.write(obj.name)
//仍可显示lily
let obj2 = {
name: 'grace',
age: 10
}
Object.defineProperties(obj2, {
name: {
enumerable: false
// 不可通过for in 循环访问属性
}
})
for (var key in obj2) {
document.write(obj2[key])
}
// 页面只显示10
</script>
3. Proxy
Proxy 可以对目标对象的读取、函数调用等操作进行拦截,然后进行操作处理。它不直接操作对象,而是像代理模式,通过对象的代理对象进行操作,在进行这些操作时,可以添加一些需要的额外操作。 基本用法: 一个 Proxy 对象由两个部分组成: target 、 handler 。在通过 Proxy 构造函数生成实例对象时,需要提供这两个参数。 target(第一个参数) 即目标对象, handler (第二个参数)是一个对象,声明了代理 target 的指定行为。
<script>
let stu = {
name: 'Leo',
no: 1234,
sex: '男'
}
let stu2 = {
get(obj, key) {
if (key == 'no') {
return obj.name + '的学号是' + obj[key]
} else if (key == 'sex') {
return obj.name + '的性别是' + obj[key]
}
},
set(obj, key, val) {
if (key == 'sex' && val != '男') {
console.log(obj.name + '的性别只能是男');
}
else {
obj[key] = val
}
}
}
let proxy2 = new Proxy(stu, stu2)
document.write(proxy2.no)
document.write(proxy2.sex)
proxy2.sex = '女'
//不可修改
proxy2.no = 1122
//可以修改
console.log(proxy2);
</script>