1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/* 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)
</script>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/* 不支持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]+'<br>')
}
</script>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
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+'<br>')
params.name = 'zhangsan'
document.write(params.name+'<br>')
document.write(p.name)
</script>
</body>
</html>
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
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+'<br>')
document.write(proxy1.age+'<br>')
document.write(proxy1.ab+'<br>')
/* 测试set是否能够拦截成功 */
proxy1.name = 'xiaoming'
document.write(proxy1.name+'<br>')
/* 使用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]}<br>`)
}else{
return obj[key] = val
}
}
}
let proxy11 = new Proxy(stu,stu2);
document.write(proxy11.no+'<br>')
document.write(proxy11.sex+'<br>')
/* document.write(proxy11.name+'的学号是'+proxy11.no+'<br>')
document.write(proxy11.name+'的性别是'+proxy11.sex+'<br>') */
proxy11.sex = '女'
document.write(proxy11.sex+'<br>')
</script>
</body>
</html>
