zoukankan      html  css  js  c++  java
  • Js中的Object.defineProperty

    通过Object.defineProperty为对象设置属性,并同时规定属性的属性(可见性,可配置性,可枚举性等)

    备注:如果通过var obj = {} obj.age = 18这种方式设置的属性,他的可见性,可配置性,可枚举性等都为true,相当于默认设置了本篇讨论的各种属性都为true

    语法:Object.defineProperty(obj, prop, descriptor)

    第一个参数:目标对象
    第二个参数:需要定义的属性或方法的名字。
    第三个参数:目标属性所拥有的特性。(descriptor)

    descriptor:取值
      value:属性的值
      writable:如果为false,属性的值就不能被重写,只能为只读了
      configurable:总开关,一旦为false,就不能再设置他的(value,writable,configurable)
      enumerable:是否能在for...in循环中遍历出来或在Object.keys中列举出来。
      get:设置方法
      set:获取方法

    备注:Object.getOwnPropertyDescriptor(obj,"name")查看obj对象name属性的属性

    descriptor默认值
      var a= {}
      Object.defineProperty(a,"b",{
        value:123
      })
      console.log(a.b);//123
    只设置了value别的并没有设置,它会默认把writable,configurable,enumerable都设置为false

    configurable  总开关,第一次设置 false 之后,第二次什么设置也不行了

    备注:如果是不可配置,可以把writable由true改为false但不能从false改为true
      var a= {}
      Object.defineProperty(a,"b",{
        configurable:false
      })
      Object.defineProperty(a,"b",{
        configurable:true
      })
      //error: Uncaught TypeError: Cannot redefine property: b


    writable  如果设置为fasle,就变成只读了。。
      var a = {};
      Object.defineProperty(a, "b", {
        value : 123,
        writable : false
      });
      console.log(a.b);  // 打印 37
      a.b = 25;     // 没有错误抛出(在严格模式下会抛出)
      console.log(a.b);  // 打印 37, 赋值不起作用。

    enumerable  定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。
      var a= {}
      Object.defineProperty(a,"b",{
        value:3445,
        enumerable:true
      })
      console.log(Object.keys(a));  // 打印["b"]
      改为false
      var a= {}
      Object.defineProperty(a,"b",{
        value:3445,
        enumerable:false
      })
      console.log(Object.keys(a));// 打印[]


    set和get  赋值 或者 取值的时候会分别触发 set 和 get 对应的函数
    注:1.不能同时设置get和set与wriable或value,就是说想用get和set,就不能用wriable或value中的任何一个

      2.通过obj={} 这种形式去定义get/set方法的时候,和这里不太一样

        a.get/set和函数之间不需要冒号,例如obj={get name(){return "xiaol"}}
      var a= {}
      Object.defineProperty(a,"b",{
        set:function(newValue){
          console.log("你要赋值给我,我的新值是"+newValue)
        },
        get:function(){
          console.log("你取我的值")
          return 2   //注意这里,我硬编码返回2
        }
      })
      a.b =1   //打印 你要赋值给我,我的新值是1
      console.log(a.b) //打印 你取我的值
               //打印 2 注意这里,和我的硬编码相同的

  • 相关阅读:
    JS基础的入口函数以及函数
    JS基础的数组
    JS基础的数学函数、日期时间函数、运算符和流程语句
    JS基础的引入、注释、变量、数据类型和输出语法
    CSS3的动画、弹性盒子和多媒体查询
    CSS3的颜色(RGBA)透明度、渐变颜色、图片、旋转和过渡
    CSS3边框、背景和字体
    java基础(九)---继续聊聊map
    java基础(八)---map
    java基础(七)--- set
  • 原文地址:https://www.cnblogs.com/413xiaol/p/6754745.html
Copyright © 2011-2022 走看看