js基础阵营：变量篇之特殊变量-对象

这一章，我们将好好去看看一个特殊的变量，对象。
我们先看看官方的定义：无序属性的集合，其属性可以包含基本值，对象，或者函数。从字面意思上，我们可以理解为对象是一个没有特定顺序的的集合，对象的每一个属性和方法都有一个自己的名称，每一个名称都会有一个值，当然这个值，可以使对象，函数。以及其他基本类型数据。
不过还是太抽象了，我个人其实更倾向于将对象理解成一个“图纸”，一个建房子的图纸，在这个图纸上，我们标明了房子的具体形状，哪里开窗户等等一系列的参数，那么说到对象，就必然会说到实例，同样的道理，在我的理解里，实例，就是按照“图纸”来创建的一个个房子。那么对象这个图纸，有哪些属性和方法呢？

属性类型

对象有两种属性：数据属性以及访问器属性

数据属性

1. configurable:表示对象是否可以通过delete来删除属性
2. Enumerable：表示是否可以通过for in 循环返回属性
3. Writable：表示是否可以修改属性
4. Value: 表示数据的值。

那么我们如何去修改以及设置这些值呢？好在js提供了一个方法，Object.defineProperty(obj(属性所在的对象),name(属性的名称),dataTypeObj(所要处理的数据类型))方法，如果不指定参数的话，以上1,2,3个数据属性都将是默认值true，如果指定了参数，将会将对象的具体属性的数据属性类型进行特殊处理。下面我们已房子图纸为例，来看下如何处理

var house = {};
Object.defineProperty(house,'name',{
    configurable:false,
    value:'二锅头的房子图纸'
});
console.log(house.name);
delete house.name;
console.log(house.name);

复制到控制台，我们看下会显示什么

configurable.png

可以很明显的看出，没有被删除掉。
现在我们在看看writable,请看代码

var house = {};
Object.defineProperty(house,'name',{
    writable:false,
    value:'二锅头的房子图纸'
});
console.log(house.name);
house.name = '我要修改';
console.log(house.name);

在控制台看下结果

image.png

最后我们来看下enumerable

var house = {};
Object.defineProperty(house,'name',{
    enumerable:false,
    value:'二锅头的房子图纸'
});
for(var key in house){
   console.log(key + '：' + house[key])
}

在控制台中没有任何的输出，说明无法通过for in 来循环出书数据
上面我们说明了对象的4个数据类型，下面我们来看看对象的访问器属性

访问器属性

访问器属性是成对出现的，存与取

1. getter 对象访问任何一个属性的时候，都需要先通过调用getter函数，由其返回属性的值。
2. setter 对象的具体的属性写入值的时候，都会调用setter函数，将值写入。

同时对于访问器属性，js同样提供了configurable以及enumerable属性。如果不设置值的话，将默认为false.
同数据属性一样，访问器属性不能跟直接的定义，只能通过Object.defineProperty()方法来设置。同样以上面的例子来说明

var house = {
   name:'二锅头的房子',
   totalMoney:0
};
Object.defineProperty(house,'money',{
  configurable:false,
  get:function(){
    return this.totalMoney + '元';
  },
  set:function(val) {
    this.totalMoney = val;
  }
});
house.money = 200000;
console.log(house);
console.log(house.money);
delete house.money;
console.log(house.money);

将代码拷贝到控制台，我们来看下结果

image.png

我们明明在赋值的时候给的是20000，为啥后面会多一个元呢？这就是get的功能。这样当我们赋值以及读取的时候我们都能够实时的监控了，这也就使得vue的诞生了，后面详细说下vue的原理。（又挖一个坑）
那么我们如何去读取一个对象的属性值呢？

属性特性的读取

在js中，我们难免会需要知道一个对象的数据属性以及访问器属性具体设置的值，所以js提供了Object.getOwnPropertyDescriptor()方法，来获取，同样以上面的例子来举例。

var house = {
   name:'二锅头的房子',
   totalMoney:0
};
Object.defineProperty(house,'money',{
  configurable:false,
  get:function(){
    return this.totalMoney + '元';
  },
  set:function(val) {
    this.totalMoney = val;
  }
});
console.log(Object.getOwnPropertyDescriptor(house,'money'));

复制代码到控制台，我们来看下结果

image.png

至此，我们关于对象的基本知识说完了，下一章，我们将一起来看看对象的创建