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給對(duì)象提供了 set 和 get方法 可以對(duì)對(duì)象再進(jìn)行操作 */
? ? ? ? let obj = {
? ? ? ? ? ? _name:'zhangsan',
? ? ? ? ? ? get name(){
? ? ? ? ? ? ? ? console.log('即將獲取');
? ? ? ? ? ? ? ?return this._name
? ? ? ? ? ? },
? ? ? ? ? ? set name(v){
? ? ? ? ? ? ? ? if(v!==this._name){
? ? ? ? ? ? ? ? ? ? console.log('即將設(shè)置');
? ? ? ? ? ? ? ? ? ? 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 可以對(duì)對(duì)象的屬性進(jìn)行劫持 */
? ? ? ?/* configurable 屬性是否能被刪除和修改，默認(rèn)為true 可以被刪除修改 */
? ? ? ?/*
? ? ? ?value就是對(duì)象屬性的默認(rèn)值，優(yōu)先級(jí)比定義的優(yōu)先級(jí)大
? ? ? ?value：包含這個(gè)屬性的數(shù)據(jù)值，默認(rèn)值為undefined
? ? ? ?*/
? ? ? ?Object.defineProperty(obj,'name',{
? ? ? ? ? ?/* 是否通過delete刪除屬性從而重新定義屬性 */
? ? ? ? ? ?/* configurable:false */
? ? ? ? ? ?/* writable：表示能否修改屬性的值，默認(rèn)值為true為false則不能被修改，變成只讀屬性 */
? ? ? ? ? ?writable:false
? ? ? ?})
? ? ? ?/* delete obj.name */
? ? ? ?/* 只針對(duì)于刪除 */
? ? ? ?obj.name = 'lisi'
? ? ? ?document.write(obj.name)
? ? ? ?// 可以對(duì)多個(gè)對(duì)象劫持
? ? ? ?// enumerable 表示能否通過for in 循環(huán)訪問屬性，，默認(rèn)值為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('我設(shè)置的值');
? ? ? ? ? ? ? ? this._name = v
? ? ? ? ? ? }
? ? ? ? }) */
? ? ? ? Object.defineProperties(obj,{
? ? ? ? ? ? name:{
? ? ? ? ? ? ? ? configurable:false,
? ? ? ? ? ? ? ? ?writable:false,
? ? ? ? ? ? ? ? ?value:'gygygy'
? ? ? ? ? ? ? ?/* ?get (){
? ? ? ? ? ? ? ? console.log('獲取值');
? ? ? ? ? ? ? ? return this._name;
? ? ? ? ? ? },
? ? ? ? ? ? set (v){
? ? ? ? ? ? ? ? console.log('我設(shè)置的值');
? ? ? ? ? ? ? ? this._name = v
? ? ? ? ? ? } */
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? document.write(obj.name)
? ? ? ? obj.name = 'wanger'
? ? ? ? document.write(obj.name)
? ? ? ? var params={
? ? ? ? ? ? _name:'wanger',
? ? ? ? }
? ? ? ? var p = {}
? ? ? ? /* 設(shè)置這個(gè)params的name 不能被刪除
? ? ? ? ? ?給name設(shè)置get方法 返回 用戶名:wanger
? ? ? ? ? ?給name設(shè)置set方法 設(shè)置的時(shí)候 可以把 p 對(duì)象添加一個(gè)屬性name
? ? ? ? ? ? 值就是你設(shè)置的值 */
? ? ? ? ? ? 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 代表源對(duì)象 p2 代表需要操作的對(duì)象 */
? ? ? ? let proxy1 = new Proxy(p,p2);
? ? ? ? console.log(proxy1);
? ? ? ? ?/* 測(cè)試get是否能夠成功攔截成功 */
? ? ? ? document.write(proxy1.name+'<br>')
? ? ? ? document.write(proxy1.age+'<br>')
? ? ? ? document.write(proxy1.ab+'<br>')
? ? ? ? /* 測(cè)試set是否能夠攔截成功 */
? ? ? ? ?proxy1.name = 'xiaoming'
? ? ? ? ?document.write(proxy1.name+'<br>')
? ? ? ? ?/* 使用vue3的 proxy的方法 對(duì) 對(duì)象 let stu = {name:'adc',no:9823,sex:'男'} ?
? ? ? ? ? ? ?進(jìn)行數(shù)據(jù)劫持 獲取stu.no返回并打印 adc的學(xué)號(hào)是9823
? ? ? ? ? ? ? ? ? ? ? ? ?獲取stu.sex返回并打印 adc的性別是男
? ? ? ? ? ? ? ? ? ? ? ? ?設(shè)置stu 如果設(shè)置的sex是女 那么頁(yè)面會(huì)打印abc 只能是男
? ? ? ? ? ? ? ? ? ? ? ? ?還是默認(rèn)是男 ? ?*/
? ? ? ? let stu = {name:'adc',no:9823,sex:'男'}
? ? ? ? let stu2 = {
? ? ? ? ? ? get(obj,key){
? ? ? ? ? ? ? if(key=='no'){
? ? ? ? ? ? ? ? ? return obj.name+'的學(xué)號(hào)是'+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+'的學(xué)號(hào)是'+proxy11.no+'<br>')
? ? ? ? document.write(proxy11.name+'的性別是'+proxy11.sex+'<br>') */
? ? ? ? proxy11.sex = '女'
? ? ? ? document.write(proxy11.sex+'<br>')
? ? </script>
</body>
</html>
