defineProperty清晰解析和set和get使用,不懂就问
都知道vue中的数据绑定就是用
object.defineProperty
以及其中的set和get实现的,所以理解vue的内部原理之前就需要理解object.defineProperty
.因为很多关于这个的解释博客都写得很难理解,所以自己写一下自己的理解.
概念
Object.defineProperty(obj, prop, descriptor)
其实就是对象中属性进行定义,对属性的状态进行描述,其中需要传入三个参数
let obj = {}
Object.defineProperty(obj,'hello',{
value: 1,
enumerable: false,
writable: false,
configurable: false,
})
详解descriptor中各个属性
首先这里要说的是descriptor中的属性分为数据描述符和存取描述符
数据描述符
-
configurable
确认该属性能否被修改,默认为 false。
-
enumerable
确认该属性是否能在
for...in
循环和Object.keys()
中被枚举默认为 false。 -
value
该属性对应的值,默认为 undefined。
-
writable
该属性能否被赋值,默认为 false。
存取运算符
-
configurable
确认该属性能否被修改,默认为 false。
-
enumerable
确认该属性是否能在
for...in
循环和Object.keys()
中被枚举默认为 false。
-
get
无参数传入,只有一个this,函数返回值就是你取到的值,取值时执行的方法
-
set
传入一个你刚刚赋进去的新值,无返回值,赋值是执行的方法
由上可知configurable
和enumerable
是公用的,(set
,get
)与(value
,writable
)是互斥的不能同时使用, 也就相当说你一旦使用了set
和get
的时候value
就是undefined,而且不可赋值. 你所有的赋值和取值都是set
和get
的结果,属性的值真正的值永远都是undefined(重要)
当你使用set
和get
的时候你想当然的会
let obj = {}
Object.defineProperty(obj,'hello',{
set: function(val) {
console.log(val)
this.hello = val + ' world'
},
get: function() {
return this.hello
}
})
错误: this.hello 就是取值,相当于在get中使用get,直接递归了,内存栈溢出
所以你只能这么做
let obj = {}
let title = ''
Object.defineProperty(obj,'title',{
set: function(val) {
title = title + ' world'
},
get: function() {
return title
}
})
title = 'hello'
console.log(title) //hello world
这样虽然是正确的,但是很简单的就能想到我们不可能每创建一个属性就,单独创建一个变量,所以最好的解决办法是在对象内创建另一个属性来放真正的值
let obj = {}
Object.defineProperty(obj,'title',{
set: function(val) {
console.log(val)
this._title = val + ' world'
},
get: function() {
return this._title
}
})
title = 'hello'
console.log(title) //hello world
用_title
作为一个不可直接调用的私有属性来存放真正的值,而表面上我们可以直接调用title
属性
这样我们就既实现了一个属性的基本存取,还可以在set
和get
时触发函数做额外的操作,像vue中的数据绑定本质就是用这种原理实现的,即在set
时操作页面的渲染,vue中的具体实现以后会写到,definePropety
到这里以及很清楚了,希望大家看懂! 不懂就问~~