Vue天禹

  1. 主页
  2. 文档
  3. Vue天禹
  4. Object.defineProperty

Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
备注:应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。

Object.defineProperty(obj, prop, descriptor)
参数:#
  obj 要在其上定义属性的对象。

  prop 要定义或修改的属性的名称。

  descriptor 将被定义或修改的属性描述符。

  前两个参数是常见的参数,就不多说了,主要来看第三个参数。

属性描述符#
  对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。

  数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。

  存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一;不能同时是两者。

 

  数据描述符和存取描述符均具有以下可选键值(共同具有):

configurable

当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。

默认为 false。

enumerable

当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中。

默认为 false。

  数据描述符具有以下可选键值:

value

该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。

默认为 undefined。

writable

当且仅当该属性的writable为true时,value才能被赋值运算符改变。

默认为 false。

  存取描述符同时具有以下可选键值:

get

一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。

默认为 undefined。

set

一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。

默认为 undefined。

看完上面这些,可能会有点懵,到底什么是数据描述符,什么是存取描述符呢?我是这样理解:

拥有value,writeable的描述符就是数据描述符;拥有get,set的描述符就是存取描述符。

这些选项不一定是自身属性,如果是继承来的也要考虑。

如果一个描述符不具有value,writable,get 和 set 任意一个关键字,那么它默认就是一个数据描述符。

一个描述符中不能同时有(value或writable)和(get或set)关键字,也就是一个描述符要么是拥有value,writable的数据描述符,要么是拥有get,set存取描述符。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>回顾Object.defineproperty方法</title>
	</head>
	<body>
		<script type="text/javascript" >
			let number = 18
			let person = {
				name:'张三',
				sex:'男',
			}

			Object.defineProperty(person,'age',{
				// value:18,
				// enumerable:true, //控制属性是否可以枚举,默认值是false
				// writable:true, //控制属性是否可以被修改,默认值是false
				// configurable:true //控制属性是否可以被删除,默认值是false

				//当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
				get(){
					console.log('有人读取age属性了')
					return number
				},

				//当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
				set(value){
					console.log('有人修改了age属性,且值是',value)
					number = value
				}

			})

			// console.log(Object.keys(person))

			console.log(person)
		</script>
	</body>
</html>

这篇文章对您有用吗?

我们要如何帮助您?