Vue中的 Object.defineProperty

object

Vue中的 Object.defineProperty

1
2
3
4
5
var obj = {}
Object.defineProperty(obj,"name",{
value:'blog'
})
console.log(obj.name);//blog
  • 第一个参数:目标对象
  • 第二个参数:需要定义的属性或方法的名字。
  • 第三个参数:目标属性所拥有的特性。(descriptor)

前两个参数不多说了,一看代码就懂,主要看第三个参数descriptor,看看有哪些取值

描述符 descriptor

1
2
3
4
5
6
7
8
var obj = {}
Object.defineProperty(obj,"name",{
value:'blog',
writable:false,
enumerable:false,
configurable:false
})
console.log(obj.name);//blog
  • value:属性的值
  • writable:如果为false,属性的值就不能被重写,只能为只读了
  • configurable:总开关,一旦为false,就不能再设置他的(value,writable,configurable)
  • enumerable:是否能在for…in循环中遍历出来或在Object.keys中列举出来。
  • get:读取值时触发(不能和value和writable同时用)
  • set:设置值时触发(不能和value和writable同时用)

是否可编写 writable

1
2
3
4
5
6
7
8
9
10
var obj = {}
Object.defineProperty(obj,"name",{
value:'blog',
writable:false,//※
enumerable:false,
configurable:false
})
console.log(obj.name);//blog
obj.name = 'guangzhou'
console.log(obj.name);//blog

另一个例子 (※:是指变化的变量)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var obj = {};
Object.defineProperty(obj,"name1",{
value:'blog1',
writable:true,//※
enumerable:false,
configurable:false
})
Object.defineProperty(obj,"name2",{
value:'blog2',
writable:false,//※
enumerable:false,
configurable:false
})
console.log(obj);//{name1: "blog1", name2: "blog2"}
obj.name1 = 'guangzhou1';
obj.name2 = 'guangzhou2';
console.log(obj);//{name1: "guangzhou1", name2: "blog2"}

这里的name1和name2是进行单独设置的,并没有对整个对象产生影响

是否可枚举 enumerable

例子(※:是指变化的变量)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var obj = {}
Object.defineProperty(obj,"name1",{
value:'blog1',
enumerable:true//※
})
Object.defineProperty(obj,"name2",{
value:'blog2',
enumerable:true//※
})
Object.defineProperty(obj,"name3",{
value:'blog3',
enumerable:false//※
})
Object.keys(obj)//["name1", "name2"]

全局开关

同一属性方法名:(报错)(※:是指变化的变量)

1
2
3
4
5
6
7
8
9
10
11
12
var obj = {}
Object.defineProperty(obj,"name",{
value:'blog',
configurable:false//※
})
Object.defineProperty(obj,"name",{
value:'blog',
configurable:true//※
})
//Uncaught TypeError: Cannot redefine property: name
// at Function.defineProperty (<anonymous>)
// at <anonymous>:6:8

不同属性方法名:(OK)(※:是指变化的变量)

1
2
3
4
5
6
7
8
9
var obj = {}
Object.defineProperty(obj,"name1",{//※
value:'blog',
configurable:false//※
})
Object.defineProperty(obj,"name2",{//※
value:'blog',
configurable:true//※
})

开关先后顺序:(OK)(※:是指变化的变量)

1
2
3
4
5
6
7
8
9
var obj = {}
Object.defineProperty(obj,"name",{
value:'blog',
configurable:true//※
})
Object.defineProperty(obj,"name",{
value:'blog',
configurable:false//※
})

set , get

直接看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {}
Object.defineProperty(obj,"name",{
set:function(newValue){
console.log("你要赋值给我,我的新值是"+newValue)
},
get:function(){
console.log("你取我的值")
return '已修改' //默认返回字符串
}
})
console.log(obj.name)
//你取我的值
obj.name='guangzhou'
//已修改
//你要赋值给我,我的新值是guangzhou

文章目录
  1. 1. Vue中的 Object.defineProperty
  2. 2. 描述符 descriptor
  3. 3. 是否可编写 writable
  4. 4. 是否可枚举 enumerable
  5. 5. 全局开关
  6. 6. set , get
|