JS之Object.defineProperty方法

简介: JS之Object.defineProperty方法

给对象添加属性的方法有许多,这次让我为大家介绍一种给对象添加属性的静态方法吧!

语法:Objcet.defineProperty(对象的名称,“添加的键名”,{value:键值})

const obj = {name:"张三",age:18}
    // 我们给obj添加一个新属性
    Object.defineProperty(obj,"hobby",{
        value:"打篮球"
    })
    console.log(obj);

可以看到我们成功添加了一个属性

这种静态方法还可以玩

我们添加了这个属性,我们可以控制这个属性能否被修改,能否被删除,能否被循环

我为大家介绍一下以下三个方法

writable:布尔值;如果为true就是能被修改,为false不能被修改

configurable:布尔值;如果为true就是能被删除,为false不能被删除

enumerable:布尔值;如果为true就是能被循环,为false不能被循环

const obj = {name:"张三",age:18}
    // 我们给obj添加一个新属性,可修改,不可删除,不可循环
    Object.defineProperty(obj,"hobby",{
        value:"打篮球",
        writable:true,
        configurable:false,
        enumerable:false
    })
    obj["hobby"] = "踢足球"//修改成功
    delete obj["hobby"]//删除失败
    for(let k in obj) {
        console.log(obj[k]);//不能循环到hobby
    }
    console.log(obj);

getter与setter

const obj = { name: "张三", age: 18 }
    // 我们给obj添加一个新属性,可修改,不可删除,不可循环
    Object.defineProperty(obj, "hobby", {
        get() {
            console.log("获取了")
            // 返回一个篮球
            return "篮球"
        },
        set(val) {
            console.log("被修改了")
            // 修改后val为足球
            console.log(val)
        }
    })
    // 获取
    obj["hobby"]
    console.log(obj)
    // 修改后val为足球
    obj["hobby"] = "足球"
    console.log(obj)

来看第一次打印的对象

来看第二次打印的对象

我们发现hobby的属性值没有被修改

这是一个注意点

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关文章
|
28天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
26天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
121 52
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
28天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
26 1
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
39 7
|
1月前
|
JavaScript 前端开发
`Object.create()` 方法的参数
【10月更文挑战第29天】`Object.create()` 方法的参数提供了多种创建对象和控制对象属性及继承关系的方式,开发人员可以根据具体的需求灵活运用,以实现更高效、更符合设计要求的对象创建和继承机制。
|
1月前
|
存储 Java 程序员
Java基础的灵魂——Object类方法详解(社招面试不踩坑)
本文介绍了Java中`Object`类的几个重要方法,包括`toString`、`equals`、`hashCode`、`finalize`、`clone`、`getClass`、`notify`和`wait`。这些方法是面试中的常考点,掌握它们有助于理解Java对象的行为和实现多线程编程。作者通过具体示例和应用场景,详细解析了每个方法的作用和重写技巧,帮助读者更好地应对面试和技术开发。
114 4
|
1月前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。