Javascript高级教程：数据属性描述符与存储属性描述符

属性描述符

let obj = {name: "ziu",age: 18
}
Object.defineProperty(obj, "height", {value: 1.88
})
console.log(obj) // { name: 'ziu', age: 18 }

obj对象的控制台输出中，并没有defineProperty新定义的height，这是因为不可枚举的（不可遍历的），在打印时并没有和其他属性一起输出。这个属性已经被添加到对象中，只不过不可见。

console.log(obj.height) // 1.88

属性描述符是一个对象，根据功能不同，可以分为两类：数据属性描述符和存储属性描述符

数据属性描述符

数据属性描述符（Data Properties）
- value该属性对应的值，默认undefined
- configurable该属性描述符是否可被改变、是否可被删除，默认为false
- enumerable该属性是否可被枚举，默认为false
- writable该属性是否可以被写入新的值，默认为false

没有用属性描述符定义的对象属性（直接使用.语法），也是具有以上属性描述符的特性的，value值为属性被赋值的值，其他configurable、emumerable、writable默认值都为true。注意，属性描述符区全为小写。

let obj = {name: "ziu",age: 18
}
// 数据属性描述符
Object.defineProperty(obj, "address", {value: "Beijing", // 该属性对应的值，默认为undefineconfigurable: false, // 该属性描述符是否可被改变、是否可被删除，默认为falseenumerable: true, // 该属性是否可被枚举，默认为falsewritable: true // 该属性是否可以被写入新的值，默认为false
})
// configurable
delete obj.address
obj.address = "Shanghai"
console.log(obj.address) // Beijing
// enumerable
console.log(obj)
for(let key in obj) {console.log(key)
}
console.log(Object.keys(obj))
// writable
obj.address = "Tianjin"
console.log(obj.address)

存储属性描述符

存储属性描述符（Accessor Properties）
- get当访问该属性时，会调用此函数，默认为undefined。
- set当属性值被修改时，会调用此函数，默认为undefined。

注意，get、set描述符与vaule、writable描述符不共存。

	`configurable`	`enumerable`	`value`	`writable`	`get`	`set`
数据描述符	可以	可以	可以	可以	不可以	不可以
存取描述符	可以	可以	不可以	不可以	可以	可以

let obj = {name: "ziu",age: 18,_address: "Beijing"
}
// Accessor Properties
Object.defineProperty(obj, "address", {enumerable: true,configurable: true,// value: "Beijing",// writable: true,get: function() {return this._address},set: function(val) {this._address = val}
})
console.log(obj.address) // 调用getter() Beijing
obj.address = "Shanghai" // 调用setter()
console.log(obj._address) // Shanghai

应用场景

隐藏某个私有属性，希望直接被外界使用和赋值。（下划线开头的变量一般为私有属性）
获取某个属性被访问或赋值的时刻，可以设置伴随被访问或被赋值时，执行其他函数。

Object.defineProperty(obj, "address", {get: function() {bar()return this._address},set: function(val) {foo()this._address = val}
})
console.log(obj.address) // got address value once
obj.address = "Shanghai" // resetted address value once
function bar() {console.log("got address value once")
}
function foo() {console.log("resetted address value once")
}

Javascript高级教程：数据属性描述符与存储属性描述符相关推荐

尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记
前言这个是我学习过程中的笔记,分享给大家,希望对大家有用. 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶),这里是视频链接. 我在前面有两篇对于web前端HTML和CS ...
菜鸟教程之 JavaScript 高级教程
From:https://www.runoob.com/js/js-objects.html JavaScript 对象 JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... ( ...
【javascript高级教程】JavaScript 对象
JavaScript 中的所有事物都是对象:字符串.数值.数组.函数...及自定义对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法 ...
【javascript高级教程】JavaScript Array（数组）对象
数组对象的作用是:使用单独的变量名来存储一系列的值. 创建数组, 为其赋值: var mycars = new Array(); mycars[0] = "Saab"; mycar ...
【javascript高级教程】JavaScript 字符串（String）对象
String 对象用于处理已有的字符块. JavaScript 字符串一个字符串用于存储一系列字符就像 "John Doe". 一个字符串可以使用单引号或双引号: var car ...
【javascript高级教程】JavaScript Number 对象
JavaScript 只有一种数字类型.可以使用也可以不使用小数点来书写数字. var pi=3.14; // 使用小数点 var x=34; // 不使用小数点极大或极小的数字可通过科学(指数)计 ...
JavaScript高级教程-代理与反射
代理与反射一.代理基础 1. 创建空代理 2. 定义捕获器 3. 捕获器参数和反射 API 4. 捕获器不变式 5. 可撤销代理 6. 实用反射 API (1)反射 API 与对象 API (2)状 ...
javascript高级教程
脚本语言:指WEB浏览器内由解释器执行的语言. javascript对象模型 window->document->form->table,button,text. 1.window为 ...
【JavaScript高级教程】JavaScript prototype（原型对象）
所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法. function Person(first, last, age, eyecolor) {this.fi ...