3.04.22 class 与 extends关键字
1.Object.defineProperty方法
1.Object.defineProperty
- Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
- vue2的底层使用该方法封装数据的双向绑定
- 在ES6中,由于 Symbol类型的特殊性,用Symbol类型的值来做对象的key与常规的定义或修改不同,而Object.defineProperty 是定义key为Symbol的属性的方法之一。
- 语法:Object.defineProperty(obj, prop, descriptor)
- 返回值 被传递给函数的对象。
- obj 要定义属性的对象。
- prop 要定义或修改的属性的名称或 Symbol。
- descriptor 要定义或修改的属性描述符,是一个对象参数。
- 描述符有两种主要形式:数据描述符和存取描述符。
- 数据描述符是一个具有值的属性,该值可以是可写的,也可以是不可写的。
- 存取描述符是由 getter 函数和 setter 函数所描述的属性。
- 一个描述符只能是这两者其中之一;不能同时是两者。不然控制台会报错。
- 数据描述符:
{
value:prop的属性值
,
configurable:当且仅当该属性的 configurable 键值为 true 时,该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。
,
enumerable:当且仅当该属性的 enumerable 键值为 true 时,该属性才会出现在对象的枚举属性中。默认为 false。
,
writable:当且仅当该属性的 writable 键值为 true 时,属性的值,也就是上面的 value,才能被赋值运算符改变。默认为 false。
}
{
configurable:当且仅当该属性的 configurable 键值为 true 时,该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。
,
enumerable:当且仅当该属性的 enumerable 键值为 true 时,该属性才会出现在对象的枚举属性中。默认为 false。
,
get: function () {} 属性的 getter 函数,如果没有 getter,则为 undefined。当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this 对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。默认为 undefined。
,
set: function () {} 属性的 setter 函数,如果没有 setter,则为 undefined。当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。默认为 undefined。
}
<!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>
var obj={
};
//1.数据描述符:
Object.defineProperty(obj,"name",{
value:"欧宽",
configurable:false,
enumerable:true,
writable:true
}
)
console.log(obj);//{name: '欧宽'}
//2.存取描述符:
var obj2={
name:null
}
var arr=[];
Object.defineProperty(obj2,"name",{
configurable:true,
enumerable:true,
get:function(){
return "小怡";
},
set:function(value){
name=value;
arr.push(name);
}
})
var box=obj2.name;
console.log(box);//小怡
console.log(obj2);//{name:"小怡"}
obj2.name ="ling";
var box2=obj2.name;
console.log(box2);//小怡
console.log(obj2);//{name:"小怡"}
console.log(arr); //['ling']
</script>
</body>
</html>
- 通过普通方法定义的对象,即通过赋值操作添加的普通属性是可枚举的,在枚举对象属性时会被枚举到(for…in 或 Object.keys 方法),可以改变这些属性的值,也可以删除这些属性。但是Object.defineProperty该方法用于精确地添加或修改对象的属性。这个方法允许修改默认的额外选项(或配置)。默认情况下,使用 Object.defineProperty() 添加的属性值是不可修改(immutable)的。也不能进行枚举对象属性,for…in会失效。
2.Object.definePropertys
- Object.defineProperties与ObjectdefineProperty的作用一样,Object.defineProper