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)

JS面向对象——Object.defineProperty相关推荐

JS面向对象——Object对象的方法补充、原型继承关系图
一.Object.create() 这个方法用于创建一个新对象.被创建的对象的__proto__指向create函数第一个参数的原型对象prototype,在创建新对象时可以通过create函数第二个 ...
js之Object.defineProperty和Object.defineProperties详解
1. Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象. 备注:应当直接在 ...
[js] 举例说明Object.defineProperty会在什么情况下造成循环引用导致栈溢出？
[js] 举例说明Object.defineProperty会在什么情况下造成循环引用导致栈溢出? var data = {count: 1,value: 2 } Object.definePrope ...
Javascript面向对象：Object.defineProperty()与Object.defineProperties()
对象属性的操作 let obj = {name: "ziu",age: 18 }console.log(obj.name) // 获取属性 obj.name = "ziu ...
JS面向对象的程序设计
面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义 ...
从零开始学前端 - 16. JS对象Object介绍及常用方法
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
9.JS面向对象补充
JS面向对象补充本文章来源于王红元老师(coderwhy)的 JS高级课程附上链接:https://ke.qq.com/course/3619571 谁能拒绝一个*100%好评还加课的老师呢目录 ...
Object.defineProperty方法（详解）
OK,这一篇主要想说一下Object.defineProperty这个方法. 这个方法也是Vue数据双向绑定原理的常见面试题所以也是有必要好好掌握的哦首先我们知道JS中是支持面向对象编程的,也是有 ...
对于js面向对象的理解
面向对象:oop(这是一种编程思想) es5中定义方式: 1. function 类名称() {} ==>new 类名称 (这样衍生出来的对象称为类的实例) 2. {} 3. Object 面 ...