JS面向对象——Object.defineProperty

Posted 2022-03-10 小小白学计算机

一、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)