一、Proxy使用
- 作用&＃xff1a;Proxy是ES6为了操作对象而引入的API&＃xff0c;不直接作用于对象&＃xff0c;而是通过类似媒介的方式进行对象的操作
- 使用
let proxy &＃61; new Proxy(target,handler);
- 作用
{
let user1 &＃61; {
name: "Mike",
phone: "13146467899",
addr: "zh",
};
let proxy &＃61; new Proxy(user1, {
get: function (target, key) {
switch (key) {
case "phone":
return (
target[key].substring(0, 3) &＃43; "****" &＃43; target[key].substring(7)
);
case "name":
return target[key].substring(0, 1) &＃43; "**";
default:
return target[key];
}
},
});
console.log(proxy.phone, proxy.name);
}
{
let user1 &＃61; {
name: "Mike",
phone: "13146467899",
addr: "zh",
};
let proxy &＃61; new Proxy(user1, {
set(target, key, value) {
if (key &＃61;&＃61;&＃61; "id") {
return (target[key] &＃61; value &＃43; "1xx");
} else {
return target[key];
}
},
});
proxy.id &＃61; "xxx";
console.log(proxy.id, proxy.name);
}
{
let user1 &＃61; {
name: "Mike",
phone: "13146467899",
addr: "zh",
};
let proxy &＃61; new Proxy(user1, {
has: function (target, key) {
if (key in target) {
console.log(&＃96;${key}:&＃96;, target[key]);
return true;
} else {
return false;
}
},
});
console.log("name" in proxy);
}
{
let user1 &＃61; {
name: "Mike",
phone: "13146467899",
addr: "zh",
_id: "s112ewd",
};
let proxy &＃61; new Proxy(user1, {
deleteProperty: function (target, key) {
if (key.indexOf("_") &＃61;&＃61;&＃61; 0) {
console.warn("私有属性无法删除");
return false;
}
return true;
},
});
console.log(delete proxy["_id"]);
}
{
let user1 &＃61; {
name: "Mike",
phone: "13146467899",
addr: "zh",
_id: "s112ewd",
};
let proxy &＃61; new Proxy(user1, {
ownKeys(target) {
return Object.keys(target).filter((item) &＃61;> {
return item !&＃61;&＃61; "id" && item.indexOf("_") !&＃61;&＃61; 0;
});
},
});
console.log(Object.keys(proxy));
}
二、Reflect的使用
- 介绍&＃xff1a;
- 与Proxy相同&＃xff0c;ES6引用Reflect也是用来操作对象的&＃xff0c;它将对象里⼀些明显属于语言内部的方法移植到Reflect对象上&＃xff0c;它对某些方法的返回结果进行了修改&＃xff0c;使其更合理&＃xff0c;并且使用函数的方式实现了Object的命令式操作
- 使用
{
let user &＃61; {
name: "fluyi",
age: 18,
};
console.log(Reflect.has(user, "name"));
console.log(Reflect.set(user, "name", "Jenny"));
console.log(Reflect.get(user, "name"));
}
三、Proxy与Reflect实现简单的双向数据绑定
{
const inObj &＃61; document.getElementById("input");
const outObj &＃61; document.getElementById("txt");
let obj &＃61; {};
let handler &＃61; {
get: function (target, key) {
return Reflect.get(target, key);
},
set: function (target, key, value) {
if (key &＃61;&＃61;&＃61; "text") {
inObj.value &＃61; inObj.value &＃61;&＃61;&＃61; value ? inObj.value : value;
outObj.innerHTML &＃61; value;
}
return Reflect.set(target, key, value);
},
};
let proxy &＃61; new Proxy(obj, handler);
inObj.addEventListener("keyup", function (event) {
proxy.text &＃61; event.target.value;
});
proxy.text &＃61; 124;
}
DOCTYPE html>
<html lang&＃61;"en">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>var 与const title>
head>
<body>
<h1>双向绑定功能h1>
<input type&＃61;"text" id&＃61;"input">
<h2>你输入的内容是&＃xff1a;<i id&＃61;"txt">i>h2>script>
body>
html>
京公网安备 11010802041100号