理解对象 - 简书

理解对象

1. 什么是对象

所谓万物皆对象，对象就是有自己属性的事务，在我们前端中，对象是有类的概念，通过类来创建任意多个具有相同属性和方法的对象。

2. 如何创建对象

2.1 普通创建对象

普通创建对象其实就是先创建一个Object实例，然后再为它添加属性和方法。
例：

var person = new Object ();
person.name = 'Lili';
person.age = 19;
person.sayName = function () {
  alert(this.name);
}

2.2 对象字面量

对象字面量其实就是直接创建一个对象并且直接给该对象添加属性和值。
例：

var person = {
  name: 'Lili',
  age: 19,
  sayName: function () {
    alert(this.name);
  }
}

3. 属性类型

属性的类型包括：数据属性和访问器属性，下面就这两种属性分别展开学习一下

3.1 数据属性

数据属性包含了一个数据值的位置，在这个位置来读取值和写入值。该数据属性又包括4个特征：Configurable（能否通过delete删除属性，默认：true）、 Enummerable（能否通过for-in循环数据，默认：true）、 writable（是否可以修改属性值，默认：true）、 Value（数据值，默认：undefined）
如果想要修改这些属性的默认值，就必须借助一个方法：Object.defineProperty ()
例：

var person = { };
Object.defineProperty (person, "name", {
  value: "Lili",
  writable: false,    //设置属性为只读
  configurable: false    //设置属性不可被delete删除
})
console.log(person.name);    //Lili
person.name = "WangMei";    //修改属性值
console.log(person.name);    //Lili
delete person.name;    //删除属性值
console.log(person.name);    //Lili

从上面的例子就可以看出，当我们给属性的值设置了只读和不可删除的特性后，再去修改和删除属性值，就不会成功了，这样在某些安全性要求高的项目中就可以被很好的使用了，属性的值不会被随意更改。

3.2 访问器属性

访问器属性与数据属性的区别就是：访问器属性没有writable和value属性，它包含两个函数：get（读取数据，默认值为undefined）和set（写入属性，默认值为undefined）
访问器属性不能直接定义，必须使用Object.defineProperty（）来定义
例：

var person = {
  marry: 2018, 
  num: 0
};
Object.defineProperty(person, "year", {
  get: function() {
    return this.marry;
  },
  set: function(newValue){
    if (newValue > 2018) {
      this.marry = newValue;
      this.num += newValue - 2018;
    }
  }
});
person.year = 2020;
console.log (person.num);    //2

该例子是创建了一个person对象，并且给了两个属性，2018结婚，婚龄为0，下面给它定义访问器属性，来用get函数读取对象中的属性，以及使用set函数来修改属性的值，这个例子中给对象传入一个year的属性并赋值为2020，当该属性和值进入Object.defineProperty（）方法中，直接调用set函数，对对象中的marry和num进行写入操作。

4. 定义多个属性

4.1 如何定义多个属性

在很多时候我们对对象的操作不单单是一个属性的增删改查，而是多个属性同时操作，如果还是用单个属性的方法，会大大浪费我们的时间尽力，也会增加代码量，使得我们的代码显得十分臃肿，所以我们需要同时定义多个属性来提高效率。
多个属性的定义使用的方法是：Object.defineProperties（）
例：

var person = { };
Object.defineProperties（person,{
  marry: {
    writable: true,
    value: 2018
  },
  num: {
    writable: true,
    value: 0
  },
  year: {
    get: function() {
      return this.marry;
    },
    set: function(newValue){
      if (newValue > 2018) {
        this.marry = newValue;
        this.num += newValue - 2018;
      }
    }
  } 
}）

4.1 如何读取属性特征

读取使用的方法是：Object.getOwnPropertyDeacriptor() 方法。
例：用上面的例子来读取属性

var des = Object.getOwnPropertyDeacriptor(person, "marry");
console.log(des.value);    //2018