ES5___Object 扩展

迷南。 2022-12-08 05:30 163阅读 0赞

## 一、ES5给Object扩展了一些静态方法, 常用的2个： ##

#### 1. Object.create(prototype, \[descriptors\]) ####

作用: 以指定对象为原型创建新的对象，为新的对象指定新的属性, 并对属性进行描述。

*  value : 指定值
 *  writable : 标识当前属性值是否是可修改的，默认为false。
 *  configurable: 标识当前属性是否可以被删除，默认为false。
 *  enumerable： 标识当前属性是否能用for in 枚举，默认为false。

<script type="text/javascript">
      var obj = { name : 'curry', age : 29}
      var obj1 = { };
      obj1 = Object.create(obj, { 
         sex : { 
             value : '男',
             writable : true,
             configurable:true,
             enumerable:true
         }
     });
    
      console.log(obj1.sex);
      obj1.sex = '女';
      console.log(obj1.sex);
      delete obj1.sex;
      console.log(obj1);
    </script>

##### 打印结果： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]  
  可见，修改和成功都 OK 。  
  现在我们来看看 for in 枚举，我们先把 delete 注释掉。

<script type="text/javascript">
      var obj = { name : 'curry', age : 29}
      var obj1 = { };
      obj1 = Object.create(obj, { 
         sex : { 
             value : '男',
             writable : true,
             configurable:true,
             enumerable:true
         }
     });
    
      console.log(obj1);
      console.log(obj1.sex);
      obj1.sex = '女';
      console.log(obj1.sex);
      // delete obj1.sex;
      // console.log(obj1);
      for(var i in obj1){ 
        console.log(i);
      }
    </script>

##### 打印结果： #####

![在这里插入图片描述][20200918163121202.png_pic_center]

#### 2. Object.defineProperties(object, descriptors) ####

作用: 为指定对象定义扩展多个属性。

*  get ：用来获取当前属性值得回调函数。
 *  set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值。
 *  存取器属性：setter，getter一个用来存值，一个用来取值。

var obj2 = { 
          firstName : 'curry',
          lastName : 'stephen'
      };
      Object.defineProperties(obj2, { 
          fullName : { 
              get : function () {    //获取扩展属性的值，获取扩展属性值时，get方法自动调用
                console.log("get()");
                return this.firstName + '-' + this.lastName
              },
              set : function (data) {      
                 //监听扩展属性，当扩展属性发生变化时会自动回调，自动回调后会将变化的值作为实参注入到set函数
                 console.log("set()");
                  var names = data.split('-');
                  this.firstName = names[0];
                  this.lastName = names[1];
              }
          }
      });
      console.log(obj2);
      console.log(obj2.fullName);
      obj2.firstName = 'tim';
      obj2.lastName = 'duncan';
      console.log(obj2.fullName);
      obj2.fullName = 'kobe-bryant';
      console.log(obj2.fullName);

##### 打印结果： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]

## 二、对象本身的两个方法 ##

*  get propertyName()\{\} 用来得到当前属性值的回调函数。
 *  set propertyName()\{\} 用来监视当前属性值变化的回调函数。

<script type='text/javascript'>
        var obj = { 
            firstName : 'kobe',
            lastName : 'bryant',
            get fullName(){ 
                return this.firstName + ' ' + this.lastName
            },
            set fullName(data){ 
                var names = data.split(' ');
                this.firstName = names[0];
                this.lastName = names[1];
            }
        };
        console.log(obj);
        console.log(obj.fullName);
        obj.fullName = 'curry stephen';
        console.log(obj.fullName);
    </script>

##### 打印结果： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/cdb0e76705554483a9a961f61d95175a.png
[20200918163121202.png_pic_center]: /images/20221123/1259f07e37a0489cab908ab23a92751a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/7885e5ffc4de4d6f8ebd36150f489d8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/2cf8cf2d8c3d44a59d310d7bbc9d898c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES5___ Array 扩展

1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标 <script type="text/javascript">

╰半橙微兮°/ 2022年12月08日 05:41/ 0 赞/ 207 阅读

相关 ES5___Object 扩展

一、ES5给Object扩展了一些静态方法, 常用的2个： 1. Object.create(prototype, \[descriptors\]) 作用: 以指定

迷南。/ 2022年12月08日 05:30/ 0 赞/ 164 阅读

相关 ES6--对象（Object）方法的扩展

Object.is(v1,v2):判断两个数据是否全等 2.Object.assgin(target,source1,source2):将原对象的属性复制到目标对象上

阳光穿透心脏的1/2处/ 2022年12月06日 12:38/ 0 赞/ 204 阅读

相关 ES5--数组的扩展

//Array.indexOf();输出第一个出现的该数的位置下标 //Array.lastIndexOf();输出最后一个出现的该数的位置下标 //Array.for

浅浅的花香味﹌/ 2022年12月06日 04:15/ 0 赞/ 206 阅读

相关 ES5--json和Object对象扩展

JSON.stringify(obj/arr) js对象/数组转换为json对象/数组 JSON.parse(json) json对象/数组转换为js对象/数组

水深无声/ 2022年12月06日 04:14/ 0 赞/ 200 阅读

相关实现ES5以下兼容，Object.create()、getElementsByClassName()

Object.create：搞清楚new F()和Object.create(F.prototype)是一样的 if (!Object.create) {

一时失言乱红尘/ 2022年07月28日 04:16/ 0 赞/ 158 阅读

相关 ES5规范之Object增强

在ES5规范中，还有一个比较重要的改进，就是Object对象的增强，ES5为Object新增了一系列函数，用于编写安全健壮的程序，今天我们就来一一介绍它们的使用方法。下面就

刺骨的言语ヽ痛彻心扉/ 2022年07月28日 01:39/ 0 赞/ 171 阅读

相关 es6对象的扩展底层实现____Object.values

Object.values的用法： <!DOCTYPE html> <html lang="en"> <head> <meta

痛定思痛。/ 2022年05月19日 13:14/ 0 赞/ 223 阅读

相关 ECMAScript5，object对象扩展

object对象扩展 <script> / 对象的扩展以一个对象为原型创建另一个对象

左手的ㄟ右手/ 2022年01月16日 02:15/ 0 赞/ 318 阅读

相关 ES5 中对象方法扩展：Object.create()、Object.defineProperties()、对象本身的 get 与 set 详解

Object.create() `Object.create(prototype[, descriptors])` 以指定的对象为原型创建新的对象。 `proto

绝地灬酷狼/ 2021年12月05日 14:49/ 0 赞/ 316 阅读