這一章，我們將好好去看看一個特殊的變量，對象。
我們先看看官方的定義：無序?qū)傩缘募?，其屬性可以包含基本值，對象，或者函?shù)。從字面意思上，我們可以理解為對象是一個沒有特定順序的的集合，對象的每一個屬性和方法都有一個自己的名稱，每一個名稱都會有一個值，當然這個值，可以使對象，函數(shù)。以及其他基本類型數(shù)據(jù)。
不過還是太抽象了，我個人其實更傾向于將對象理解成一個“圖紙”，一個建房子的圖紙，在這個圖紙上，我們標明了房子的具體形狀，哪里開窗戶等等一系列的參數(shù)，那么說到對象，就必然會說到實例，同樣的道理，在我的理解里，實例，就是按照“圖紙”來創(chuàng)建的一個個房子。那么對象這個圖紙，有哪些屬性和方法呢？

屬性類型

對象有兩種屬性：數(shù)據(jù)屬性以及訪問器屬性

數(shù)據(jù)屬性

1. configurable:表示對象是否可以通過delete來刪除屬性
2. Enumerable：表示是否可以通過for in 循環(huán)返回屬性
3. Writable：表示是否可以修改屬性
4. Value: 表示數(shù)據(jù)的值。

那么我們?nèi)绾稳バ薷囊约霸O置這些值呢？好在js提供了一個方法，Object.defineProperty(obj(屬性所在的對象),name(屬性的名稱),dataTypeObj(所要處理的數(shù)據(jù)類型))方法，如果不指定參數(shù)的話，以上1,2,3個數(shù)據(jù)屬性都將是默認值true，如果指定了參數(shù)，將會將對象的具體屬性的數(shù)據(jù)屬性類型進行特殊處理。下面我們已房子圖紙為例，來看下如何處理

var house = {};
Object.defineProperty(house,'name',{
    configurable:false,
    value:'二鍋頭的房子圖紙'
});
console.log(house.name);
delete house.name;
console.log(house.name);

復制到控制臺，我們看下會顯示什么

configurable.png

var house = {};
Object.defineProperty(house,'name',{
    writable:false,
    value:'二鍋頭的房子圖紙'
});
console.log(house.name);
house.name = '我要修改';
console.log(house.name);

在控制臺看下結(jié)果

image.png

var house = {};
Object.defineProperty(house,'name',{
    enumerable:false,
    value:'二鍋頭的房子圖紙'
});
for(var key in house){
   console.log(key + '：' + house[key])
}

在控制臺中沒有任何的輸出，說明無法通過for in 來循環(huán)出書數(shù)據(jù)
上面我們說明了對象的4個數(shù)據(jù)類型，下面我們來看看對象的訪問器屬性

訪問器屬性

訪問器屬性是成對出現(xiàn)的，存與取

1. getter 對象訪問任何一個屬性的時候，都需要先通過調(diào)用getter函數(shù)，由其返回屬性的值。
2. setter 對象的具體的屬性寫入值的時候，都會調(diào)用setter函數(shù)，將值寫入。

同時對于訪問器屬性，js同樣提供了configurable以及enumerable屬性。如果不設置值的話，將默認為false.
同數(shù)據(jù)屬性一樣，訪問器屬性不能跟直接的定義，只能通過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的功能。這樣當我們賦值以及讀取的時候我們都能夠?qū)崟r的監(jiān)控了，這也就使得vue的誕生了，后面詳細說下vue的原理。（又挖一個坑）
那么我們?nèi)绾稳プx取一個對象的屬性值呢？

屬性特性的讀取

在js中，我們難免會需要知道一個對象的數(shù)據(jù)屬性以及訪問器屬性具體設置的值，所以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

至此，我們關(guān)于對象的基本知識說完了，下一章，我們將一起來看看對象的創(chuàng)建