直切主题

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

  • 写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据。如:
var o = obj (4, {name: 'xu', age: 21})   //  返回了一个能容纳4条数据的对象,初始数据为name:'xu'和age: 21
  • 返回的该对象总会有以下属性:overLength(数据容纳量)、size(当前数据条数)
  • 返回的对象应该有以下方法:cache(保存一条数据)、delete(删除一条数据)
  • 每一次引用某属性后,该属性值消失。如:
o.name // xu
o.name //undefined
o.size //

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

var o = {
_id: 11,
get id () {
return this._id + '_get'
},
set id (value) {
this._id = value + '_set'
}
} console.log(o.id) // 11_get
o.id = '666'
console.log(o.id) // 666_set_get

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

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

什么是Object.defineProperty

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

Object.defineProperty(obj, prop, descriptor)  // 对象、属性、描述符

基本的描述符有3个:

  • writable  --  是否为可写
  • configurable  --  是否为可配置的
  • enumerable  --  是否为可枚举的

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

writable

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

var o = {
name: 'xu'
}
Object.defineProperty(o, 'name', {
writeable:false
})
o.name = 'lee'
console.log(o.name) //xu

configurable

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

var o = {
name: 'xu'
}
Object.defineProperty(o, 'name', {
configurable:false
})
o.name = 'lee'
console.log(o.name) // lee 不可配置可写
delete o.name
console.log(o.name) //lee 删除失败
Object.defineProperty(o, 'name', {
writable: false
})
o.name ='li'
console.log(o.name) // lee 不可配置不可写

enumerable

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

var o = {
name: 'xu',
age: 21
}
Object.defineProperty(o, 'name', {
enumerable: false
})
console.log(Object.keys(o)) //["age"]

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

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

问题解答

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

var _defineProperty = function (ret, key) {
Object.defineProperty(ret, key, {
set: function (value) {
// 针对 o.key = value 的set方法
if (!datas[key]) {
ret.size++
}
datas[key] = value
},
get: function () {
// 获取当前数据,如果当前数据有值,返回值并将当前属性值设置为undefined
var res = undefined
if (typeof datas[key] !== undefined) {
res = datas[key]
ret.size--
datas[key] = undefined
}
return res
}
})
}

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

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

//  缓存数据
var datas = Object.assign({}, init)

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

function FirstVaild (overLength, init) {

  //  定义最终返回对象,初始两个值,一个对象总容量,一个是当前长度
var ret = {
overLength: overLength,
size: Math.min(Object.keys(init).length, overLength) //如果传入初始数据条数大于容量,取容量值
}
// 缓存数据
var datas = Object.assign({}, init) // 定义属性的函数
var _defineProperty = function (ret, key) {
Object.defineProperty(ret, key, {
set: function (value) {
// 针对 o.key = value 的set方法
if (!datas[key]) {
ret.size++
}
datas[key] = value
},
get: function () {
// 获取当前数据,如果当前数据有值,返回值并将当前属性值设置为undefined
var res = undefined
if (typeof datas[key] !== undefined) {
res = datas[key]
ret.size--
datas[key] = undefined
}
return res
}
})
} // 将dirty初始化false,并定义每个属性的get/set
Object.keys(init).slice(0,ret.size).map(function (key) {
_defineProperty(ret, key)
}) Object.assign(ret, {
cache: function (key ,value) {
if (this.size >= this.overLength) {
throw '内存已满,请扩展容量'
}
// 属性不存在,定义他,并且长度+1, 属性存在但值不存在,长度+1,
if (!(key in datas)) {
_defineProperty(this, key)
this.size++
} else if (!datas[key]) {
this.size++
}
// 不论怎样,新值覆盖旧值
datas[key] = value
return this
},
// 删除属性直接把datas中的属性设置为undefined
delete: function (key) {
datas[key] = undefined
this.size--
return this
}
})
return ret
}

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

javascript之Object.defineProperty的奥妙的更多相关文章

  1. JavaScript使用Object.defineProperty方法实现双数据绑定

    Object.defineProperty这个方法非常值得学习,很多mvc框架中的双向数据绑定就是通过它来实现的. 本着互联网分享精神,今天我就将我自己的见解分享给大家,希望能有所帮助. 开始使用 O ...

  2. javascript 之 Object.defineProperty

    语法: Object.definePropty(obj,prop,descriptor); 参数: obj:要在其上定义属性的属性 prop:要定义或修改的属性的名称 desriptor:将被定义或修 ...

  3. javascript的Object对象的defineProperty和defineProperties

    Object的属性 查看官网:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Obje ...

  4. Javascript Object.defineProperty()

    转载声明: 本文标题:Javascript Object.defineProperty() 本文链接:http://www.zuojj.com/archives/994.html,转载请注明转自Ben ...

  5. JavaScript Object.defineProperty()方法详解

    Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法 Object.defineProperty(obj, prop ...

  6. Javascript观察者模式(Object.defineProperty、Reflect和Proxy实现)

    什么是观察者模式? 答:在数据发生改变时,对应的处理函数自动执行.函数自动观察数据对象,一旦对象有变化,函数就会自动执行. 参考<原生JavaScript实现观察者模式>(https:// ...

  7. javascript面向对象之Object.defineProperty(a,b,c)

    /* Object.defineProperty(a,b,c);介绍 a:需要属性设置的对象 b:需要设置的属性名,(键值) c:是一个用于描述属性值得json数据.这个json数据有configur ...

  8. Vue 双向数据绑定原理分析 以及 Object.defineproperty语法

    第三方精简版实现 https://github.com/luobotang/simply-vue Object.defineProperty 学习,打开控制台分别输入以下内容调试结果 userInfo ...

  9. javascript ES5 Object对象

    原文:http://javascript.ruanyifeng.com/stdlib/object.html 目录 概述 Object对象的方法 Object() Object.keys(),Obje ...

随机推荐

  1. 闰秒导致MySQL服务器的CPU sys过高

    今天,有个哥们碰到一个问题,他有一个从库,只要是启动MySQL,CPU使用率就非常高,其中sys占比也比较高,具体可见下图. 注意:他的生产环境是物理机,单个CPU,4个Core. 于是,他抓取了CP ...

  2. Windows2012R2备用域控搭建

    Windows2012R2备用域控搭建 前置操作 域控主域控的主dns:自己的ip,备dns:备域控的ip备域控的主dns:自己的ip,备dns:主域控的ip 客户端主dns:主域控的ip,备dns: ...

  3. 实时的.NET程序错误监控产品Exceptionless

    Exceptionless可以对ASP.NET, Web API, WebForms, WPF, Console, 和 MVC 应用提供错误监控.上传.报表服务.使用时需要在Exceptionless ...

  4. 在Ubuntu下搭建ASP.NET 5开发环境

    在Ubuntu下搭建ASP.NET 5开发环境 0x00 写在前面的废话 年底这段时间实在太忙了,各种事情都凑在这个时候,没时间去学习自己感兴趣的东西,所以博客也好就没写了.最近工作上有个小功能要做成 ...

  5. 分布式锁1 Java常用技术方案

    前言:       由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分布式场景下数据一致性的问题,那么就要利用分布式锁来解决这些问题.所以自己结合实际工作中的一些经验和网上看到的一些资 ...

  6. HTML文档头部

    前面的话   在声明文档类型之后,HTML文档的下一部分为<html>标签,告知浏览器应将括在<html>...</html>内的所有内容解析为HTML.然后是HT ...

  7. 开发者接入 基本配置 服务器配置 out.aspx

    页面代码: 前段为默认的,什么都不用写,后台如下: 即可 来自为知笔记(Wiz)

  8. iOS开发之再探多线程编程:Grand Central Dispatch详解

    Swift3.0相关代码已在github上更新.之前关于iOS开发多线程的内容发布过一篇博客,其中介绍了NSThread.操作队列以及GCD,介绍的不够深入.今天就以GCD为主题来全面的总结一下GCD ...

  9. UWP开发必备以及常用知识点总结

    一直在学UWP,一直在写Code,自己到达了什么水平?还有多少东西需要学习才能独挡一面?我想对刚接触UWP的开发者都有这种困惑,偶尔停下来总结分析一下还是很有收获的! 以下内容是自己开发中经常遇到的一 ...

  10. MAC下 mysql不能插入中文和中文乱码的问题总结

    MAC下 mysql不能插入中文和中文乱码的问题总结 前言 本文中所提到的问题解决方案,都是基于mac环境下的,但其他环境,比如windows应该也适用. 问题描述 本文解决下边两个问题: 往mysq ...