实现的步骤:
<强> 1。监听对象属性的读取与变化
Object.defineProperty()方法会直接在对象上定义一个新的的属性,或者已经存在的属性并且返回这个属性
语法是Object.defineProperty (obj,道具,描述)
obj:目标对象
道具:需要定义或修改的属性的名字
描述:将被定义或修改的属性的描述符
<强>描述:
这个方法精确添加或修改对象的属性,我们添加的属性是可以枚举的属性(种()/?
对象里面存在是属性描述存在的形式是:
数据描述符:拥有可写入或不可以写入的属性(相当于口令密码)
存取描述符:由一对getter-setter函数功能来描述的属性(方法)
注意:* *描述符* *必须是两种形式之一,不能同时是两者。
数据描述符和存取描述符均具有以下可选键值:
1。可配置:当且仅当该属性的可配置为真时,该属性描述符才能够被改变,也能够被删除。默认为假
2。可列举的:当且仅当该属性的可列举的为真时,该属性才能够出现在对象的枚举属性中。默认为假
数据描述符:
1。值:该属性对应的值。可以是任何有效的JavaScript值(数值,对象,函数等)。默认为定义。
2。可写:当且仅当该属性的可写为真时,该属性才能被赋值运算符改变。默认为假的。
存取描述符同时具有以下可选键值:
1。得到:一个给属性提供getter的方法,如果没有getter则为定义。该方法返回值被用作属性值。默认为定义。
2。集:一个给属性提供setter的方法,如果没有setter则为定义。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为定义。
<强>示例:
<>强创建属性
var o={};
Object.defineProperty (o”、“{值:37岁
可写:没错,
可列举的:真的,
可配置:真});
console.log (o.a);
Object.defineProperty (o,“b”,{:函数(){/*控制台。日志(bValue) */},返回值
设置:函数(newValue) {bValue=https://www.yisu.com/zixun/newValue;}，
可列举的:真的,
可配置:真});
o。b=38;
之前
<>强修改属性
当属性特性(财产属性)可写设置为假时,表示non-writable,属性不能被修改。
var o={};//创建一个新对象
Object.defineProperty (o”、“{值:37岁
可写:假});
console.log (o.a);//打印37
o。一个=25;//没有错误抛出(在严格模式下会抛出,即使之前已经有相同的值)
console.log (o.a);//打印37岁的赋值不起作用。
之前
<强>一般的setter和getter
={var模式
得到:函数(){
返回“我总是返回此字符串,无论你分配的;
}，
设置:函数(){
这一点。的名字='这是我的名字字符串';
}
}；
函数TestDefineSetAndGet () {
Object.defineProperty (“myproperty”,这模式);
}
var=new TestDefineSetAndGet实例();
实例。myproperty='测试';//拔易苁欠祷卮俗址?无论你分配的
console.log (instance.myproperty);//这是我的名字字符串的
console.log (instance.myname);
之前
<>强解题
函数观察者(财产){
这一点。data=https://www.yisu.com/zixun/{};
this.recursion(数据);
}
Observer.prototype。递归=函数(obj) {
var val=零;
(关键obj) {
如果(obj.hasOwnProperty(关键)){
val=obj (val);
如果(typeof val===韵蟆?,! ! val) {
新观察家(val);
}
这一点。访问(关键,val);
}
}
}
Observer.prototype。访问=function(关键,val) {
Object.defineProperty (this.data键,{
可列举的:真的,
可配置:没错,
得到:函数(){
控制台。日志(“你访问了' +键);
返回瓦尔
}，
设置:函数(newVal) {
控制台。日志(“你设置了' +键);
控制台。日志(“新”的+键+ '=' + newVal)
如果(newVal===val)返回;
val=newVal
}
}）
}
让app1=new观察者({
名称:“youngwind”,
年龄:25
}）;
让app2=new观察者({
大学:“bupt”,
主要:“计算机”
}）;//要实现的结果如下:
app1.data.name//你访问了名字
app1.data。年龄=100;//你设置了年龄、新的值为100
app2.data。大学//你访问了大学
app2.data。主要='科学'//你设置了专业,新的值为科学
