ECMAScript5-P2（对象）

---

一、对象是什么？

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性；

对象的组成：

属性：属性名（字符串）和属性值（任意类型）组成
方法：特殊的属性（属性值是函数）

二、创建对象

字面量模式创建

使用{}作为对象的边界，对象是由多个属性组成，属性与属性之间通过,隔开，属性名与属性值通过:隔开;属性名一般不添加引号（当属性名中出现特殊字符的时候需要添加引号），属性值如果是字符串的一定添加引号

var obj = {
  name: 'spylent',
  age: 20
}
console.log(obj)
//{ name: 'spylent', age: 20 }

构造函数创建

var obj = new Object();
obj.name = "terry";
obj.age = 12;
obj.sayName = function(){
  console.log("my name is",this.name);
}

三、对象的增删查改

• .属性名
• [‘属性名’]

什么时候必须使用[‘属性名’]的方式？

1. 属性名包含特殊字符：-/空格
2. 属性名不确定，变量

let obj = {
  name: 'spylent',
  age: 19,
  gender:'男',
  address:'China'
}
console.log(obj.name)//spylent
obj['abc'] = 123
let a = 'bilibili'
let b = 123
obj[a] = '干杯'
obj[b] = true
obj.address = 'America'
console.log(obj)//{ '123': true, name: 'spylent', age: 19, gender:'男',address:'America',abc: 123, bilibili: '干杯' }
delete obj.address
delete obj['abc']
delete obj[a]
console.log(obj)//{ '123': true, name: 'spylent', age: 19, gender:'男'}

四、检测属性

in

检测某属性是否是某对象的自有属性或者是继承属性

var obj = {
  name: 'zhangsan',
  age: 18,
  school: 'xx大学'
}
//in运算符的左侧为属性名称，右侧为对象
console.log('name' in obj); //true
console.log('age' in obj);  //true
console.log('gender' in obj); //false
//如果用in判断一个属性存在，这个属性不一定是obj的，它可能是obj继承得到的,如：
'toString' in obj;  //  true
因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以obj也拥有toString属性。

Object.prototype.hasOwnProperty()

检测给定的属性是否是对象的自有属性，对于继承属性将返回false

var obj = {
  name: 'zhangsan',
  age: 18,
  school: 'xx大学'
}
console.log(obj.hasOwnProperty('name')); //true
console.log(obj.hasOwnProperty('age'));  //true
console.log(obj.hasOwnProperty('toString')); //false,toString为继承属性
console.log(obj.hasOwnProperty('gender')); //false

Object.prototype.propertyIsEnumerable()

propertyIsEnumerable()是hasOwnProperty()的增强版，除了是自身属性外，还要求是可枚举属性，即我们创建的属性。

var obj = {
  name: 'zhangsan',
  age: 18,
  school: 'xx大学'
}
console.log(obj.propertyIsEnumerable('name')); //true
console.log(obj.propertyIsEnumerable('age'));  //true
console.log(obj.propertyIsEnumerable('toString')); //false,不可枚举
console.log(obj.propertyIsEnumerable('gender')); //false

五、深入理解对象

ECMAScript中有两种属性：数据属性、访问器属性。这两种属性用于设置属性的高级属性，例如该属性是否可以配置，是否可以读写，是否可以遍历，并且可以通过setter,getter来监听数据的改变。

数据属性特性

直接通过.运算符添加属性时，配置项默认都为true

• Configurable：表示是否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性(属性直接定义在对象中，默认为true)。 当为false时，不能重新定义不能使用delete删除。
• Enumerable：表示能否通过for-in循环返回属性属性直接定义在对象中，默认为true
• Writable：表示能否修改属性的值。属性直接定义在对象中，默认为true。
• Value：包含这个属性的数据值

如何修改/添加属性默认的特性

Object.defineProperty(属性所在的对象,属性的名字,一个描述符对象)方法

注意：
当使用Object.defineProperty方法添加属性时，需要注意，若是仅写了value配置项，则其他配置项默认为false，打印对象时，该新属性会遍历不到；

var obj = {
  name: 'spylent',
  age: 20
}
console.log(obj)//{ name: 'spylent', age: 20 }
Object.defineProperty(obj, 'gender', {
  value: '男'
})
console.log(obj)//{ name: 'spylent', age: 20 }
console.log(obj.gender)//男
Object.defineProperties(obj,
  {
    major: {
      configurable: true,
      enumerable: true,
      writable: true,
      value: 'Up'
    },
    address: {
      value: 'America'
    }
  }
)
console.log(obj)//{ name: 'spylent', age: 20, major: 'Up' }
console.log(obj.address)//America
console.log("************")
var desc = Object.getOwnPropertyDescriptor(obj, 'gender')
console.log(desc)//{ value: '男', writable: false, enumerable: false, configurable: false }
var descs = Object.getOwnPropertyDescriptors(obj);
console.log(descs)
/**
 * {
  name: {
    value: 'spylent',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: { value: 20, writable: true, enumerable: true, configurable: true },
  gender: {
    value: '男',
    writable: false,
    enumerable: false,
    configurable: false
  },
  major: { value: 'Up', writable: true, enumerable: true, configurable: true },
  address: {
    value: 'America',
    writable: false,
    enumerable: false,
    configurable: false
  }
}
 */

访问器属性特性

访问器属性：这个属性不包含数据值，包含的是一对get和set方法，在读写访问器属性时，就是通过这两个方法来进行操作处理的。

• Configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为false
• Enumerable：表示能否通过for-in循环返回属性,默认为false
• Get：在读取属性时调用的函数,默认值为undefined
• Set：在写入属性时调用的函数,默认值为undefined
  访问器属性不能直接定义，要通过Object.defineProperty()这个方法来定义

**例子：*当输入框输入关键字之后，下方展示区域会动态展示输入框的内容

<body>
  请输入关键字：<input type="text" class="Keyword">
  <h1 class="show"></h1>
  <script>
    let dataObj = {}
    Object.defineProperty(dataObj, 'key', {
    // 若只指定get方法，不指定set方法，那就默认该属性是只读的
      get () {
        return 20
      },
      set (value) {
        document.getElementsByClassName('show')[0].innerHTML = value;
      }
    })
    document.getElementsByClassName('Keyword')[0].onchange = function (event) {
      dataObj.key = event.target.value
    }
  </script>
</body>

六、对象序列化

对象序列化是指将对象的状态转换为字符串，也可以反序列化，将字符串还原为对象函数。

RegExp，Error对象，undefined值不能序列化和反序列化。
JSON.stringify(obj) 将对象序列化为JSON字符串,只能序列化对象可枚举的自有属性
JSON.parse(jsonStr) 反序列化

var obj = {
  name: 'spylent',
  age: 20
}
//{"name":"spylent","age":20} string
console.log(JSON.stringify(obj), typeof JSON.stringify(obj))
//{ name: 'spylent', age: 20 } object
console.log(JSON.parse(JSON.stringify(obj)), typeof JSON.parse(JSON.stringify(obj)))