Object.defineProperty 中的 writable 和 configurable 和 enumerable 的理解

在现在比较新的框架中, 比如 reactjs, vuejs中用得很多的一个属性便是

Object.defineOProperty

此属性的文档在网上一搜, 其中的几个属性,

包括 存取描述符(有set和get的) 和 数据描述符(直接有 value 的就是数据描述符)

有 set get 有 value writable enumerable configurable

虽然有 set 和 get, 但是定义的时候还是要用到
enumerable 和 configurable

set 和 get 类似 writable 和 value

其中的 configurable 和 writable 比较让人混淆。

configurable 给的说明是 如果为 false , 那么不可以修改, 不可以删除.
但 writable 给的说明是如果设置为 false, 不可以采用 数据运算符 进行赋值

所以这里就有一部分交叉. 如果 writable 为 true 的时候, configurable 为 false ,

那结果会怎么样呢?

写一下具体的例子, 比如

var o = {}; // 创建一个新对象
Object.defineProperty(o, "a", {
  value : "original",
  writable : false, // 这个地方为 false
  enumerable : true,
  configurable : true
});

o.a = "new"; //此时候, 是更改不了 a 的.

var o = {}; // 创建一个新对象
Object.defineProperty(o, "a", {
  value : "original",
  writable : true,
  enumerable : true,
  configurable : false //这里为false
});
o.a = "new";//此时候, a 进行了改变
//但是如果
delete o.a //将返回 false, 并且 a 没有被删除
//结论

此刻我们看来, 对于我们的影响, 目前来看, 主要是
configurable 控制是否可以删除 writable 控制是否可以修改(赋值)
当然 enumerable 控制是否可以枚举.

例如一下的例子,解释了一下 enumerable

var o = {}; // 创建一个新对象
Object.defineProperty(o, "a", {
  value : 37,
  writable : true,
  enumerable : false,//此处设置为false, 在枚举的时候会忽略
  configurable : true
});

for(var i in o){
console.log(o[i]); // undefined, 是没有具体的值的.
}
时间: 2024-10-01 05:06:26

Object.defineProperty 中的 writable 和 configurable 和 enumerable 的理解的相关文章

Js中的Object.defineProperty

通过Object.defineProperty为对象设置属性,并同时规定属性的属性(可见性,可配置性,可枚举性等) 备注:如果通过var obj = {} obj.age = 18这种方式设置的属性,他的可见性,可配置性,可枚举性等都为true,相当于默认设置了本篇讨论的各种属性都为true 语法:Object.defineProperty(obj, prop, descriptor) 第一个参数:目标对象第二个参数:需要定义的属性或方法的名字.第三个参数:目标属性所拥有的特性.(descrip

关于在ES6中的 Object.defineProperty(obj、prop、description)的相关参数问题

对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值. 定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = "张三"; //添加描述 obj.say = function(){}; //添加行为 除了以上添加属性的方式,还可以使用 Object.defineProperty 定义新属性或修改原有的属性. Object.defineProperty() 语法: Object.defineProp

学习 vue2.0/3.0 中的proxy和Object.defineProperty 小记

vue3.0将双向数据绑定的主要方法从Object.defineProperty舍弃,使用了proxy的方式通过观察者模式实现相关的数据变化监听,总的来说是一个很好地前进.今天简单的实验了一下相关的实现和不同情况下的使用输出.简单记录一下吧.同时说明代码中是使用数组的例子进行区分的. 个人认为proxy的实现方式要比Object.defineProperty优雅很多,Object.defineProperty首先是指数据劫持,实际上proxy的运行是后置于Object.definePropert

解析神奇的 Object.defineProperty

这个方法了不起啊..vue.js是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了. 几行代码看他怎么用 var a= {} Object.defineProperty(a,"b",{ value:123 }) console.log(a.b);//123 很简单,它接受三个参数,而且都是必填的.. 传入参数 第一个参数:目标对象 第二个参数:需要定义的属性或方法的名字. 第三个参数:目标属性所拥有的特性

MVVM双向绑定实现之Object.defineProperty

随着web应用的发展,直接操作dom的应用已渐行渐远,取而代之的是时下越来越流行的MVVM框架,dom操作几乎绝迹,这里面自然是框架底层封装的结果.MVVM框架的双向数据绑定使开发效率大大提高:然后在实现这些双向数据绑定时,使用ES7原生的Object.observe方法则是完美解决方案,但是遗憾的是该方法目前还是ES7的草案阶段,各浏览器还不支持,目前chrome 36+支持该方法. 既然Object.observe不被支持,但是其替代方案是ECMAScript 262v5带来的新东西Obje

Javascript Object.defineProperty()

转载声明: 本文标题:Javascript Object.defineProperty() 本文链接:http://www.zuojj.com/archives/994.html,转载请注明转自Benjamin-专注前端开发和用户体验 Javascript作为一种语言,有个美誉,开发者可以重新定义任何事情.虽然这在过去的一些javascript可以,但是ECMAScript5中已经开始得到改变,例如,我们可以使用Object.defineProperty创建一个不能被修改的对象的属性.本文中我们

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

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法EDIT Object.defineProperty(obj, prop, descriptor) 参数 obj 需要定义属性的对象. prop 需定义或修改的属性的名字. descriptor 将被定义或修改的属性的描述符. 返回值 返回传入函数的对象,即第一个参数obj 描述EDIT 该方法允许精确添加或修改对象的属性.一般情况下,我们为对象添加属性是通过

javascript之Object.defineProperty的奥妙

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

Object.defineProperty

对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = "张三"; //添加描述 obj.say = function(){}; //添加行为 除了以上添加属性的方式,还可以使用Object.defineProperty定义新属性或修改原有的属性. Object.defineProperty() 语法: Object.definePropert