Vue 中的 Object.defineProperty()

最爱恰猪蹄

已于 2024-02-14 22:40:28 修改

阅读量205

点赞数 3

文章标签： vue.js javascript 前端

于 2024-02-14 22:38:22 首次发布

本文链接：https://blog.csdn.net/TUTOUXU/article/details/136116857

版权

本文介绍了JavaScript中的Object.defineProperty()方法，用于给对象添加新属性或修改已有属性，重点讲解了配置项如value、writable、getter和setter的使用，以及设置临时变量以避免无限递归的问题。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object.defineProperty()</title>
</head>
<body>
    <!--
        Object.defineProperty()
        1.这个方法是ESS新增的。
        2.这个方法的作用是：给对象新增属性，或者设置对象原有的属性。
        3.怎么用？
            Object.defineProperty(给哪个对象新增属性，'新增的这个属性名叫啥',{给新增的属性设置相关的配置项key:value对})
        4.第三个参数是属性相关的配置项，配置项都有哪些?每个配置项的作用是啥?
            value 配置项:给属性指定值
            writable 配置型: 设置该属性的值是否可以被修改。true表示可以修改。false表示不能修改。
            getter 方法 配置项: 不需要我们手动调用。当读取属性值的时候，getter方法被自动调用。
                *getter方法的返回值非常重要，这个返回值就代表这个属性它的值。
            setter方法 配置项: 不需要我们手动调用的。当修改属性值的时候，setter方法被自动调用。
                *setter 方法上是又一个参数的，这个参数可以接受传过来的值。
            注意: 当配置项当中有setter和getter的时候，value和writable配置项都不能存在。
        
    -->
    <script>
        //这是一个普通对象
        let phone = {}

        // 临时变量
        let temp

        // 给上面的phone对象新增一个color属性
        Object.defineProperty(phone,'color',{
            //value : '太空灰',
            //writable : true,
            // getter方法配置项
            get : function(){
                //return '动态'
                //return this.color
                console.log('getter方法执行了');
            },

            //setter方法配置项
            set : function(val){
                console.log('setter方法执行了',val);
                //this.color = val 
                temp = val
            }

        })
    </script>
</body>
</html>