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

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

目录
相关文章
|
15天前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
56 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
3月前
|
JavaScript 前端开发 开发者
讲述Vue框架中用于对象响应式变化的Object.defineProperty函数。
综上所述,Vue.js通过 `Object.defineProperty()`提供了强大的响应式能力,使得状态管理变得简洁高效。这种能力是Vue.js受到广大开发者青睐的重要原因之一。尽管Vue 3.x使用Proxy替代了该方法,但对于Vue 2.x及其之前版本,`Object.defineProperty()`是理解Vue.js内部工作机制不可或缺的一部分。
130 27
|
9月前
|
安全 Java
Object取值转java对象
通过本文的介绍,我们了解了几种将 `Object`类型转换为Java对象的方法,包括强制类型转换、使用 `instanceof`检查类型和泛型方法等。此外,还探讨了在集合、反射和序列化等常见场景中的应用。掌握这些方法和技巧,有助于编写更健壮和类型安全的Java代码。
464 17
|
7月前
|
前端开发 数据处理
对象数据的读取,看这一篇就够了!Object.keys()、Object.values()和Object.entries()用法详解;如何获取对象原型链上的属性
Object.keys()、Object.values()和Object.entries()都是利于对象操作的便捷方法,能有效提升数据处理的效率。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
ES6中map对象的使用,确实比Object好使哈
ES6中Map对象的使用优势,包括任意类型作为键、直接获取大小、增删查改操作等。Map的键可以是函数、对象、NaN等,支持forEach循环和for...of循环。
134 1
ES6中map对象的使用,确实比Object好使哈
|
12月前
|
Python
通过 type 和 object 之间的关联,进一步分析类型对象
通过 type 和 object 之间的关联,进一步分析类型对象
176 3
|
数据安全/隐私保护
作用域通信对象:session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后,跳转到另外一个页面显示用户
该博客文章通过示例演示了如何使用session对象的`setAttribute`和`getAttribute`方法在不同页面间传递和显示用户的用户名和密码信息,并说明了如何设置会话的有效期。
作用域通信对象:session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后,跳转到另外一个页面显示用户
|
12月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
185 0
|
SQL 存储 数据库
对象关系映射(Object-Relational Mapping)
【8月更文挑战第17天】
308 2
【Azure Developer】使用PowerShell Where-Object方法过滤多维ArrayList时候,遇见的诡异问题 -- 当查找结果只有一个对象时,返回结果修改了对象结构,把多维变为一维
【Azure Developer】使用PowerShell Where-Object方法过滤多维ArrayList时候,遇见的诡异问题 -- 当查找结果只有一个对象时,返回结果修改了对象结构,把多维变为一维

热门文章

最新文章