409 Object扩展： Object.create()，Object.defineProperties()，get propertyName(){}，set propertyName(){}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>03_Object扩展</title>
</head>

<body>
    <!--
        ES5给Object扩展了好一些静态方法, 常用的2个:
        1. Object.create(prototype, [descriptors])
        * 作用: 以指定对象为原型，创建新的对象 【Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。】
        * 为新的对象指定新的属性, 并对属性进行描述
            value : 指定值
            writable : 标识当前属性值是否是可修改的, 默认为false
            configurable: 标识当前属性是否可以被删除, 默认为false
            enumerable： 标识当前属性是否能用for in 枚举, 默认为false

        2. Object.defineProperties(object, descriptors)
        * 作用: 为指定对象定义扩展多个属性
        * get ：用来获取当前属性值的回调函数
        * set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值
        * 存取器属性：setter、getter，一个用来存值，一个用来取值
    -->

    <script type="text/javascript">
        var obj = {
            name: 'curry',
            age: 29
        }

        var obj1 = {};

        obj1 = Object.create(obj, {
            sex: {
                value: '男',
                writable: true
            }
        });

        obj1.sex = '女';
        console.log(obj1.sex); // 女

        // obj1可以使用obj的属性。
        console.log(obj1.name); // curry
        console.log(obj1.age); // 29


        // ----------------------


        //Object.defineProperties(object, descriptors)
        var obj2 = {
            firstName: 'curry',
            lastName: 'stephen'
        };

        Object.defineProperties(obj2, {
            fullName: {
                get: function() {
                    console.log('执行get了')
                    return this.firstName + '-' + this.lastName
                },
                set: function(data) {
                    console.log('执行set了')
                    var names = data.split('-');
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        });
        console.log(obj2.fullName); // curry-stephen

        obj2.firstName = 'tim';
        obj2.lastName = 'duncan';
        console.log(obj2.fullName); // tim-duncan

        obj2.fullName = 'kobe-bryant'; // 执行set了
        console.log(obj2.fullName); // kobe-bryant
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <!--
        对象本身的两个方法
        * get propertyName(){}: 用来得到当前属性值的回调函数
        * set propertyName(){}: 用来监视当前属性值变化的回调函数
    -->

    <script type='text/javascript'>
        var obj = {
            firstName: 'kobe',
            lastName: 'bryant',

            // get是回调函数，把get当做function即可
            get fullName() {
                console.log('执行了get')
                return this.firstName + ' ' + this.lastName
            },
            // set是回调函数，把set当做function即可
            set fullName(data) {
                console.log('执行了set')
                var names = data.split(' ');
                this.firstName = names[0];
                this.lastName = names[1];
            }
        };

        console.log(obj.fullName); // 执行了get  kobe bryant
        obj.fullName = 'curry stephen'; // 执行了set
        console.log(obj.fullName); // 执行了get  curry stephen
    </script>
</body>

</html>

409 Object扩展： Object.create()，Object.defineProperties()，get propertyName(){}，set propertyName(){}

Guess you like