JavaScript对象中的defineProperty() 方法

记录一下，为看懂vue源码做一些js的准备

今天在看Vue源码的时候 看到了下面这样的代码

Object.defineProperty(Vue.prototype, '$isServer', {
  get: isServerRendering
})

然后就发现自己居然不知道  Object.defineProperty是什么，在通过百度和看javaScript 权威指南书后了解了它

一， 我们先解释一下这个 方法解释

   如果想要设置属性特征，或者想让新创建的属性具备某种属性 就需要使用这个方法。

   换成我们的大白话就是，给一个新对象添加一些属性

let user={}
user.name='小明'

这就是我们平时写代码最常用的赋值方法，但最标准的是我们因该使用defineProperty这个方法。

二， 解释这个方法发参数

Object.defineProperty(Object,proName,define)

需要传入三个参数 

1，object 你要操作的对象  在这里就是我们的  user

2, proName 要添加的属性的名字，在这里就是我们的name

3, define 定义你添加属性的一些可操作标志  （是否可删除，是否可枚举，是否可赋值等）

简单的代码

Object.defineProperty(user,'name',{
	value:'小明'
})

这样  我们就实现了简单的赋值（当在写代码中  如果仅仅只是为了添加一个属性并赋值 还不如直接用上面的）

所以 这个方法的核心就是 define 这个定义的其他属性

1 writable 是否可赋值 默认时false

Object.defineProperty(user,'name',{
	value:'小明',
	writable:false
})
console.log(user.name)
user.name='小法'
console.log(user.name)

当我们设置 writable属性为false时，我们下面的目的就不能实现，

上面的代码时 想重新给这个name赋值 但显示结果确实如下

2 enumerable 是否可枚举 默认是false 不可枚举

        枚举就是当我们想看到一个对象的有多少个属性时就会使用枚举

let user={}

Object.defineProperty(user,'name',{
	value:'小明',
	writable:false
})
Object.defineProperty(user,'age',{
	value:'15',
	writable:true,
	enumerable:true
})
let key= Object.keys(user)
console.log(key)

上面代码的目的是 查看枚举内容，以为默认是false 所以会出现这样的结果

只有age属性被拿了出来

3 configurable 是否可删除和是否被重新定义 默认是false

     是否可删除好理解就是 true就能删除 反之不能，是否能被重新定义就是在使用 definePropety这个方法在重新定义一次

Object.defineProperty(user,'name',{
	value:'小明',
	writable:false,
	enumerable:true,
	configurable:false
})
console.log(user)
delete user.name
console.log(user)

上面代码目的是 当为false时 删除属性 结果如下 不可删除

如果第一次定义为false 第二次又定义为true结果会是什么呢？ 当然结果时报错

let user={}

Object.defineProperty(user,'name',{
	value:'小明',
	writable:false,
	enumerable:true,
	configurable:false
})
Object.defineProperty(user,'name',{
	value:'小明',
	configurable:true
})
console.log(user)
delete user.name
console.log(user)

4  get和set 属性 就是拿取和设置属性

   注意：当使用get和set时 就不能在设置value和writable属性

let user={}
var str='小妹'

Object.defineProperty(user,'name',{
	get:function(){
		return str
	},
	set:function(newVal){
		str=newVal
	}
})
console.log(user.name)
user.name='小米'
console.log(user.name)

get和set并不是要同时存在的  只要存在一个就可以了

 

总结一下  就是 Object.defineProperty() 这个方法目的就是给对象添加一些新的属性，并定义一下这个属性的 能力范围

定义中的属性 writable 是否能赋值，enumerable 是否可枚举，configurable 是否可删除和定义 ，还有get和set

这些属性就是这个方法的核心

同时 get和set 的将会  出现在vue的双向数据绑定中

每天进步一点点  一年就是一大点  加油