Object(对象)中的属性

简介: js Object(对象)中的属性

对象中的属性

一、数据属性(数据描述符)

(1)configurable:表示能否通过delete删除此属性,能否修改属性的特性,或能否修改把属性修改为访问器属性,如果直接使用字面量定义对象,默认值为true。
(2)enumerable:表示该属性是否可枚举,即是否通过for-in循环或Object.keys()返回属性,如果直接使用字面量定义对象,默认值为true。
(3)writable:能否修改属性的值,如果直接使用字面量定义对象,默认值为true。
(4)value:该属性对应的值,默认为undefined。

二、访问器属性(存取描述符)

(1)configurable:和数据属性的[[Configurable]]一样,表示能否通过delete删除此属性,能否修改属性的特性,或能否修改把属性修改为访问器属性,如果直接使用字面量定义对象,默认值为true
(2)enumerable:和数据属性的[[Configurable]]一样,表示该属性是否可枚举,即是否通过for-in循环或Object.keys()返回属性,如果直接使用字面量定义对象,默认值为true
(3)get:一个给属性提供 getter 的方法(访问对象属性时调用的函数,返回值就是当前属性的值),如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined
(4)set:一个给属性提供 setter 的方法(给对象属性设置值时调用的函数),如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。

在对象中添加存取描述符属性
// 定义一个对象obj
let obj = {}
// 定义一个变量a
let a = 1;
// 定义一个变量b
let b;
//为obj对象设置一个m属性
Object.defineProperty(obj, 'm', {
    configurable: true,
    enumerable: true,
    //添加存取属性,当读取属性值时,调用get方法
    get: function() {
        return a + 1;
    },
    //当设置属性时,调用set方法
    set: function(i) {
        a = i + 2;
        b = i + 1;
    }
})
console.log(obj.m); //调用属性的get方法,结果为2
//为属性从新设置一个值,此时会调用set方法
obj.m = 4; //参数i的值就是4
console.log(a); //打印结果为6,a=i+2;i的值是4,所以a=6
console.log(b); //打印结果为5,b=i+1;i的值是4,所以b=5

注意:
1.getter和setter可以不同时使用,但在严格模式下只其中一个,会抛出错误
2.数据描述符与存取描述符不可混用,会抛出错误

value不能和get和set同时使用。如下:

let obj = {}
let a = 1;
let b ;
Object.defineProperty(obj, 'm', {
    value:'123',//切记不能使用value和get,set同时使用,会报错
    get: function() {
        return a;
    },
    set: function(i) {
        b = i + 1;
    }
})
set是给属性赋值,get是取属性的值,get是得到 一般是要返回的 set 是设置 不用返回
// 定义一个函数person
function person() {
    // 定义一个变量age,值为18
    let age = 18;
    // 为当前函数定义一个personAge属性
    Object.defineProperty(this, "personAge", {
        //为其设置一个get访问器,当读取该属性时调用get
        get: function() {
            return age - 10;
        },
        //为其设置一个set访问器,当更新该属性时调用set
        set: function(v) {
            age = v;
        }
    })
}
//实例化person对象
let p = new person();
//读取personAge的值,此时会调用get中的方法
console.log(p.personAge); // 8
//重新为属性personAge设置一个值,此时会调用set中的方法
p.personAge = 1994;
console.log(p.personAge); //1984

有兴趣可以了解下对象的方法

目录
相关文章
|
1月前
|
存储 算法 Java
滚雪球学Java(42):探索对象的奥秘:解析Java中的Object类
【5月更文挑战第17天】🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&订阅!持续更新中,up!up!up!!
28 2
滚雪球学Java(42):探索对象的奥秘:解析Java中的Object类
|
2天前
|
存储 JSON JavaScript
JavaScript 魔法镜:透视对象Object与执行上下文的内在奥秘
JavaScript 魔法镜:透视对象Object与执行上下文的内在奥秘
|
1月前
|
前端开发 容器
使用 object-fit 属性完美过渡图片
这篇文章介绍了CSS属性object-fit的用法。object-fit属性用于指定元素的内容如何适应指定容器的高度和宽度。该属性一般适用于img和video标签,可以进行剪切、缩放或拉伸操作。文章中展示了通过object-fit属性来统一设置多张图片的样式,保持原始比例并改变显示位置的示例,以及使用object-position属性实现简单的过渡效果。
使用 object-fit 属性完美过渡图片
|
21天前
|
Java 编译器 数据处理
JavaSE——面相对象高级一(4/4)-继承相关的注意事项:权限修饰符、单继承、Object类、方法重写、子类访问成员的特点......
JavaSE——面相对象高级一(4/4)-继承相关的注意事项:权限修饰符、单继承、Object类、方法重写、子类访问成员的特点......
29 0
|
1月前
|
算法 Java 测试技术
简介Object类+接口实例(深浅拷贝、对象数组排序)
简介Object类+接口实例(深浅拷贝、对象数组排序)
|
1月前
|
设计模式 Java API
【设计模式】JAVA Design Patterns——Active Object(活动对象设计模式)
【设计模式】JAVA Design Patterns——Active Object(活动对象设计模式)
|
1月前
|
JavaScript
vue2中$set的原理_它对object属性做了啥?
vue2中$set的原理_它对object属性做了啥?
19 1
|
1月前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`'1.2,2,3,4,5'`)转换为对象数组。通过使用`split(',')`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
|
1月前
|
Java 流计算
在Flink实时任务中,POJO(Plain Old Java Object)对象的模式演进可能会引起不兼容的问题
【2月更文挑战第6天】在Flink实时任务中,POJO(Plain Old Java Object)对象的模式演进可能会引起不兼容的问题
32 3
|
1月前
|
存储 设计模式 Python
Python中的类(Class)和对象(Object)
Python中的类(Class)和对象(Object)
48 0