JavaScript对象之get/set方法 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js对象的set和get 以及关于控制台打印的几种快捷效果</title>
    </head>
    <body>
        <script type="text/javascript">
            // JavaScript对象之get/set方法
            let obj = {
                name: 'bob',
                job: '程序员',
                set age(val) {
                    console.log(new Date().getFullYear(), val, 'val') // 2021 30 "val"
                },
                get age() {
                    return new Date().getFullYear() - 1993
                }
            }

            // 对象初始化之后添加属性 方式一
            obj.__defineGetter__('sex', function() {
                return sex
            });
            obj.__defineSetter__('sex', function(val) {
                sex = val
            });

            // 对象初始化之后添加属性 方式二 Object.defineProperty定义的属性默认是不可配置的，即 writable=false,configuarble=false
            // 解决方法是给当前对象定义一个可配置的属性 {writable:true, configuarble:true, enumerable:true, value: xxx}
            // 对象的四个特性
            // 值（value）：对象可以通过.访问其属性值
            // 可写性（writable）：控制值(value)是否可修改,默认是true可修改的
            // 可枚举性（enumerable）：控制是否可用for in遍历到默认是true,即使不能for in，用"."也能访问 【控制台灰色的标识不可枚举加上此属性即可变为可枚举】
            // 可配置性（configurable）：控制是否可以修改其他特性，是否可以删除属性，修改不可逆转默认是true；
            Object.defineProperty(obj, 'desc', {
                enumerable: true,
                set: function(val) {
                    console.log('desc被赋值：', val);
                    desc = val
                },
                get: function() {
                    console.log('desc被取出：', desc)
                    return desc
                }
            })

            // 如果有set 和 get 就会覆盖 writable 但是依旧可以使用 configurable 和 enumerable
            Object.defineProperty(obj, 'info', {
                writable: true,
                configuarble: true,
                enumerable: true,
                value: '描述信息'
            })
            console.log(obj.age) // 28
            obj.sex = 'man'
            obj.desc = '新增属性'
            obj.age = 30
            console.log(obj.age) // 28 
            console.log(obj.desc)
            console.log(obj)
            console.log(obj.info, '更改前') // 描述信息 更改前
            obj.info = '更改描述信息成功'
            console.log(obj.info, '更改后') // 更改描述信息成功 更改后
            console.info({ ...obj })

            // 关于打印
            let arr = [{
                id: 1,
                name: 'bob'
            }, {
                id: 2,
                name: 'lala'
            }, {
                id: 3,
                name: 'coco'
            }]
            console.log(1) // 值
            console.info(1) // 信息
            console.debug(1) // 调试信息
            console.warn(1) // 警告信息
            console.dir(obj) // 以列表形式输出一个对象的所有属性
            console.table(obj)
            console.table(arr) // 以表格形式展示数组
            console.table(arr, ['id']) // 只看id那一列
        </script>
    </body>
</html>

 自己整理，请勿随意转载！！！！

posted @ 2021-03-05 18:41  鱼樱前端  阅读(627)  评论(0)  编辑  收藏  举报