• 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, 是没有具体的值的.
    }
  • 相关阅读:
    clientHeight、offsetHeight、scrollHeight详解
    JavaScript中常见的字符串操作函数及用法
    获取伪元素的属性和改变伪元素的属性
    HTML和CSS实现左侧固定宽度右侧内容可滚动
    gulp常用插件
    gulp入门详细教程
    Javascript 异步实现机制
    JavaScript:彻底理解同步、异步和事件循环(Event Loop)
    chrome调试,打完断点后关于JS的几个控制介绍
    js断点调试心得
  • 原文地址:https://www.cnblogs.com/asdfq/p/7011396.html
Copyright © 2020-2023  润新知