JavaScript之什么是 Object.defineProperty-程序员文哥

什么是 Object.defineProperty

Object.defineProperty 是 JavaScript 中的一个内置方法，用于在对象上定义新的属性或修改现有属性。通过使用这个方法，我们可以控制属性的各种行为，例如属性的可枚举性、可配置性、可写性以及获取和设置属性值时的自定义逻辑。

使用 Object.defineProperty 定义属性

Object.defineProperty(obj, prop, descriptor);

obj：必需，目标对象
prop：必需，需定义或修改的属性的名字
descriptor：必需，目标属性所拥有的特性

descriptor 对象的属性

value：值，默认为 undefined。
enumerable：是否可枚举性（使用for...in或Object.keys()），默认为 false。
writable：是否可以被修改，默认为 false。
configurable：是否可以被删除，默认为 false。
get：获取时,触发的函数，默认为 undefined。
set：设置时,触发的函数，默认为 undefined。

下面是一个示例，演示了可枚举属性和不可枚举属性的区别：

    <script> 
        let data = { name: '张三' }; 
        Object.defineProperty(data, 'message', {
            value: "Hello", //给属性添加值
            enumerable: false, //控制属性是否可以枚举，默认值是false
        });

        for (let key in data) {
            console.log('1、for-data：',key,"=",data[key]); // 输出：'张三'
        }

        console.log('2、keys-data：',Object.keys(data)); // 输出：['name'] 
        console.log('3、json-data：', JSON.stringify(data)); //{"name":"张三"}

    </script>

存取器getter/setter

注意：当使用了getter或setter方法，不允许使用writable和value这两个属性

不要在getter中再次获取该属性值，也不要在setter中再次设置改属性，否则会栈溢出！

getter: 当访问该属性时，该方法会被执行。函数的返回值会作为该属性的值返回。
setter: 当属性值修改时，该方法会被执行。该方法将接受唯一参数，即该属性新的参数值。

    <script>
        let no = 0;
        let data = { name: '唐大' };
        console.log(++no, '、name=', data.name);  //张三
        let nameValue = '李二';
        Object.defineProperty(data, 'name', {
            get: function () {
                //当获取值的时候触发的函数
                console.log('@@@get');
                return nameValue;
            },
            set: function (value) {
                //当设置值的时候触发的函数,设置的新值通过参数value拿到
                console.log('@@@set');
                nameValue = value;
            }
        });

        //获取值
        console.log(++no, '、name=', data.name);  //李四

        //设置值
        data.name = '张三';
        console.log(++no, '、name=', data.name); //王二 

    </script>