JavaScript的学习笔记（day04）

1.数据属性特性

configurable：该属性是否可以删除和重新定义
是否能修改为访问器属性，当为false时，不能重新定义，不能删除
enumerable：该属性是否能通过for/in遍历
writable：该属性是否能够修改
value：该属性的数据值

2.为对象定义或修改单个属性的特性 Object.defineProperty()方法

语法：Object.defineProperty(obj,‘prop’,description)
obj：目标对象
‘prop’：需要定义或者修改的属性名
description：该属性的特性描述 作用：定义或者修改目标对象的属性特性 注意：在我们创建一个对象，并且为对象设置属性时，该属性的configurable，enumerable，writable的值默认为true

3.为对象定义或修改多个属性的特性 Object.defineProperties()方法

语法：Object.defineProperties(obj, props)
obj：目标对象
props: 为该对象定义或修改的具体配置 作用：为该对象定义或修改多个属性特性

4.读取单个属性特性描述 Object.getOwnPropertyDescriptor()方法

语法：Object.getOwnPropertyDescriptor(obj，prop)
obj：目标对象
prop：目标对象内属性名称 作用：读取该对象内的某个属性的特性描述

5.读取对象的自身属性特性描述 Object.getOwnPropertyDescriptors()方法

语法：Object.getOwnPropertyDescriptors(obj)
obj：目标对象 作用：读取该对象内的自有属性的特性描述，如果没有自身属性，返回空对象

6.访问器属性

configurable：该属性能否通过delete删除从而定义属性，能否修改，默认false
enumerable：能否通过for/in循环遍历，默认false get：在读取属性时调用的函数，默认undefined
set：在写入属性时调用的函数，默认undefined

案例：通过访问器属性来实现简单的双向数据绑定

  <!-- 输入框 -->
  <input type="text" id="input">
  <!-- 内容展示区 -->
  <div class="showContent"></div>
  <script>
    // 1.创建一个数据容器对象
    var date = {};
    // 2.访问器属性新增一个属性 用户的输入值
    Object.defineProperty(data,'input',{
      get:function(){
        return 10;
      },
      set:function(newValue){
        // 4.给div的内容进行赋值
        document.getElementById('showContent').innerHTML = newValues
      }
    })
    // 3.获取到用户输入的值 DOM 命令式编程
    document.getElementById('input').addEventListener('input',function(event){
      //event是在js中监听事件返回的参数
      // 获取到输入框的值
      data.input = event.target.value;
    })
  </script>

7.对象序列化和反序列化

概念：
将对象的状态转换为字符串
将字符串还原为对象函数 注意：RegExp，Error对象，undefined值不能序列化和反序列化 方法：
序列化：JSON.stringify（obj）将对象序列化为JSON字符串，只能序列化对象的可枚举属性
反序列化：JSON.parse（jsonStr）将JSON字符串反序列化为对象