zoukankan      html  css  js  c++  java
  • 对象的属性类型

    对象属性有两种

    • 数据属性
    • 访问器属性

    数据属性:有四个特性

    • [[configurable]](代表属性是否可配置):当这个属性描述符值为true时,该属性可能会被改变,也可能会被从相应的对象删除,默认为false。
    • [[enumerable]](代表属性是否可枚举):表示能否通过for - in循环返回属性,默认为false。
    • [[value]](代表属性值):包含这个属性的数据值,读取属性值的时候,从这个位置读;写入属性时,把新的值保存在这个位置,默认为undefined.
    • [[writable]](代表属性是否可写):表示能否修改属性的值。

    修改属性的特性必须使用Object.defineProperty()。包含三个参数:属性所在的对象,属性的名字,和一个描述符对象。

     1     var obj = {
     2         x:123,
     3         y:456
     4     }
     5     Object.defineProperty(obj,"x",{
     6         value:56,
     7         writable:true, //表示可以重新赋值写入
     8         enumerable:false, //表示不能被枚举
     9         configurable:false //表示不能被配置
    10     });
    11     console.log(obj.x);  //56
    12     obj.x = 10;
    13     console.log(obj.x);  //不能被重新赋值,输出56
    14     for(var i in obj){
    15         console.log(i);  //输出 y
    16     }

    configurable:false后:

    • delete obj.x 或对象其他属性无法删除
    • 这个属性后面无法再使用Object.defineProperty()方法重新配置configurable:true。
    • 有一个特殊情况:writable:true可以改为false。但是writable:false无法改为true。
     1     var obj = {
     2         x:123
     3     }
     4     //等价于
     5     Object.defineProperty(obj,"x",{
     6         value:123,
     7         writable:true, 
     8         enumerable:true, 
     9         configurable:true 
    10     });
    1     var obj = {
    2         x:123
    3     }
    4     Object.defineProperty(obj,"y",{value:123});

    用Object.defineProperty()添加一个新的值时,其他三个属性不写,默认为false,如果只是调用此方法修改已定义的属性特性则无此限制。上面代码等价于:

    1     var obj = {
    2         x:123
    3     }
    4     Object.defineProperty(obj,"y",{
    5         value:123,
    6         writable:false, 
    7         enumerable:false, 
    8         configurable:false
    9     });

    可以使用Object.defineProperties()同时设置多个属性

     1     var obj = {};
     2     Object.defineProperties(obj,{
     3         x:{
     4             value: "yewenxiang",
     5             writable:true
     6         },
     7         y:{
     8             value: "xiangwang",
     9             writable:false
    10         }
    11     });

    访问器属性:有四个特性

    • [[configurable]]:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,能否把属性修改为数据属性。对于直接在对象定义的属性,这个特性的默认值为true。
    • [[enumerable]]:表示能否通过for - in 循环返回属性。对于直接在对象定义的属性,这个特性的默认值为true。
    • [[get]]:在读取属性时调用的函数。默认值为undefined
    • [[set]]:在写入属性时调用的函数。默认值为undefined

    使用访问器属性的常见方式:设置一个属性的值导致其他属性发生变化

     1     var obj = {
     2         x:2016,
     3         y:12
     4     };
     5     Object.defineProperty(obj,"z",{
     6         get:function(){
     7             return this.x;
     8         },
     9         set:function(newValue){
    10             if(newValue > 12){
    11                 this.x = 2017;
    12                 this.y = 1;
    13             }
    14         }
    15     })
    16     console.log(obj.x);      //2016
    17     console.log(obj.y);        //12
    18     obj.z = 13;
    19     console.log(obj.x);        //2017
    20     console.log(obj.y);        //1
    21     console.log(obj.z);        //2017

    不一定非要同时指定get和set。只设置get代表属性z是不可写的,只能获取,尝试写入会被忽略,严格模式下或报错。同样只设置set代表属性z是不可读的,只能设置,尝试读取会返回undefined,在严格模式会报错。

    访问器属性另外一种写法:

     1     var obj = {
     2         x:1,
     3         y:2,
     4         z:3,
     5         get zhouchang(){
     6             return this.x+this.y+this.z;
     7         },
     8         set change(value){
     9             this.x*=value;
    10             this.y*=value;
    11             this.z*=value;
    12         }
    13     };
    14     console.log(obj.zhouchang); //6
    15     obj.change = 2;
    16     console.log(obj.zhouchang);  //12

    最后可以使用Object.getOwnPropertyDescriptor()方法来获取属性特性的值:有两个参数,属性所在的对象和要被读取其描述符的属性名

    • 访问器属性eg:

        Object.getOwnPropertyDescriptor(obj,"x").configurable或.enumerable或.get或.set

    • 数据属性eg:

        Object.getOwnPropertyDescriptor(obj,"z").configurable或.enumerable或.writable或.value

    ----总结来自javascript高级程序设计一书。

  • 相关阅读:
    window安装配置 zookeeper 单机模式
    Gradle安装配置
    Window安装配置Redis
    springBoot2.0 配置@ControllerAdvice 捕获异常统一处理
    java中的String,StringBuffrer,Stringbuilder的区别
    springBoot2.0 配置shiro实现权限管理
    Vue双向绑定实现原理demo
    springBoot2.0 配置 mybatis+mybatisPlus+redis
    vue-cli3.0 使用图形化界面创建和管理项目
    vue-cli3.0 脚手架搭建项目
  • 原文地址:https://www.cnblogs.com/yewenxiang/p/6185323.html
Copyright © 2011-2022 走看看