记录一下,为看懂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的双向数据绑定中
每天进步一点点 一年就是一大点 加油