当前位置:首页 > javascript > 正文内容

js 中 Object.defineProperty() 定义对象属性详解

hxing6411个月前 (03-14)javascript2766

概述

Object.defineProperty() 用于给一个对象定义一个新属性或是修改某个现有属性,并返回此对象。Object.defineProperty(obj,prop,descriptor) 它接收 3 个参数,第 1 个是要定义属性的对象;第 2 个是要定义或修改的属性的属性名或 Symbol;第 3 个是对该属性的描述,称之为属性描述符,为一个对象,可以拥有 4 个 key。

  • value:设置属性值,默认undefined

  • writable:是否可以重写,true | false,默认false

  • enumerable:目标属性是否可以被枚举,true | false,默认false

  • configerable:目标属性是否可以删除或者再次修改特性,true | false,默认false


属性描述

enumerable:描述该属性是否是可枚举的。如下例子,new 一个包含name和sex属性的person实例,然后通过Object.defineProperty()定义属性age, 然后通过for语句变量person对象的属性,看看效果:


let person={name:'feixue', sex:0};
Object.defineProperty(person,'age', {
    value: 30,
    enumerable: false
})

console.log(person);

for(let key in person)
{
    console.log(key);
}



如下图,person有3个属性{name:'feixue',sex:0,age:30}。其中age是通过Object.defineProperty()定义的,enumerable设置false。 当遍历person时只能看到name和sex, 看不到age。 当enumerable设置true时,遍历person可以看到age属性(自行尝试)

115702-20240228191750830-1119120477.png


value:属性的值,可以设置和修改。注意:如果允许属性可修改,需要设置‘writable':true。示例如下,修改age的值,看看效果:


let person={name:'feixue', sex:0};
Object.defineProperty(person,'age', {
    value:30,
    enumerable:false,
    writable:true
})
console.log(person);
person.age=40;
console.log(person);


如下图,age初始值是30,通过修改设置成40

115702-20240228193459367-816903818.png


get /set : get设置属性值,get 获取属性值 

let person = { name: 'feixue', sex: 0 };
let _age = 45;
Object.defineProperty(person, 'age',
    {
        get: function () {
            return _age;
        },
        set(value) {
            _age = value;
        }
    })
console.log("age is " + person.age);
person.age = 60;
console.log("age is " + person.age);




复制代码

如图所示,getter和setter可以写成get(){}/set(value){} 或者 get:function{}/set:function(value){} 。 当属性被获取时,会执行getter函数。当属性被设置时,会执行setter函数。


115702-20240228195751933-404851534.png

 请注意, 使用getter 和 setter ,就不可以设置value了。请看下面的示例,同时使用getter/setter 和 value会报什么错误?

let person = { name: 'feixue', sex: 0 };
let _age = 45;
Object.defineProperty(person, 'age',
    {
        value: 30,
        get: function () {
            return _age;
        },
        set(value) {
            _age = value;
        }
    })
console.log(person);

此处同时使用了value和 getter/setter, 报错信息如下


115702-20240228201041852-1661625417.png


另外,使用value和 getter/setter 还是有区别的, 请看下图, 2者有什么区别? 如下图,图一使用了vue, 图二使用了getter/setter.





扫描二维码推送至手机访问。

版权声明:本文由星星博客发布,如需转载请注明出处。

本文链接:http://xingxinghan.cn/?id=519

分享给朋友:
返回列表

上一篇:js 关于高阶函数

没有最新的文章了...

“js 中 Object.defineProperty() 定义对象属性详解 ” 的相关文章

JS逆向实战20——深入解析JavaScript虚拟机逆向工程

在Web开发领域中,JavaScript(JS)是一门广泛使用的编程语言。然而,由于其脚本性质和开放性,JavaScript代码的安全性一直备受关注。为了保护知识产权和提高代码的安全性,一些开发者会将JavaScript代码进行加密和混淆。这就需要逆向工程师掌握JS逆向技术来还原加密和混淆后的代码。...

js模块化历程

这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来。经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史。 无模块时代在ajax还未提出之前,js还只是一种“玩具语言”,由Brendan Eich花了不到十天时间发明,用来在网页...

深入理解JavaScript原型链

JavaScript原型链是该语言中一个核心的概念,理解它对于成为一名优秀的JavaScript开发者至关重要。在本篇文章中,我们将深入探讨JavaScript原型链的工作原理、如何使用原型链来实现继承,以及一些与原型相关的最佳实践。 原型链是什么?...

JavaScript中的call、bind和apply方法深度解析

JavaScript是一种动态的、强大的编程语言,它的灵活性源于其独特的函数调用方式。在JavaScript中,我们常常会遇到三个非常重要的函数方法:call、bind和apply。这些方法都是用来改变函数运行时this的指向的。理解它们的工作原理和使用场景,对于我们编写高质量的Java...

7个Js async/await高级用法

JavaScript的异步编程已经从回调(Callback)演进到Promise,再到如今广泛使用的async/await语法。后者不仅让异步代码更加简洁,而且更贴近同步代码的逻辑与结构,大大增强了代码的可读性与可维护性。在掌握了基础用法之后,下面将介绍一些高级用法,以便充分利用async/awai...

微信小程序如何下载外部文件

小程序下载文件主要是通过转发文件到聊天进行转存,以下为具体实现代码,可以直接拿去用,传入下载的url:const download = (url) => {   var that = this...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。