zoukankan      html  css  js  c++  java
  • ES6参考---es5-Object扩展

    ES6参考---es5-Object扩展

    一、总结

    一句话总结:

    1、Object.create(prototype, [descriptors]):以指定对象为原型创建新的对象,并且为新的对象指定新的属性, 并对属性进行描述
    2、Object.defineProperties(object, descriptors):为指定对象定义扩展多个属性
    1. Object.create(prototype, [descriptors])
      * 作用: 以指定对象为原型创建新的对象
      * 为新的对象指定新的属性, 并对属性进行描述
        value : 指定值
        writable : 标识当前属性值是否是可修改的, 默认为false
        configurable: 标识当前属性是否可以被删除 默认为false
        enumerable: 标识当前属性是否能用for in 枚举 默认为false
    
    2. Object.defineProperties(object, descriptors)
      * 作用: 为指定对象定义扩展多个属性
      * get :用来获取当前属性值得回调函数
      * set :修改当前属性值得触发的回调函数,并且实参即为修改后的值
      * 存取器属性:setter,getter一个用来存值,一个用来取值

    1、Object.create(prototype, [descriptors]) 作用?

    a、prototype: 以指定对象为原型创建新的对象
    b、[descriptors]:为新的对象指定新的属性, 并对属性进行描述
    var obj = {name : 'curry', age : 29}
    var obj1 = {};
    obj1 = Object.create(obj, {
        sex : {
            value : '男',
            writable : true
        }
    });
    obj1.sex = '女';
    console.log(obj1.sex);

    2、Object.create(prototype, [descriptors]):以指定对象为原型创建新的对象 实例?

    Object.create(obj, {sex:{}}):obj做原型,{sex:{}}是添加新属性
    var obj = {name : 'curry', age : 29}
    var obj1 = {};
    obj1 = Object.create(obj, {
        sex : {
            value : '男',
            writable : true
        }
    });
    obj1.sex = '女';
    console.log(obj1.sex);

    3、Object.create(prototype, [descriptors]):为新的对象指定新的属性, 并对属性进行描述 中有哪些描述属性?

    a、value : 指定值
    b、writable : 标识当前属性值是否是可修改的, 默认为false
    c、configurable: 标识当前属性是否可以被删除 默认为false
    d、enumerable: 标识当前属性是否能用for in 枚举 默认为false
    var obj = {name : 'curry', age : 29}
    var obj1 = {};
    obj1 = Object.create(obj, {
        sex : {
            value : '男',
            writable : true
        }
    });
    obj1.sex = '女';
    console.log(obj1.sex);

    4、Object.defineProperties(object, descriptors) 的作用?

    为指定对象定义扩展多个属性,扩展的属性里面可以有get和set方法
    var obj2 = {
        firstName : 'curry',
        lastName : 'stephen'
    };
    Object.defineProperties(obj2, {
        fullName : {
            get : function () {
                return this.firstName + '-' + this.lastName
            },
            set : function (data) {
                var names = data.split('-');
                this.firstName = names[0];
                this.lastName = names[1];
            }
        }
    });
    console.log(obj2.fullName);
    obj2.firstName = 'tim';
    obj2.lastName = 'duncan';
    console.log(obj2.fullName);
    obj2.fullName = 'kobe-bryant';
    console.log(obj2.fullName);

    5、Object.defineProperties(object, descriptors):为指定对象定义扩展多个属性  中的每个属性的get和set方法的作用是什么?

    1、get:用来获取当前属性值得回调函数
    2、set:修改当前属性值得触发的回调函数,并且实参即为修改后的值
    var obj2 = {
        firstName : 'curry',
        lastName : 'stephen'
    };
    Object.defineProperties(obj2, {
        fullName : {
            get : function () {
                return this.firstName + '-' + this.lastName
            },
            set : function (data) {
                var names = data.split('-');
                this.firstName = names[0];
                this.lastName = names[1];
            }
        }
    });
    console.log(obj2.fullName);
    obj2.firstName = 'tim';
    obj2.lastName = 'duncan';
    console.log(obj2.fullName);
    obj2.fullName = 'kobe-bryant';
    console.log(obj2.fullName);

    二、es5-Object扩展

    博客对应课程的视频位置:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="UTF-8">
     5   <title>03_Object扩展</title>
     6 </head>
     7 <body>
     8 <!--
     9 ES5给Object扩展了好一些静态方法, 常用的2个:
    10 1. Object.create(prototype, [descriptors])
    11   * 作用: 以指定对象为原型创建新的对象
    12   * 为新的对象指定新的属性, 并对属性进行描述
    13     value : 指定值
    14     writable : 标识当前属性值是否是可修改的, 默认为false
    15     configurable: 标识当前属性是否可以被删除 默认为false
    16     enumerable: 标识当前属性是否能用for in 枚举 默认为false
    17 
    18 2. Object.defineProperties(object, descriptors)
    19   * 作用: 为指定对象定义扩展多个属性
    20   * get :用来获取当前属性值得回调函数
    21   * set :修改当前属性值得触发的回调函数,并且实参即为修改后的值
    22   * 存取器属性:setter,getter一个用来存值,一个用来取值
    23 -->
    24 <script type="text/javascript">
    25     var obj = {name : 'curry', age : 29}
    26     var obj1 = {};
    27     obj1 = Object.create(obj, {
    28         sex : {
    29             value : '',
    30             writable : true
    31         }
    32     });
    33     obj1.sex = '';
    34     console.log(obj1.sex);
    35 
    36     //Object.defineProperties(object, descriptors)
    37     var obj2 = {
    38         firstName : 'curry',
    39         lastName : 'stephen'
    40     };
    41     Object.defineProperties(obj2, {
    42         fullName : {
    43             get : function () {
    44                 return this.firstName + '-' + this.lastName
    45             },
    46             set : function (data) {
    47                 var names = data.split('-');
    48                 this.firstName = names[0];
    49                 this.lastName = names[1];
    50             }
    51         }
    52     });
    53     console.log(obj2.fullName);
    54     obj2.firstName = 'tim';
    55     obj2.lastName = 'duncan';
    56     console.log(obj2.fullName);
    57     obj2.fullName = 'kobe-bryant';
    58     console.log(obj2.fullName);
    59 </script>
    60 </body>
    61 </html>
     
  • 相关阅读:
    算法:最大回文子串问题
    Python HTTP库requests中文页面乱码解决方案!
    Python:默认参数
    在博客园开通个人博客了
    JQ选择器
    C# 接口
    C# 微信公众平台开发(2) 微信菜单
    C# 微信公众平台开发(1) 服务器配置
    博客园开博第一天!记录生活,扬帆启航!
    JavaScript判断、循环、Map、Set
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12554065.html
Copyright © 2011-2022 走看看