天天看点

javascript之Object.defineProperty的奥妙

今天遇到一个这样的功能:

写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据。如:

返回的该对象总会有以下属性:overlength(数据容纳量)、size(当前数据条数)

返回的对象应该有以下方法:cache(保存一条数据)、delete(删除一条数据)

每一次引用某属性后,该属性值消失。如:

那么问题来了,如何设置属性在使用一次后自动消除呢,经过思考,想到了,get和set方法,get和set又是什么呢,如下:

javascript之Object.defineProperty的奥妙
javascript之Object.defineProperty的奥妙

js中引用属性的值视为get,给属性赋值视为set,get和set方法可以在获取/设置属性值时进行一定的操作。

本文中所用到了get和set方法,不过并不是上述例子那样简单的在对象中书写,我们借助了本文的主角object.defineproperty方法。

object.defineproperty是es5新加的给对象属性设置描述符的方法,使用方法如下:

基本的描述符有3个:

writable  --  是否为可写

configurable  --  是否为可配置的

enumerable  --  是否为可枚举的

下面分别举个简单的例子来说明其用法

顾名思义,设置属性是否为可写,如果是false,则属性之后的赋值操作无效

javascript之Object.defineProperty的奥妙
javascript之Object.defineProperty的奥妙

属性是否可配置,设置为false后,该属性不可被删除,也不可再更改为可配置的,但是可以从可写改为不可写

javascript之Object.defineProperty的奥妙
javascript之Object.defineProperty的奥妙

属性是否可枚举,如果是false,则属性不可枚举,不可枚举属性对  for ... in语句和ojbect.keys是不可见的。

javascript之Object.defineProperty的奥妙
javascript之Object.defineProperty的奥妙

分界线----------------------------------------------------------------------------

除了上面三个属性,defineproperty方法内部还可以定义属性的value值, get/set方法,那么本章则用到了使用object.defineproperty方法定义属性的get/set值。

思路:本题主要围绕着属性的get/set做进一步处理,要求引用一次属性值后,属性值消失(undefined),那么就需要在get方法中做文章,所以我们先制定一个定义属性描述符的方法,我把它定义成这样:

javascript之Object.defineProperty的奥妙
javascript之Object.defineProperty的奥妙

本题的主要部分就在这里,这段代码利用的属性的get和set方法,针对题目的要求,做出了这个功能函数。注意:返回的对象ret并没有保存数据,他只是通过set和get方法对datas缓存对象中的数据进行的设置和读取。

datas对象是这样的,他利用的es6中的object.assign方法,把init拷贝了一份作初始化

整个代码就在这里,也很简单,写的也比较乱。如果有问题,请指出。

javascript之Object.defineProperty的奥妙
javascript之Object.defineProperty的奥妙

本章就到这里,博主为一介前端菜鸟,并没有多少知识,try my best,写点基础知识,分享给正在学习前端的新人们。