1.
/* es给对象提供了 set 和 get方法 可以对对象再进行操作 */
let obj = {
_name:'zhangsan',
get name(){
console.log('即将获取');
return this._name
},
set name(v){
if(v!==this._name){
console.log('即将设置');
this._name = v
}
}
}
/* document.write(obj._name) */
obj.name = 'lisi'
document.write(obj.name)
2.
/* 不支持ie8及以下 */
/* Object.defineProperty() */
let obj = {
name:"zhangsan",
age:30
}
/* Object.defineProperty 可以对对象的属性进行劫持 */
/* configurable 属性是否能被删除和修改,默认为true 可以被删除修改 */
/*
value就是对象属性的默认值,优先级比定义的优先级大
value:包含这个属性的数据值,默认值为undefined
*/
Object.defineProperty(obj,'name',{
/* 是否通过delete删除属性从而重新定义属性 */
/* configurable:false */
/* writable:表示能否修改属性的值,默认值为true为false则不能被修改,变成只读属性 */
writable:false
})
/* delete obj.name */
/* 只针对于删除 */
obj.name = 'lisi'
document.write(obj.name)
// 可以对多个对象劫持
// enumerable 表示能否通过for in 循环访问属性,,默认值为true
/* Object.defineProperties(obj,{
name:{
enumerable:true
},
age:{
enumerable:false
}
}) */
for(var key in obj){
document.write(obj[key]+'
')
}
3.
let obj = {
_name:'zhangsan',
}
/* Object.defineProperty(obj,'name',{
writable:false,
get (){
console.log('获取值');
return this._name;
},
set (v){
console.log('我设置的值');
this._name = v
}
}) */
Object.defineProperties(obj,{
name:{
configurable:false,
writable:false,
value:'gygygy'
/* get (){
console.log('获取值');
return this._name;
},
set (v){
console.log('我设置的值');
this._name = v
} */
}
})
document.write(obj.name)
obj.name = 'wanger'
document.write(obj.name)
var params={
_name:'wanger',
}
var p = {}
/* 设置这个params的name 不能被删除
给name设置get方法 返回 用户名:wanger
给name设置set方法 设置的时候 可以把 p 对象添加一个属性name
值就是你设置的值 */
Object.defineProperties(params,{
name:{
configurable:false,
get (){
return '用户名'+this._name;
},
set (v){
p.name = v
}
}
})
document.write(params.name+'
')
params.name = 'zhangsan'
document.write(params.name+'
')
document.write(p.name)
4.
let p = {
name:'zhangsan',
age:30
}
let p2 = {
get(obj,key){
console.log('我要获取 obj是'+obj+'key是'+key+'值是'+obj[key]);
return obj[key]
},
set(obj,key,val){
console.log('key是'+key+'值是'+obj[key]+'要修改为:'+val);
obj[key] = val
}
}
/* p 代表源对象 p2 代表需要操作的对象 */
let proxy1 = new Proxy(p,p2);
console.log(proxy1);
/* 测试get是否能够成功拦截成功 */
document.write(proxy1.name+'
')
document.write(proxy1.age+'
')
document.write(proxy1.ab+'
')
/* 测试set是否能够拦截成功 */
proxy1.name = 'xiaoming'
document.write(proxy1.name+'
')
/* 使用vue3的 proxy的方法 对 对象 let stu = {name:'adc',no:9823,sex:'男'}
进行数据劫持 获取stu.no返回并打印 adc的学号是9823
获取stu.sex返回并打印 adc的性别是男
设置stu 如果设置的sex是女 那么页面会打印abc 只能是男
还是默认是男 */
let stu = {name:'adc',no:9823,sex:'男'}
let stu2 = {
get(obj,key){
if(key=='no'){
return obj.name+'的学号是'+obj[key]
}
if(key=='sex'){
return obj.name+'的性别是'+obj[key]
}
},
set(obj,key,val){
if(val=='女'){
document.write(`${obj.name}的性别必须为${obj[key]}
`)
}else{
return obj[key] = val
}
}
}
let proxy11 = new Proxy(stu,stu2);
document.write(proxy11.no+'
')
document.write(proxy11.sex+'
')
/* document.write(proxy11.name+'的学号是'+proxy11.no+'
')
document.write(proxy11.name+'的性别是'+proxy11.sex+'
') */
proxy11.sex = '女'
document.write(proxy11.sex+'
')