JS面向对象——Object.defineProperty

一、JavaScript的面向对象

JavaScript其实支持多种编程范式的，包括函数式编程和面向对象编程：

JavaScript中的对象被设计成一组属性的无序集合，像是一个哈希表，有key和value组成；
key是一个标识符名称，value可以是任意类型，也可以是其他对象或者函数类型；
如果值是一个函数，那么我们可以称之为是对象的方法；

如何创建一个对象呢？
早期使用创建对象的方式最多的是使用Object类，并且使用new关键字来创建一个对象：

这是因为早期很多JavaScript开发者是从Java过来的，它们也更习惯于Java中通过new的方式创建一个对象；

后来很多开发者为了方便起见，都是直接通过字面量的形式来创建对象：

这种形式看起来更加的简洁，并且对象和属性之间的内聚性也更强，所以这种方式后来就流行了起来；

二、对属性操作的控制

在前面我们的属性都是直接定义在对象内部，或者直接添加到对象内部的：
在这里插入图片描述

但是这样来做的时候我们就不能对这个属性进行一些限制：比如这个属性是否是可以通过delete删除呢？这个属性是否在for-in遍历的时候被遍历出来呢？

如果我们想要对一个属性进行比较精准的操作控制，那么我们就可以使用属性描述符。

通过属性描述符可以精准的添加或修改对象的属性；
属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改；

三、Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
在这里插入图片描述
可接收三个参数：

obj要定义属性的对象；
prop要定义或修改的属性的名称或 Symbol；
descriptor要定义或修改的属性描述符；

返回值：

被传递给函数的对象。

四、属性描述符分类

属性描述符的类型有两种：

数据属性（Data Properties）描述符（Descriptor）；
存取属性（Accessor访问器 Properties）描述符（Descriptor）；

在这里插入图片描述

五、数据属性描述符

在这里插入图片描述

六、存取属性描述符

在这里插入图片描述

var obj = {name: 'zep',age: 18,_address: '北京市'
}// 数据属性描述符
Object.defineProperty(obj, 'address', {enumerable: true,configurable: true,value: '深圳市',writable: true
})// 存取属性描述符
Object.defineProperty(obj, 'address', {enumerable: true,configurable: true,get: function () {return this._address},set: function (value) {this._address = value}
})
console.log(obj)
obj.address = '深圳市'
console.log(obj)

七、同时定义多个属性

Object.defineProperties() 方法直接在一个对象上定义多个新的属性或修改现有属性，并且返回该对象。
在这里插入图片描述

八、对象方法补充

获取对象的属性描述符：

getOwnPropertyDescriptor
getOwnPropertyDescriptors

禁止对象扩展新属性：preventExtensions

给一个对象添加新的属性会失败（在严格模式下会报错）；

密封对象，不允许配置和删除属性：seal

实际是调用preventExtensions
并且将现有属性的configurable:false

冻结对象，不允许修改现有属性： freeze

实际上是调用seal
并且将现有属性的writable: false

var obj = {name: 'zep',age: 18
}
// 禁止对象继续添加新的属性
/*Object.preventExtensions(obj)obj.height = 1.88
obj.address = '深圳市'
console.log(obj)*/
// 禁止对象配置/删除里面的属性
/*for (var key in obj) {Object.defineProperty(obj, key, {configurable: false,enumerable: true,writable: true,value: obj[key]})
}*/
/*Object.seal(obj)
delete obj.name
delete obj.age
console.log(obj)*/
// 让属性不可以修改（writable: false）
Object.freeze(obj)
obj.name = 'haha'
console.log(obj.name)